Question

我正在使用vb asp.net。

我怎么能每3个项目创建一个新的div-row？所以3个项目将在一个div行中，接下来的3个项目将在下一行

    <asp:Repeater ID="repeaterGrid" runat="server">
        <HeaderTemplate>
        </HeaderTemplate>
        <ItemTemplate>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <asp:Image ID="Image1" runat="server" src='<%# Eval("Picture_Path") %>'/>
                    <asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Name") %>' />
                    <asp:Label ID="Label4" runat="server" Text='<%# Eval("Price") %>' />
                </div>
            </div>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
    </asp:Repeater>

Answer 1

或者，可以通过DataList实现。

<asp:DataList ID="MyDataList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
<ItemTemplate>
    <asp:Image ID="Image1" runat="server" src='<%# Eval("Picture_Path") %>'/>
    <asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Name") %>' />
    <asp:Label ID="Label4" runat="server" Text='<%# Eval("Price") %>' />
</ItemTemplate>
</asp:DataList>

Answer 2

您可以使用以下方法以动态方式将每3个项目包装在一个div中。

首先，使用以下标记订阅转发器的PreRender事件。

<asp:Repeater ID="repeaterGrid" runat="server" OnPreRender="repeaterGrid_PreRender">

然后，在上面的PreRender事件中编写VB.Net代码，动态创建一个div控件，并将每3个转发器项添加到动态创建的div控件中。您可以阅读详细解释每一步的注释。

Protected Sub repeaterGrid_PreRender(ByVal sender As Object, ByVal e As EventArgs)

Dim div As HtmlGenericControl = Nothing
Dim divCounter As Integer = 0
For Each item As RepeaterItem In repeaterGrid.Items

'if item is first item in a TRIPLET of repeater items
'starting from first item having index of 0
    If item.ItemIndex Mod 3 = 0 Then
        div = New HtmlGenericControl("div")

        'below If is not required as its only doing alternating div coloring
        If divCounter Mod 2 = 0 Then
            'even div back color
            div.Style.Add("background-color", "whitesmoke")
        Else
            'odd div back color
            div.Style.Add("background-color", "lightyellow")
        End If

        divCounter = divCounter + 1

        'format is div_{startingItemIndex}_{endingItemIndex}
        div.ID = String.Format("div_{0}_{1}", item.ItemIndex, item.ItemIndex + 2)

        'add repeater item to this newly created div
        div.Controls.Add(item)

       'add this div to the repeater control
        repeaterGrid.Controls.Add(div)
    Else
         'add repeater item to this newly created div
        div.Controls.Add(item)
    End If
Next

End Sub

Answer 3

这可以通过一些内联三元运算符来完成。使用模数检查ItemIndex是0还是2并相应地创建<div>。如果总项目不能被三个分割，那么你不需要在Repeater之外使用它。

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>

        <%# Container.ItemIndex %3 == 0 ? "<div class=\"col-sm-3\">" : "" %>

        <div><%# Eval("Name") %></div>

        <%# Container.ItemIndex %3 == 2 ? "</div>" : "" %>

    </ItemTemplate>
</asp:Repeater>

<%= Repeater1.Items.Count %3 != 0 ? "</div>" : "" %>

<强> VB

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <%# IIf(Container.ItemIndex Mod 3 = 0, "<div class=""col-sm-3"">", "") %>

        <div>xxx</div>

        <%# IIf(Container.ItemIndex Mod 3 = 2, "</div>", "") %>
    </ItemTemplate>
</asp:Repeater>

<%= IIf(Repeater1.Items.Count Mod 3 <> 0, "</div>", "") %>

如何在转发器中创建动态div

3 个答案: