Question

我有一个Repeater控件用于显示上传的图像。

如何在水平转发器中显示图像？如何将标题添加到图片底部？

Answer 1

假设你有这样的代码：

<asp:repeater ...>

</asp:repeater>

只需使用一些带有您想要的外观和感觉的html代码注入"<itemtemplate>"。显示水平或垂直没什么特别的，这取决于你在项目模板中使用的html标签。

Answer 2

如果您不特别需要Repeater来执行此操作，则可以改为使用DataList并设置RepeatDirection="Horizontal"

Answer 3

如何在每行后显示水平线

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

取决于您使用的内容，即如果您的图片位于div float:left;上，或使用数据列表。

Answer 5

您可以像以下一样构建ItemTemplate：

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

div的.floating类是：

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

我通常在一系列浮动元素后放置一个div来清除，以重置盒子模型的状态。

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

Answer 6

就像@numenor所说in this other answer一样，这只是你使用的HTML的问题。这里是一个如何使用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>

请注意，宽度是使用服务器端属性TotalWidth处理的，该属性根据转发器将显示的项目数计算所需的总宽度。建议使用CSS类来定义每个项目的宽度，以确保正确的布局。

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

Repeater控件中的水平方向

6 个答案: