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

Question

我已经使用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>

Answer 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，则不会呈现。

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