如何用Blazor实现含多类型对象的文件资源管理器表格视图

1. 定义层级化数据模型 #

先抽象公共属性到基类，再派生文件夹和文件类：

// 基础文件系统项基类（公共属性）
public class BaseFileSystemItem
{
    public string Id { get; set; }
    public string Name { get; set; }
    public DateTime CreatedTime { get; set; }
    public string FullPath { get; set; }
}

// 文件夹类（扩展专属属性）
public class Folder : BaseFileSystemItem
{
    public int ChildItemCount { get; set; } // 子项数量
}

// 文件类（扩展专属属性）
public class File : BaseFileSystemItem
{
    public long SizeBytes { get; set; } // 文件大小
    public string FileExtension { get; set; } // 文件扩展名
}

2. 合并API数据 #

调用两个API后，将结果转换为基类集合并排序（推荐文件夹优先）：

// 假设API服务方法
public async Task<List<BaseFileSystemItem>> GetCombinedItems(string parentPath)
{
    var folders = await _apiService.GetFolders(parentPath);
    var files = await _apiService.GetFiles(parentPath);
    
    var combined = new List<BaseFileSystemItem>();
    combined.AddRange(folders);
    combined.AddRange(files);
    
    // 排序：文件夹在前，再按名称排序
    return combined.OrderByDescending(item => item is Folder)
                   .ThenBy(item => item.Name)
                   .ToList();
}

3. MudBlazor表格的条件渲染 #

在MudTable中通过类型判断，动态渲染专属属性和UI元素：

<MudTable Items="@combinedItems" Hover="true" Striped="true">
    <HeaderContent>
        <MudTh>名称</MudTh>
        <MudTh>类型</MudTh>
        <MudTh>大小/子项数</MudTh>
        <MudTh>创建时间</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>
            <!-- 差异化图标 -->
            @if(context is Folder)
            {
                <MudIcon Icon="@Icons.Material.Filled.Folder" Color="Color.Info" />
            }
            else
            {
                <MudIcon Icon="@Icons.Material.Filled.Description" Color="Color.Default" />
            }
            <span class="ml-2">@context.Name</span>
        </MudTd>
        <MudTd>
            @(context is Folder ? "文件夹" : $"文件 (.{((File)context).FileExtension})")
        </MudTd>
        <MudTd>
            @if(context is Folder folder)
            {
                <span>@folder.ChildItemCount 个项目</span>
            }
            else if(context is File file)
            {
                <span>@FormatFileSize(file.SizeBytes)</span>
            }
        </MudTd>
        <MudTd>@context.CreatedTime.ToString("yyyy-MM-dd HH:mm")</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private List<BaseFileSystemItem> combinedItems = new();
    
    // 格式化文件大小的辅助方法
    private string FormatFileSize(long bytes)
    {
        if(bytes < 1024) return $"{bytes} B";
        if(bytes < 1024*1024) return $"{bytes/1024:F1} KB";
        return $"{bytes/(1024*1024):F1} MB";
    }
}

4. 可选：使用接口替代基类 #

如果更喜欢接口模式，可以定义IFileSystemItem接口，让Folder和File实现它，逻辑和上面一致，只是基类换为接口：

public interface IFileSystemItem
{
    string Id { get; set; }
    string Name { get; set; }
    DateTime CreatedTime { get; set; }
    string FullPath { get; set; }
}

这种模式的核心是统一集合+条件渲染，既解决了不同类型数据的合并展示问题，又能灵活呈现各自的专属属性，完全适配MudBlazor的组件特性。

内容的提问来源于stack exchange，提问作者xaemy