Blazor Server实现文本文件转可编辑表格并覆盖原文件的方案咨询

1. 定义数据模型 #

先创建强类型模型来存储每行表格数据，方便后续绑定与操作：

public class TrackData
{
    public int Tempo { get; set; }
    public int Length { get; set; }
    public int Secs { get; set; }
}

2. 重构后端逻辑 #

修改后端代码，拆分文件头部与数据行，实现正确的读取和保存逻辑：

@code {
    // 存储文件头部内容（TEXT00到DATA行）
    private List<string> _fileHeader = new List<string>();
    // 存储表格数据列表
    private List<TrackData> _trackDataList = new List<TrackData>();
    // 替换为你的实际文件路径
    private readonly string _filePath = @"你的文件路径";

    void OpenFile()
    {
        // 清空原有数据
        _fileHeader.Clear();
        _trackDataList.Clear();

        // 读取文件所有行
        var allLines = File.ReadAllLines(_filePath);
        bool isDataSection = false;

        foreach (var line in allLines)
        {
            if (isDataSection)
            {
                // 拆分DATA行后的逗号分隔数据
                var parts = line.Split(',');
                if (parts.Length == 3 && 
                    int.TryParse(parts[0], out int tempo) &&
                    int.TryParse(parts[1], out int length) &&
                    int.TryParse(parts[2], out int secs))
                {
                    _trackDataList.Add(new TrackData
                    {
                        Tempo = tempo,
                        Length = length,
                        Secs = secs
                    });
                }
            }
            else
            {
                _fileHeader.Add(line);
                // 识别DATA行，切换到数据段处理模式
                if (line.Equals("DATA", StringComparison.OrdinalIgnoreCase))
                {
                    isDataSection = true;
                }
            }
        }
    }

    void SaveFile()
    {
        // 拼接头部内容与修改后的数据
        var outputLines = new List<string>(_fileHeader);
        foreach (var data in _trackDataList)
        {
            outputLines.Add($"{data.Tempo},{data.Length},{data.Secs}");
        }

        // 写入文件覆盖原内容
        File.WriteAllLines(_filePath, outputLines);
    }
}

3. 修改前端表格代码 #

用循环渲染数据，使用双向绑定输入框替代contenteditable，适配Blazor数据绑定逻辑：

<button @onclick="OpenFile">Open file</button> 
<div class="table-wrapper-scroll-y my-custom-scrollbar">
    <table class="table table-bordered table-striped mb-0">
        <thead class="bg-light">
            <tr>
                <th colspan="3">Title: @(_fileHeader.Count > 1 ? _fileHeader[1] : "")</th>
            </tr>
            <tr>
                <th>Tempo</th>
                <th>Length</th>
                <th>Secs</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in _trackDataList)
            {
                <tr>
                    <td><input type="number" @bind="item.Tempo" class="form-control" /></td>
                    <td><input type="number" @bind="item.Length" class="form-control" /></td>
                    <td><input type="number" @bind="item.Secs" class="form-control" /></td>
                </tr>
            }
        </tbody>
    </table>
</div>
<button @onclick="SaveFile">Save file</button>

核心改进说明 #

• 数据拆分：通过逐行读取文件，识别DATA段后拆分逗号分隔值，转换成强类型列表，确保数据准确对应表格列。
• 双向绑定：使用Blazor的@bind指令实现输入框与数据的双向同步，修改内容时自动更新内存中的数据，解决保存失效问题。
• 格式保留：单独存储文件头部内容，保存时重新拼接头部与修改后的数据，保证原文件结构不变。

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