用于分层数据源的 ASP .NET 数据 Repeater

• 下载 WebSite3.zip - 425.1 KB

引言

我正在做一个项目，需要实现博客功能。在开始实现评论/回复功能之前，一切都进行得很顺利。我需要将数据以分层方式（自连接）存储在数据库中，但在谷歌上找不到任何控件可以这样显示！因此我使用了 Data Repeater 和几行 JQuery 代码，搞定！！！它比看起来容易。所以我把它做成了可重用的，想和大家分享:)，我做了一个简单的员工-经理页面，其中列出了所有经理下的员工。

背景

此技巧适用于 ASP .NET 开发人员，它不是一个高级主题。我使用了 EntityDataSource，但你可以使用 Repeater 接受的任何其他数据源。我假设你至少以前使用过 Entity Framework、Data Repeater 和 JQuery。如果没有，你可以参考

http://msdn.microsoft.com/en-us/library/bb498210.aspx

http://www.asp.net/web-forms/tutorials/getting-started-with-ef/the-entity-framework-and-aspnet-getting-started-part-1

我的数据

在数据库中，该表看起来像这样

数据模型看起来像这样

我的标记

<%@ Page Title="Contact" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="WebApplication2.Contact" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <hgroup class="title">
        <h1><%: Title %>.</h1>
        <h2>Your contact page.</h2>
    </hgroup>

    <section class="contact">
        <div class="employees-container">
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="enttdsEmployee">
                <HeaderTemplate>
                    <ul class="employee-data-listing">
                </HeaderTemplate>
                <ItemTemplate>
                    <li class="employee-list-item" data-Id='<%# Eval("Id") %>' data-manager='<%# Eval("Manager") %>'>
                        <ul class="employee-data">
                            <li>
                                <asp:Label ID="lblId" CssClass="primary-key" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
                            </li>
                            <li>
                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                            </li>
                            <li>
                                <asp:Label ID="lblPhone" runat="server" Text='<%# Eval("Phone") %>'></asp:Label>
                            </li>
                            <li>
                                <asp:Label ID="lblTitle" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                            </li>
                            <li>
                                Manages:
                                <ul class="inner-employee">

                                </ul>
                            </li>
                        </ul>
                    </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </div>
        <asp:EntityDataSource ID="enttdsEmployee" runat="server" ConnectionString="name=Hierarchy_Data_TestEntities" DefaultContainerName="Hierarchy_Data_TestEntities" EnableFlattening="False" EntitySetName="Employees"></asp:EntityDataSource>
    </section>
</asp:Content>

如果你现在运行该应用程序，你将得到这个

现在，键是 ItemTemplate 中第一个 <li> 上的属性 data-Id 和 data-manager。这样，使用 JQuery，我们可以获得所有员工的 data-Id 和他/她的经理 data-manager id，以便在下一节中使用。

JQuery

$(".employee-list-item").each(function () {
    var id = $(this).attr("data-Id");
    $(".employee-list-item[data-manager='" + id + "']")
        .appendTo(".employee-list-item[data-Id='" + id + "'] .inner-employee");
}) 

上面的代码所做的是循环遍历所有代表员工的 <li>（".employee-list-item"），并将它们的 Id 从 data-Id 存储在 var id 中，对于每个员工，我们将所有经理 id (data-manager) 等于已存储 id 的员工移动到（内部员工 <ul>）。这是递归完成的，我们最终会得到这个

尝试一下！！

如果您有任何意见/问题，请告诉我。如果您觉得这有帮助，请投赞成票并分享:)。