Plantilla de repetidor ASP.NET, código condicional para cada enésimo elemento

webforms repeater

Question

Estoy usando un repetidor asp.net para crear un montón de imágenes. El marcado de la imagen es todo lo mismo, por lo que el estándar <ItemTemplate> está bien.

Sin embargo, quiero envolver K imágenes en un div. Digamos que ato más de 25 imágenes al repetidor y quiero 5 imágenes por div. ¿Cómo realizo la creación condicional de las etiquetas de inicio y cierre de div?

¿Es este un caso más adecuado para un bucle for.

Answer 1

Agregue dos controles de etiqueta vacíos en su Plantilla de elementos de repetición donde desee que aparezcan sus etiquetas div.

A continuación, agregue un evento ItemDataBound al repetidor.

A continuación, agregue este código en el evento ItemDataBound:

 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

Nota: Esto necesitará algunos ajustes para manejar el primer div y es posible que deba hacer algo como If (e.Item.ItemIndex + 1) Mod 5 = 0 para que los divs aparezcan exactamente donde los quiere.

Para más información:
Propiedad DataListItem.ItemIndex
Evento DataList.ItemDataBound

Answer 2

Si desea mantener su marcado en la página ASPX, también puede probar esta variación en el método de David:

En la página aspx:

<ItemTemplate>
<asp:Literal runat="server" ID="divStart" Text="<div>" />
<asp:Image ....>
<asp:Literal runat="server" ID="divEnd" Text="</div>" />
</ItemTemplate>

En el evento ItemDataBound en el código subyacente:

e.Item.FindControl("divStart").Visible
= e.Item.FindControl("divEnd").Visible
= e.Item.ItemIndex % 5 == 0;

Answer 3

Aquí es donde Asp.Net WebForms puede brindarle una increíble eficiencia RAD. Puede usar el nuevo control ListView y establecer el número de elementos por "grupo", lo que le permitirá configurar el HTML que rodea a un grupo, así como también cada elemento individual. De esta forma puede rodear al grupo con las etiquetas condicionales.

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

Esto debería funcionar para usted, sin necesidad de nada en el código subyacente (que no sea vinculante para el repetidor):

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