Orientamento orizzontale nel controllo del ripetitore

Question

Ho un controllo ripetitore utilizzato per visualizzare le immagini caricate.

Come è possibile visualizzare le immagini nel ripetitore in orizzontale? Come posso dare la didascalia in fondo alla foto in questo?

Answer 1

supponendo che hai un po 'di codice come questo:

<asp:repeater ...> 

</asp:repeater> 

solo iniettare "<itemtemplate>" con del codice HTML con il look and feel che si desidera. niente di speciale nella visualizzazione orizzontale o verticale dipende solo da quali tag HTML si utilizzano all'interno dei modelli di elementi.

Answer 2

Se non particolarmente bisogno di un ripetitore per fare questo, è possibile utilizzare un DataList invece e impostare il RepeatDirection="Horizontal"

Answer 3

dipende da ciò che si sta utilizzando per visualizzare, cioè se le foto sono in un div messo float:left; su di esso, o utilizzare la DataList.

Answer 4

si può costruire l'ItemTemplate come:

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

dove la classe .floating del div è:

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

Io di solito mettere un div per una chiara dopo una sequenza di elemento flottante, a ripristinare lo stato del modello di box.

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

Answer 5

Come visualizzare linea orizzontale dopo ogni riga

<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

Come @numenor detto in this other answer, è solo una questione di ciò html che si usa. Ecco un esempio di come realizzare ciò che ti serve usando le tabelle 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> 

Nota che la larghezza è gestita con una proprietà lato server TotalWidth che calcola la larghezza totale necessaria in base, ovviamente, il numero di elementi ripetitore verrà visualizzato. Si consiglia inoltre di creare una classe CSS per definire la larghezza di ciascun elemento per garantire un layout corretto.

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