在Blazor中构建文件夹树

最新推荐文章于 2024-06-18 08:00:00 发布

寒冰屋

最新推荐文章于 2024-06-18 08:00:00 发布

阅读量713

点赞数

分类专栏： ASP.NET CORE 文章标签： Blazor grouptree

原文链接：https://www.codeproject.com/Tips/5324755/Building-a-Folder-Tree-in-Blazor

版权

ASP.NET CORE 专栏收录该内容

1080 篇文章 54 订阅

订阅专栏

介绍

由于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<Group> SubGroups { get; set; }
}

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

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

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

public async Task<List<Group> GetGroups()
{
    // Get all groups from DB to save all the extra database calls
    var allGroups = await GroupRepository
        .Query
        .ToListAsync();

    // Start recursive function with the top of the tree
    LoadSubgroups(allGroups, null);

    allGroups = allGroups.Where(x => x.ParentGroupId == null).ToList();
    
    return allGroups;
}

private List<Group> LoadSubgroups(List<Group> 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 组件

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

<div class="folder-tree-wrapper">
    <ul class="folder-tree">
        @foreach (var group in Groups)
        {
            <GroupItem Group="group" />
        }
    </ul>
</div>

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

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

GroupItem组件

<li>
    <div class="item-container">
        @if (Group.SubGroups.Any())
            {
                @if (Group.IsExpanded)
                {
                    <i class="material-icons expand-more" 
                     style="transform: rotate(180deg)" 
                     @onclick="ToggleGroup">expand_less</i>
                }
                else
                {
                    <i class="material-icons expand-more" 
                     style="transform: rotate(90deg)" 
                     @onclick="ToggleGroup">expand_less</i>
                }
            }
        <i class="material-icons" style="cursor: pointer; 
                 @(Group.SubGroups.Any() ? "" : "padding-left: 18px")">
                 @(allEntriesSelected ? "check_box" : "check_box_outline_blank")</i>
        <div style="display: inline-block" @onclick="ToggleGroup">
            <i class="material-icons">folder</i>
            <div style="display: inline-block">@Group.Name</div>
        </div>
    </div>

    @if (Group.SubGroups.Any() && Group.IsExpanded)
    {
        <ul>
        @foreach (var subGroup in Group.SubGroups)
        {
            <GroupItem Group="subGroup"/>
        }
        </ul>
    }
</li>

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

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

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