如何实现页面加载时自动展示wwwroot目录下MIDI文件的表格列表？

问题描述 #

我搭建了一个文件上传系统，上传的MIDI文件会被复制到wwwroot目录。目前需要点击按钮才能加载并展示目录中的MIDI文件表格列表，希望修改代码实现页面加载时自动完成这个操作。

现有代码如下：

后端C#代码 #

public void loadMidiFiles()
{
    var files = Directory.GetFiles(path);
    foreach (var file in files)
    {
        filesList.Add(Path.GetFileName(file));
    }
}

其中path指向wwwroot目录

前端HTML代码 #

<button class="btn btn-primary" @onclick="loadMidiFiles">Load</button>
<table>
    @foreach (string file in filesList)
    {
        <tr>
            <th>@file</th>
        </tr>  
    }
</table>

解决方案 #

在Blazor框架中，可通过组件生命周期方法实现页面加载时自动执行文件加载逻辑，具体步骤如下：

1. 利用组件初始化生命周期方法触发加载 #

在组件的代码部分，重写OnInitialized（同步场景）或OnInitializedAsync（异步场景）生命周期方法，直接调用loadMidiFiles：

protected override void OnInitialized()
{
    loadMidiFiles();
    base.OnInitialized();
}

如果后续loadMidiFiles需要改为异步操作（比如异步读取文件），建议使用异步生命周期方法：

protected override async Task OnInitializedAsync()
{
    loadMidiFiles();
    await base.OnInitializedAsync();
}

2. 调整前端代码 #

移除手动触发的按钮，直接保留表格展示逻辑，同时建议将表头标签<th>改为普通单元格标签<td>（语义更准确）：

<table>
    @foreach (string file in filesList)
    {
        <tr>
            <td>@file</td>
        </tr>  
    }
</table>

3. 优化文件加载方法（可选） #

为避免组件重复初始化时列表重复添加文件，可在加载前清空列表：

public void loadMidiFiles()
{
    filesList.Clear();
    var files = Directory.GetFiles(path);
    foreach (var file in files)
    {
        filesList.Add(Path.GetFileName(file));
    }
}

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