Question

任何人都知道如何用转发器显示4个水平项目？转发器默认显示下降的项目。到目前为止，这是我的测试转发器代码：

<table border=0 cellpadding=0 cellspacing=0 align="center" width="800px;>
    <tr>
        <asp:Repeater ID="rptTest" runat="server">
            <ItemTemplate>
                    <td>
                        <h3><a href="<%#GetItemLink((Item)Container.DataItem) %>"><%#((WebMenuItem)Container.DataItem).Name %></a></h3>
                        <div>
                            <a href="<%#GetUrl((Item)Container.DataItem) %>">
                                <img src="<%#GetImage((Item)Container.DataItem) %>" alt="<%#GetAltText((Item)Container.DataItem) %>" />
                            </a>
                        </div>
                    </td>
            </ItemTemplate>
        </asp:Repeater>
    </tr>
</table>

Answer 1

<table>
    <asp:Repeater id="rptTest" runat="server">
        <ItemTemplate>
            <%# (Container.ItemIndex + 4) % 4 == 0 ? "<tr>" : string.Empty %>
                <td>
                    ... cell contents omitted ...
                </td>
            <%# (Container.ItemIndex + 4) % 4 == 3 ? "</tr>" : string.Empty %>
        </ItemTemplate>
    </asp:Repeater>
</table>

简陋的中继器万岁！

Answer 2

修改Nick的建议我能够用来制作一个5横x n 垂直图像网格。谢谢尼克！

<asp:Repeater ID="colorsList" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
    </HeaderTemplate>
    <ItemTemplate>
        <%# (Container.ItemIndex != 0 && Container.ItemIndex % 5 == 0) ? @"</tr><tr>" : string.Empty %>
        <td>
        <div><img src="<%#ColorThumbnailImage((string)DataBinder.Eval(Container.DataItem, "COLOR_SQUARE_IMAGE")) %>" /></div>
        <div><%# DataBinder.Eval(Container.DataItem, "COLOR_NAME") %></div>
        </td>
    </ItemTemplate>
    <FooterTemplate>
        </tr></table>
    </FooterTemplate>
    </asp:Repeater>

这是ColorThumbnailImage

 protected string ColorThumbnailImage(string fileName)
{
    return Request.ApplicationPath + MySports.System.Configuration.ColorSquareImageLocation + fileName;
}

Answer 3

Scott Guthrie在以下article中提供了如何使用ListView控件执行此操作的示例。他使用控件渲染无序列表并使用CSS来控制布局。

Answer 4

使用带有RepeatColumns属性的DataList控件可能更简单：

DataList1.RepeatColumns = 4;
DataList1.RepeatDirection = RepeatDirection.Horizontal;

Answer 5

使用ListView http://msdn.microsoft.com/en-us/library/bb398790.aspx

<asp:ListView runat="server" ID="ListView1" 
    DataSourceID="SqlDataSource1" 
    GroupItemCount="5">
  <LayoutTemplate>
    <table runat="server" id="table1">
      <tr runat="server" id="groupPlaceholder">
      </tr>
    </table>
  </LayoutTemplate>
  <GroupTemplate>
    <tr runat="server" id="tableRow">
      <td runat="server" id="itemPlaceholder" />
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td runat="server">
      <%-- Data-bound content. --%>
      <asp:Label ID="NameLabel" runat="server" 
          Text='<%#Eval("Name") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

Answer 6

尝试为<td>标记设置CSS类，并设置显式宽度。

Answer 7

这可能会起作用（我假设你可能有四行以上的一行）：

<asp:Repeater ID="rptTest" runat="server">

<HeaderTemplate>
<table border=0 cellpadding=0 cellspacing=0 align="center" width="800px">
<tr>
</HeaderTemplate>

<ItemTemplate>
<%# (Container.ItemIndex != 0 && Container.ItemIndex % 4 == 0) ? @"</tr><tr>" : string.Empty %>
<td>
<h3><a href="<%#GetItemLink((Item)Container.DataItem) %>"><%# (WebMenuItem)Container.DataItem).Name %></a></h3>
<div>
<a href="<%#GetUrl((Item)Container.DataItem) %>"><img src="<%#GetImage((Item)Container.DataItem) %>" alt="<%#GetAltText((Item)Container.DataItem) %>" /></a>
</div>
</td>
</ItemTemplate>

<FooterTemplate>
</tr>
</table>
</FooterTemplate>

</asp:Repeater>

（没有IDE如此未经测试：）

如果没有帮助，this question可能会有一些答案。

如何在转发器中每行显示x个项目？

7 个答案: