Orientacja pozioma w sterowaniu Repeatera

Question

Mam kontrolkę Repeater używaną do wyświetlania przesłanych obrazów.

Jak mogę wyświetlać obrazy w repeterze w poziomie? Jak mogę umieścić podpis pod spodem obrazu?

Answer 1

zakładając, że mają jakiś kod tak:

<asp:repeater ...> 

</asp:repeater> 

prostu wstrzyknąć "<itemtemplate>" z kodem html z wyglądu chcesz. nic specjalnego, jeśli chodzi o pokazywanie w pionie lub poziomie, zależy tylko od tego, jakie znaczniki html używasz w szablonach przedmiotów.

Answer 2

Jeśli nie szczególnie potrzebują Repeater to zrobić, można użyć zamiast DataList i ustawić RepeatDirection="Horizontal"

Answer 3

Zależy co używasz do wyświetlania, czyli jeśli zdjęcia są w div umieścić float:left; na nim lub użyj DataList.

Answer 4

Możesz budować swój ItemTemplate jak:

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

gdzie klasa .floating div jest:

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

I zazwyczaj umieścić div na jasne po sekwencji elementów pływających, aby zresetować stan modelu skrzynki.

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

Answer 5

jak wyświetlać linię poziomą po każdym wierszu

<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

Jak @numenor powiedział in this other answer, to tylko kwestia tego, co html użyć. Oto przykład, jak osiągnąć to, czego potrzebujesz, używając tabel 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> 

Należy zauważyć, że szerokość jest obsługiwany z nieruchomości po stronie serwera TotalWidth który oblicza szerokość całkowita potrzebna na podstawie, oczywiście, liczba przedmiotów repeater pokaże. Dla zapewnienia odpowiedniego układu zalecane jest również utworzenie klasy CSS w celu określenia szerokości każdego elementu.

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