为什么中继器每行不重复 3 个图像而是 1 个？答案

【问题标题】：Why doesn't repeater repeat 3 images per row but 1 ?为什么中继器每行不重复 3 个图像而是 1 个？
【发布时间】：2018-02-18 02:19:40
【问题描述】：

我已使用 asp 的转发器每行重复 3 张图像，但每行仅显示 1 张图像。为什么？

我已经尝试了所有可能的方法，但没有效果。

<asp:Repeater ID="rptrImages" runat="server">
                <ItemTemplate>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
                            </div>
                        </div>                  
                    </div>
                </ItemTemplate>
            </asp:Repeater>

【问题讨论】：

为什么每行显示 3 个？您每次都在创建一个新的row。

标签： asp.net c#-4.0 webforms repeater asp.net-controls

【解决方案1】：

转发器中的<ItemTemplate> 是为数据源中的每个对象重复的内容。您需要做的就是重构您的模板：

<div class="row">
    <asp:Repeater ID="rptrImages" runat="server">
        <ItemTemplate>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
                </div>
            </div>                  
        </ItemTemplate>
    </asp:Repeater>
</div>

使用上述方法，<div class="col-md-4"> 将针对数据源中的每个项目重复，并且全部包含在单个 <div class="row"> 中，由于 Bootstrap 列的性质，它们将自动换行到同一 div 内的另一行三个水平放置。如果您需要隐藏<div class="row">，如果转发器不包含任何项目，请尝试以下操作：

<asp:Repeater ID="rptrImages" runat="server">
    <HeaderTemplate>
        <div class="row">
    </HeaderTemplate>
    <ItemTemplate>
        <div class="col-md-4">
            <div class="thumbnail">
                <img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
            </div>
        </div>                  
    </ItemTemplate>
    <FooterTemplate>
        </div>
    </FooterTemplate>
</asp:Repeater>

然后在你的代码隐藏时绑定转发器：

rptrImages.DataSource = myDataSourceVar;
rptrImages.DataBind();
rptrImages.Visible = (rptrImages.Items.Count > 0);

因为<div class="row"> 位于HeaderTemplate 和FooterTemplate 内，如果将Visible 设置为false，它将不会被渲染。

【讨论】：

【解决方案2】：

您必须为您的图片添加宽度和高度

<div class="row" style="width: 100%;">
    <div class="col-sm-12">
        <asp:Repeater ID="RepeaterImages" runat="server" Visible="true">
            <ItemTemplate>
                <asp:Image ID="imageSlide" CssClass="MyGridGallery" ImageUrl='<%# Container.DataItem %>' runat="server" Width="300px" Height="200px" />

            </ItemTemplate>
        </asp:Repeater>
    </div>

    .MyGridGallery {
        padding: 5px;
    }

</style>

【讨论】：