Horizontal orientation in Repeater control

问题:

I have a Repeater control used to display uploaded images.

How can I show the images in the repeater horizontally? How can i give the caption to the bottom of picture in this?

回答1:

assuming you have some code like this:

<asp:repeater ...>

</asp:repeater>

just inject "<itemtemplate>" with some html code with the look and feel you want to. nothing special about showing horizontal or vertical it just depends on what html tags you use inside item templates.

回答2:

If you don't especially need a Repeater to do this, you can use a DataList instead and set the RepeatDirection="Horizontal"

回答3:

how to display horizontal line after each row

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

回答4:

You can build your ItemTemplate like:

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

where the .floating class of the div is:

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

I usually put a div for clear after a sequence of floating element, to reset the state of box model.

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

回答5:

Depends on what you are using to display, i.e. if your pictures are in a div put float:left; on it, or use the DataList.

回答6:

Like @numenor said in this other answer, it's just a matter of what html you use. Here, an example of how to acomplish what you need using html tables.

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

Note that the width is handled with a server side property TotalWidth that calculates the total width needed based on, of course, the count of items repeater will display. Creating a CSS class to define the width of each item is also recomended to ensure proper layout.

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