ASP.Net ListView 按数据字段分组？

Question

我使用 asp.net listview 控件来显示详细信息。每个项目都有组详细信息。出于演示目的，组是硬编码的。

我想显示如下所示的 ListView



现在，我有这个



代码:

    <asp:ListView ID="HyperLinkListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
    <LayoutTemplate>
        <section class="quick-links">
            <div class="row">
                <div class="dfwp-column" style="width: 100%">
                    <div class="slm-layout-main groupmarker">
                        <ul class="dfwp-list">
                            <asp:PlaceHolder ID="groupContainer" runat="server" />
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </LayoutTemplate>
    <GroupTemplate>
        <span>Group</span>
        <asp:PlaceHolder ID="itemContainer" runat="server" />
    </GroupTemplate>
    <ItemTemplate>
        <li>
            <div class="item">
                <div class="link-item">
                    <asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# this.LinkToPlay((((SPListItem)Container.DataItem)["VideoFileName"]).ToString()) %>' Text='<%# Eval("Title") %>' runat="server" />
                    </a>
                </div>
            </div>
        </li>
    </ItemTemplate>
    <EmptyDataTemplate>
        <span>No data was returned.</span>
    </EmptyDataTemplate>
</asp:ListView>

我如何实现这一目标？

Answer 1

对于灵活的解决方案，您可以使用嵌套 ListView


您需要更新 HTML 和 CSS 以获得所需的外观。

ASPX 代码

<asp:ListView ID="GroupsListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="groupContainer" OnItemDataBound="GroupsListView_ItemDataBound">
    <LayoutTemplate>
        <section class="quick-links">
            <div class="row">
                <div class="dfwp-column" style="width: 100%">
                    <div class="slm-layout-main groupmarker">
                        <asp:PlaceHolder ID="groupContainer" runat="server" />
                    </div>
                </div>
            </div>
        </section>
    </LayoutTemplate>
    <ItemTemplate>
        <ul class="dfwp-list">
            <li><%# Eval("Title") %></li>
            <div>
                <asp:ListView runat="server" ID="ItemsListView" ItemPlaceholderID="itemContainer">
                    <LayoutTemplate>
                        <section class="quick-links">
                            <div class="row">
                                <div class="dfwp-column" style="width: 100%">
                                    <div class="slm-layout-main groupmarker">
                                        <ul class="dfwp-list">
                                            <asp:PlaceHolder ID="itemContainer" runat="server" />
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li>
                            <div class="item">
                                <div class="link-item">
                                    <asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' runat="server" />
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ItemTemplate>
                </asp:ListView>
            </div>
        </ul>
    </ItemTemplate>
    <EmptyDataTemplate>
        <span>No data was returned.</span>
    </EmptyDataTemplate>
</asp:ListView>

在后面的代码中需要绑定(bind)子 ListView在父 ItemDataBound事件。

protected void GroupsListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    ListView itemsListView = (ListView)e.Item.FindControl("ItemsListView");
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {

        itemsListView.DataSource = ((Group)e.Item.DataItem).Items;
        itemsListView.DataBind();
    }
}