ASP.NET Repeater Template, Conditional Code for every Nth element - asp.net

Question

I'm using an asp.net repeater to create a bunch of images. The image markup is all the same so the standard <ItemTemplate> is fine.
However, I want to wrap K images in a div. Lets say I bind 25+ images to the repeater and I want 5 images per div. How do I go about conditionally creating the start and close tags for the div?
Is this a case better suited for a for loop.

Answer 1

This should work for you, with no need for anything in the code behind (other than binding the repeater..):
<asp:Repeater ID="repImages" runat="server">
<HeaderTemplate><div></HeaderTemplate>
<ItemTemplate>
<%# (Container.ItemIndex != 0 && Container.ItemIndex % 5 == 0) ? #"</div><div>" : string.Empty %>
<asp:Image ID="imgGallery" runat="server" ImageUrl='<%# /* your code here */ %>' />
</ItemTemplate>
<FooterTemplate></div></FooterTemplate>
</asp:Repeater>

Answer 2

Here is where Asp.Net WebForms can give you incredible RAD efficiency.
You can use the new ListView control, and set the number of items per "group", which will allow you to setup the HTML that surrounds a group, as well as each individual item. This way you can surround the group with the conditional tags.
<asp:ListView ID="ListView1" runat="server" DataKeyNames="id" DataSourceID="LinqDataSource1" GroupItemCount="3">
<LayoutTemplate>
<div id="layout">
<asp:PlaceHolder ID="groupPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<GroupTemplate>
<div class="group">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</GroupTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
<ItemTemplate>
<div class="item">
<img alt='<%# Eval("title") %>' title='<%# Eval("title") %>'
src='<%# Eval("filename","photos/{0}") %>' />
</div>
</ItemTemplate>
</asp:ListView>

Answer 3

If you want to keep your markup on the ASPX page you could also try this variation on David's method:
On the aspx page:
<ItemTemplate>
<asp:Literal runat="server" ID="divStart" Text="<div>" />
<asp:Image ....>
<asp:Literal runat="server" ID="divEnd" Text="</div>" />
</ItemTemplate>
In the ItemDataBound event in the codebehind:
e.Item.FindControl("divStart").Visible
= e.Item.FindControl("divEnd").Visible
= e.Item.ItemIndex % 5 == 0;

Answer 4

Add two empty label controls into your Repeaters ItemTemplate where you'd want your div tags to be.
Then add an ItemDataBound event to the Repeater.
Then add this code into the ItemDataBound event:
Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs)
If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
If e.Item.ItemIndex Mod 5 = 0 Then
Dim lblDivStart As Label = CType(e.Item.FindControl("lblDivStart"), Label)
Dim lblDivEnd As Label = CType(e.Item.FindControl("lblDivEnd"), Label)
lblDivStart.text = "<div>"
lblDivEnd.text = "</div>"
End If
End If
End Sub
Note - This will need some tweaking to handle the first div and you may need to do something like If (e.Item.ItemIndex + 1) Mod 5 = 0 to get the divs to show up exactly where you want them.
For more info:
DataListItem.ItemIndex Property
DataList.ItemDataBound Event