CODEWITHSUNDEEP
c#asp.net
user603007
user603007

Reputation: 11794

how to generate this list with asp.net?

i am trying to generate the following list in asp.net?

<div class="items">

      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
         <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
         <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
         <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
         <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
      </div>

      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
         <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
         <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
         <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
         <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
      </div>

      <!-- 10-15 -->
      <div>
         <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
         <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
         <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
         <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
         <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
      </div>

   </div>

what to use? I tried repeater and datagrid.

Upvotes: 0

Views: 183

Answers (3)

Hans Kesting
Hans Kesting

Reputation: 39284

In a similar situation I have used two nested Repeaters or ListViews (where I couldn't use a plain count to group): the first for the <div>, the second for the contents. Plus the GroupBy Linq method to group the complete list into the groups I wanted to show.

Upvotes: 0

El Ronnoco
El Ronnoco

Reputation: 11922

Untested...

//divMain should be a reference to the 'items' div...

int i = 0;

System.Web.UI.HtmlControls.HtmlGenericControl divCurrent = 
    new System.Web.UI.HtmlControls.HtmlGenericControl("div");


foreach (string imgSrc in imgSrcs)
{
    Image img = new Image();
    img.ImageUrl = imgSrc;
    divCurrent.Controls.Add(img);
    if (i++ ==5) {
        divMain.Controls.Add(divCurrent);
        divCurrent = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
        i = 0;
    }
}

//then add the stragglers...
if (divCurrent.Controls.Count > 0) divMain.Controls.Add(divCurrent);

Upvotes: 0

Curtis
Curtis

Reputation: 103368

Instead of using a Repeater, use a ListView control.

This allows you to Group items, and is available with ASP.NET 3.5+

https://web.archive.org/web/20211020150712/https://www.4guysfromrolla.com/articles/010208-1.aspx

<asp:ListView ID="ProductList1" runat="server" 
   DataSourceID="ProductDataSource" 
   GroupItemCount="5" ItemPlaceholderID="itemsGoHere" 
   GroupPlaceholderID="groupsGoHere">

   <LayoutTemplate>
         <asp:PlaceHolder runat="server" ID="groupsGoHere"></asp:PlaceHolder>
   </LayoutTemplate>

   <GroupTemplate>
      <div>
         <asp:PlaceHolder runat="server" ID="itemsGoHere"></asp:PlaceHolder>
      </div>
   </GroupTemplate>

   <ItemTemplate>
      <img />
   </ItemTemplate>
</asp:ListView>

Upvotes: 6

Related Questions