Tekrarlayıcıda satır başına x öğesini nasıl gösterirsiniz?

Question

4 öğenin bir tekrarlayıcıyla yatay olarak nasıl görüneceğini gösteren herhangi bir ipucu var mı? Bir tekrarlayıcı, varsayılan olarak aşağı inen öğeleri gösterir. senin <td> etiketleri için bir CSS sınıfı ayarlamak ve açık bir genişlik ayarlamak

<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

Dene: Burada şimdiye kadar benim test tekrarlayıcı kodudur. RepeatColumns özelliğiyle DataList denetimi kullanma

Answer 2

basit olabilir:

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

Answer 3

Scott Guthrie aşağıdaki article bir ListView kontrolü ile bunun nasıl bir örnek verdi. Denetimi, sırasız bir liste oluşturmak için kullanır ve düzeni kontrol etmek için CSS kullanır.

Answer 4

kullanın 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> 

Uzun mütevazi tekrarlayıcı yaşa!

Answer 6

Bu işi yapabilecek (ı olabilecek tahmin ediyorum daha dört resim bir satır daha): bu kadar denenmemiş

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

(hiçbir IDE :)

o yardımcı olmazsa , bazı yanıtlar this question olabilir.

Answer 7

Nick'in önerisini değiştirme 5 yatay x n dikey Resim Izgarası yapmak için kullanabildim. Sağol 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> 

Ve burada

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