C#实现DataList里面嵌套DataList的折叠菜单

C#实现DataList里面嵌套DataList的折叠菜单攻略

1. 准备工作

在开始实现之前，确保你已经安装了适当的开发环境，比如Visual Studio，并且已经创建了一个C#项目。

2. 创建数据模型

首先，我们需要创建一个数据模型来表示菜单项。假设我们的菜单项有以下属性：Id、Name、ParentId和Children。Id是菜单项的唯一标识符，Name是菜单项的名称，ParentId是父菜单项的Id，Children是一个包含子菜单项的列表。

public class MenuItem
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ParentId { get; set; }
    public List<MenuItem> Children { get; set; }
}

3. 准备数据

接下来，我们需要准备一些示例数据来填充我们的菜单。这里我们创建一个包含多个菜单项的列表，并设置它们的父子关系。

List<MenuItem> menuItems = new List<MenuItem>
{
    new MenuItem { Id = 1, Name = \"Menu 1\", ParentId = 0, Children = new List<MenuItem>() },
    new MenuItem { Id = 2, Name = \"Menu 2\", ParentId = 0, Children = new List<MenuItem>() },
    new MenuItem { Id = 3, Name = \"Menu 1.1\", ParentId = 1, Children = new List<MenuItem>() },
    new MenuItem { Id = 4, Name = \"Menu 1.2\", ParentId = 1, Children = new List<MenuItem>() },
    new MenuItem { Id = 5, Name = \"Menu 2.1\", ParentId = 2, Children = new List<MenuItem>() },
    new MenuItem { Id = 6, Name = \"Menu 2.2\", ParentId = 2, Children = new List<MenuItem>() },
    new MenuItem { Id = 7, Name = \"Menu 1.1.1\", ParentId = 3, Children = new List<MenuItem>() },
    new MenuItem { Id = 8, Name = \"Menu 1.1.2\", ParentId = 3, Children = new List<MenuItem>() }
};

4. 构建折叠菜单

现在我们可以开始构建折叠菜单了。我们可以使用递归的方式来遍历菜单项，并根据父子关系来构建嵌套的DataList。

public void BuildMenu(List<MenuItem> menuItems, int parentId)
{
    foreach (var menuItem in menuItems.Where(m => m.ParentId == parentId))
    {
        // 构建菜单项的HTML代码
        string menuItemHtml = $\"<li>{menuItem.Name}</li>\";

        // 如果菜单项有子菜单，则递归构建子菜单
        if (menuItem.Children.Any())
        {
            menuItemHtml += \"<ul>\";
            BuildMenu(menuItems, menuItem.Id);
            menuItemHtml += \"</ul>\";
        }

        // 将菜单项的HTML代码添加到父菜单项的HTML代码中
        // 这里可以根据需要将HTML代码添加到页面中的某个元素中
        // 例如：menuContainer.InnerHtml += menuItemHtml;
        Console.WriteLine(menuItemHtml);
    }
}

5. 调用构建方法

最后，我们在程序的入口点调用构建方法，并传入菜单项列表和根菜单项的父Id（通常为0）。

static void Main(string[] args)
{
    var menuBuilder = new MenuBuilder();
    menuBuilder.BuildMenu(menuItems, 0);
}

示例说明

假设我们有以下菜单项：

List<MenuItem> menuItems = new List<MenuItem>
{
    new MenuItem { Id = 1, Name = \"Menu 1\", ParentId = 0, Children = new List<MenuItem>() },
    new MenuItem { Id = 2, Name = \"Menu 2\", ParentId = 0, Children = new List<MenuItem>() },
    new MenuItem { Id = 3, Name = \"Menu 1.1\", ParentId = 1, Children = new List<MenuItem>() },
    new MenuItem { Id = 4, Name = \"Menu 1.2\", ParentId = 1, Children = new List<MenuItem>() },
    new MenuItem { Id = 5, Name = \"Menu 2.1\", ParentId = 2, Children = new List<MenuItem>() },
    new MenuItem { Id = 6, Name = \"Menu 2.2\", ParentId = 2, Children = new List<MenuItem>() },
    new MenuItem { Id = 7, Name = \"Menu 1.1.1\", ParentId = 3, Children = new List<MenuItem>() },
    new MenuItem { Id = 8, Name = \"Menu 1.1.2\", ParentId = 3, Children = new List<MenuItem>() }
};

调用构建方法：

var menuBuilder = new MenuBuilder();
menuBuilder.BuildMenu(menuItems, 0);

输出结果：

<ul>
    <li>Menu 1</li>
    <ul>
        <li>Menu 1.1</li>
        <ul>
            <li>Menu 1.1.1</li>
            <li>Menu 1.1.2</li>
        </ul>
        <li>Menu 1.2</li>
    </ul>
    <li>Menu 2</li>
    <ul>
        <li>Menu 2.1</li>
        <li>Menu 2.2</li>
    </ul>
</ul>

这样，我们就成功地实现了在DataList里面嵌套DataList的折叠菜单。你可以根据需要将生成的HTML代码添加到页面中的某个元素中，以实现具体的展示效果。