在Blazor中构建文件夹树

目录

介绍

从后端开始

获取所有文件夹/组信息的递归方法

使用组件在前端工作

GroupTree 组件

GroupItem组件

由于Blazor是一项相对较新的技术，因此可能很难找到可以在其他框架中找到的新的通用功能。这就是递归文件夹树的情况，我只能在“将我的包添加到您的项目”解决方案中找到它。本文的想法是分享解决方案的前端和后端，以及构建文件夹树所需的全部代码。

首先，我使用了一个名为“Group”的类，它将是“Folder”（如果你愿意，你可以称它为“Folder”）。这是一个简单而常见的类。唯一明显的区别是它有一个“ParentGroupId”整数属性来引用自己（是的，组中的组！），这对于创建我们需要的“文件夹中的文件夹”效果很重要。

public class Group
{
    public string Name { get; set; }
    public string? Description { get; set; }
    public int? ParentGroupId { get; set; }

    public Group ParentGroup { get; set; }
    public virtual List SubGroups { get; set; }
}

您可以将其存储在SQL Server、MySQL等中。我不会介绍如何使用SQL Server或创建表。我假设您已经可以将该类保存在表中并检索信息。

在您的存储库/控制器/无论您使用什么，您都需要创建一个方法来递归地获取所有组/文件夹。就我而言，我使用了我公司的一个名为Sparc的框架，它可以实现所有这些功能。最后，我将发布一个链接，您可以在其中获取更多信息。这种方法可以让您在组内无限地拥有组（无论您有多少组）。您可以在下面找到代码。

public async Task x.ParentGroupId == null).ToList();
    
    return allGroups;
}

private List LoadSubgroups(List allGroups, Group? parentGroup)
{
    var groups = allGroups.Where(x => x.ParentGroupId == parentGroup?.Id).ToList();

    foreach (var group in groups)
        group.SubGroups = LoadSubgroups(allGroups, group);

    return groups;
}

您会注意到GetGroups()方法调用LoadSubgroups()方法，并且LoadSubgroups()调用本身！这个想法是该LoadSubgroups()方法递归地调用自身，直到有要加载的组。

我们将面临与后端相同的挑战：递归！在这种情况下，我们需要使用Blazor组件来创建递归效果，以便为将要显示的每个新组/文件夹创建新的HTML元素。我假设您已经可以从API获取组/文件夹信息。

首先要做的事情：我们需要创建GroupTree/FolderTree组件：

    

        @foreach (var group in Groups)
        {
            
        }
    


@code {
    [Parameter] public List Groups { get; set; }
}

您会注意到有一个未定义的HTML元素：元素！这将是另一个实际拥有组的组件（子组件）。

    

        @if (Group.SubGroups.Any())
            {
                @if (Group.IsExpanded)
                {
                    expand_less
                }
                else
                {
                    expand_less
                }
            }
        
                 @(allEntriesSelected ? "check_box" : "check_box_outline_blank")
        

            folder
            
@Group.Name
        
    

    @if (Group.SubGroups.Any() && Group.IsExpanded)
    {
        

        @foreach (var subGroup in Group.SubGroups)
        {
            
        }
        
    }


@code {
    [Parameter] public GetGroupsResponse Group { get; set; }
    public bool allEntriesSelected { get; set; }

    async Task ToggleGroup()
    {
        Group.IsExpanded = !Group.IsExpanded;
    }
}

就是这样！这就是使用Blazor创建文件夹/树解决方案所需的全部内容。你现在唯一需要做的就是在页面上调用你想要使用的GroupTree组件，像这样：

https://www.codeproject.com/Tips/5324755/Building-a-Folder-Tree-in-Blazor