Plantilla de repetidor de ASP.NET, código condicional para cada elemento Nth

Question

Estoy usando un repetidor asp.net para crear un conjunto de imágenes. El marcado de la imagen es el 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?

Este es un caso más adecuado para un bucle for.

Answer 1

Esto debería funcionar para usted, sin necesidad de nada en el código subyacente (que no sea vinculante 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> 

Answer 2

Agregue dos controles de etiqueta vacíos en su plantilla de elemento Repeaters donde desea que aparezcan sus etiquetas div.

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

A continuación, agregue el 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 tendrá algunos ajustes para manejar la primera div y puede que tenga que hacer algo como Si (e.Item.ItemIndex + 1) Mod 5 = 0 para que los divs aparezcan exactamente donde los quiere.

Para más información:
DataListItem.ItemIndex Property
DataList.ItemDataBound Event

Answer 3

Si desea mantener su margen de beneficio en la página ASPX también se podría tratar 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 4

Aquí es donde Asp.Net WebForms le puede dar increíble RAD eficiencia. 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>