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

问题

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.

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

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

回答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;

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

来源：https://stackoverflow.com/questions/560023/asp-net-repeater-template-conditional-code-for-every-nth-element

标签

ASP.NET

webforms

repeater

itemtemplate