Orientation horizontale dans le contrôle répéteur

Question

J'ai un contrôle Repeater utilisé pour afficher les images téléchargées.

Comment afficher les images dans le répéteur horizontalement? Comment puis-je donner la légende au bas de l'image dans ce cas?

Answer 1

supposant que vous avez un code comme ceci:

<asp:repeater ...> 

</asp:repeater> 

injectent juste "<itemtemplate>" avec un code html avec le look and feel que vous voulez. Rien de spécial à propos de l'affichage horizontal ou vertical dépend juste de ce que les balises html que vous utilisez dans les modèles d'éléments.

Answer 2

Si vous ne surtout pas besoin d'un répéteur pour ce faire, vous pouvez utiliser un DataList à la place et définir le RepeatDirection="Horizontal"

Answer 3

dépend de ce que vous utilisez pour afficher, par exemple, si vos images sont dans un div mis float:left; dessus, ou utilisez la DataList.

Answer 4

Vous pouvez construire votre ItemTemplate comme:

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

où la classe .floating de la div est:

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

je mets habituellement un div pour clair après une séquence d'élément flottant, à réinitialiser l'état du modèle de boîte.

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

Answer 5

comment afficher la ligne horizontale après chaque ligne

<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

Comme @numenor dit in this other answer, il est juste une question de ce que vous utilisez HTML. Ici, un exemple de la façon d'accomplir ce dont vous avez besoin en utilisant des tables 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> 

Notez que la largeur est traitée avec une propriété de côté serveur TotalWidth qui calcule la largeur totale nécessaire sur la base, bien sûr, le nombre de répéteurs articles affiche. Créer une classe CSS pour définir la largeur de chaque élément est également recommandé pour assurer une mise en page appropriée.

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"; 
    } 
}