Làm cách nào để hiển thị x mục trên mỗi hàng trong bộ lặp?

Question

Bất cứ ai có bất kỳ đầu mối nào về cách hiển thị 4 mục đi ngang với bộ lặp? Một bộ lặp lại hiển thị các mục đi xuống theo mặc định. Đây là mã lặp lại thử nghiệm của tôi cho đến thời điểm này:

<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

Cố gắng đặt lớp CSS cho các thẻ <td> của bạn và đặt chiều rộng rõ ràng.

Answer 2

Sử dụng kiểm soát DataList với tài sản RepeatColumns có thể đơn giản hơn:

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

Answer 3

Scott Guthrie cung cấp một ví dụ về làm thế nào để làm điều này với một điều khiển ListView trong article sau. Ông sử dụng điều khiển để hiển thị một danh sách không có thứ tự và sử dụng CSS để kiểm soát bố cục.

Answer 4

Sử dụng một 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 5

<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> 

Long sống lặp lại khiêm tốn!

Answer 6

Điều này có thể thực hiện công việc (tôi giả sử bạn có thể có nhiều hơn một hàng bốn hình ảnh):

<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> 

(không có IDE nên chưa được kiểm tra :)

Nếu nó không giúp , một số câu trả lời từ this question có thể.

Answer 7

Sửa đổi đề xuất của Nick Tôi đã có thể sử dụng để tạo 5 Hình ảnh dọc theo chiều ngang x n. Cảm ơn Nick!

<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> 

Và đây là ColorThumbnailImage

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