Orientación horizontal en el control del repetidor

Question

Tengo un control de repetidor que se utiliza para mostrar las imágenes cargadas.

¿Cómo puedo mostrar las imágenes en el repetidor horizontalmente? ¿Cómo puedo dar la leyenda al pie de la imagen en esto?

Answer 1

suponiendo que haya algo de código como este:

<asp:repeater ...> 

</asp:repeater> 

acaba de inyectar "<itemtemplate>" con algo de código html con la apariencia que desea. No tiene nada de especial mostrar horizontal o vertical, solo depende de las etiquetas html que use dentro de las plantillas de elementos.

Answer 2

Si usted no necesita un repetidor especial para hacer esto, se puede utilizar un DataList lugar y establecer el RepeatDirection="Horizontal"

Answer 3

depende de lo que está utilizando para mostrar, por ejemplo, si sus imágenes están en un div puso float:left; en él, o use la DataList.

Answer 4

usted puede construir su ItemTemplate como:

<ItemTemplate> 
    <div class="floating"> 
     <img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' /> 
     <span><%# /* Code to Eval your image caption from datasource */ %></span> 
    </div> 
</ItemTemplate> 

donde la clase .Flotante del div es:

.floating { float:left; overflow:hidden; } 
.floating img { display: block; } 

Yo suelo poner un div para clara después de una secuencia de elemento flotante, a restablecer el estado del modelo de caja.

<div style="clear:both;"></div> 

Answer 5

cómo mostrar línea horizontal después de cada fila

<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" > 
    <ItemTemplate> 
     <asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'> 
      <img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" /> 
     </asp:LinkButton> 
     <br /> 

     <asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton> 
     <asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton> 

    </ItemTemplate> 
    <FooterTemplate> 
     <asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext"> 
     </asp:Label> 
    </FooterTemplate> 
</asp:DataList> 

Answer 6

Como dijo @numenor in this other answer, es sólo una cuestión de lo que se utiliza HTML. Aquí, un ejemplo de cómo lograr lo que necesita usando tablas html.

<table width="<%= this.TotalWidth %>"> 
    <tr> 
     <asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound"> 
      <ItemTemplate> 
       <td class="itemWidth"> 
        Your item goes here and will be 
        displayed horizontally as a column. 
       </td> 
      </ItemTemplate> 
     </asp:Repeater> 
    </tr> 
</table> 

Tenga en cuenta que el ancho se maneja con una propiedad del lado del servidor TotalWidth que calcula la anchura total necesaria sobre la base de, por supuesto, el número de elementos repetidor mostrará. También se recomienda crear una clase de CSS para definir el ancho de cada elemento para garantizar el diseño adecuado.

protected string TotalWidth 
{ 
    get 
    { 
     //In this example this.Madibu.Materiales is the datasource for the Repeater, 
     //so this.Madibu.Materiales.Count is the column count for your table. 
     //75 must be equal to the width defined in CSS class 'itemWidth' 
     return (this.Madibu.Materiales.Count * 75).ToString() + "px"; 
    } 
}