如何实现Blazor中同名.mp3与.txt文件关联展示的类？

1. 定义关联文件的实体类 #

先创建一个AudioTextPair类来存储一组同名的音频和文本文件，同时拆分出单独的音频、文本文件类管理各自属性：

public class AudioTextPair
{
    // 不含扩展名的基础文件名（作为关联标识）
    public string BaseName { get; set; }
    // 对应MP3文件信息
    public AudioFile Audio { get; set; }
    // 对应TXT文件信息
    public TextFile Text { get; set; }
}

public class AudioFile
{
    public string Name { get; set; }
    public string Url { get; set; }
    public string Path { get; set; }
}

public class TextFile
{
    public string Name { get; set; }
    public string Url { get; set; }
    public string Path { get; set; }
}

2. 修改后端逻辑实现文件关联 #

把原来的textList替换为audioTextPairs列表，初始化时按文件名（不含扩展名）分组，匹配对应的MP3和TXT文件：

@code{
    readonly List<AudioTextPair> audioTextPairs = new();
    readonly string FolderName = "textSoundFiles";

    protected override void OnInitialized()
    {
        var path = $"{env.WebRootPath}\\{FolderName}\\";
        var files = new DirectoryInfo(path).GetFiles();

        // 按无扩展名的文件名分组，把同名的MP3和TXT归为一组
        var groupedFiles = files.GroupBy(file => Path.GetFileNameWithoutExtension(file.Name));

        foreach (var group in groupedFiles)
        {
            var pair = new AudioTextPair { BaseName = group.Key };
            
            // 遍历组内文件，分别赋值给音频或文本属性
            foreach (var file in group)
            {
                if (file.Extension.Equals(".mp3", StringComparison.OrdinalIgnoreCase))
                {
                    pair.Audio = new AudioFile
                    {
                        Name = file.Name,
                        Url = $"/{FolderName}/{file.Name}", // 修正路径，对应实际静态文件目录
                        Path = file.FullName
                    };
                }
                else if (file.Extension.Equals(".txt", StringComparison.OrdinalIgnoreCase))
                {
                    pair.Text = new TextFile
                    {
                        Name = file.Name,
                        Url = $"/{FolderName}/{file.Name}",
                        Path = file.FullName
                    };
                }
            }

            // 只添加至少包含一个文件的组（可根据需求调整）
            if (pair.Audio != null || pair.Text != null)
            {
                audioTextPairs.Add(pair);
            }
        }
    }

    // 保留你的操作方法，注意参数对应修改
    private void PlayAudio(string audioUrl)
    {
        // 你的音频播放逻辑
    }

    private void DeleteAudio(AudioFile audioFile)
    {
        // 你的音频删除逻辑
    }

    private void openTextFile(TextFile textFile)
    {
        // 你的文本打开逻辑
    }

    // 关联类和子文件类定义
    public class AudioTextPair
    {
        public string BaseName { get; set; }
        public AudioFile Audio { get; set; }
        public TextFile Text { get; set; }
    }

    public class AudioFile
    {
        public string Name { get; set; }
        public string Url { get; set; }
        public string Path { get; set; }
    }

    public class TextFile
    {
        public string Name { get; set; }
        public string Url { get; set; }
        public string Path { get; set; }
    }
}

3. 更新前端表格展示关联内容 #

遍历audioTextPairs列表，每行展示一组关联文件的名称，并根据是否存在音频/文本文件显示对应操作按钮：

<table class="table table-striped mb-0">
    <thead>
    <tr>
        <th scope="col">文件组名称</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
        @foreach (var pair in audioTextPairs)
        {
            <tr>
                <td>
                    @pair.BaseName
                </td>
                <td>
                    <!-- 有音频文件才显示播放和删除按钮 -->
                    @if (pair.Audio != null)
                    {
                        <span @onclick="() => PlayAudio(pair.Audio.Url)"
                              class="text-primary oi oi-play-circle me-2" aria-hidden="true" role="button">
                        </span>
                        <span @onclick="() => DeleteAudio(pair.Audio)"
                              class="text-danger oi oi-trash me-2" aria-hidden="true" role="button">
                        </span>
                    }
                    <!-- 有文本文件才显示打开按钮 -->
                    @if (pair.Text != null)
                    {
                        <button @onclick="() => openTextFile(pair.Text)">打开文本</button>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

注意事项 #

• 路径修正：原代码中Url用了/textFiles/，但实际文件存在textSoundFiles目录下，改成/{FolderName}/{file.Name}确保静态文件能正确访问。
• 空值处理：通过@if判断文件是否存在，避免空引用错误，同时只显示对应可用的操作按钮。
• 分组逻辑：使用Path.GetFileNameWithoutExtension确保同名（忽略扩展名大小写）的MP3和TXT被正确关联。

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