MVC应用中网页修改CSV后更新数据未写入数据库的问题

核心问题：当前流程在文件上传时直接将原始CSV数据写入数据库，而网页修改后的数据仅在JS中生成了updatedTableData，但从未发送到后端接口；后端也没有接收前端更新数据的逻辑，导致数据库始终存储原始数据。

以下是具体修改步骤：

1. 调整后端逻辑 #

（1）修改Upload方法，移除直接入库代码 #

删除Upload方法中上传文件后立刻写入数据库的代码，只保留文件解析和模型返回逻辑：

// 移除这行代码，不再在上传时直接存库
// await SaveDataToDatabase(dataTable);

（2）新增接收更新数据的接口 #

在ImportController中添加专门处理前端修改后数据的POST接口：

[HttpPost]
public async Task<IActionResult> ImportUpdatedData([FromBody] List<List<string>> updatedTableData)
{
    if (updatedTableData == null || updatedTableData.Count <= 1)
    {
        return Json(new { success = false, message = "未获取到有效数据" });
    }

    // 保持原有的列映射规则
    var columnMapping = new Dictionary<string, string>
    {
        { "Employee ID", "EmployeeID" },
        { "Full Name", "FullName" },
        { "Job Title", "JobTitle" },
        { "Department", "Department" },
        { "Business Unit", "BusinessUnit" },
        { "Gender", "Gender" },
        { "Ethnicity", "Ethnicity" },
        { "Age", "Age" },
        { "Hire Date", "HireDate" },
        { "Country", "Country" },
        { "City", "City" }
    };

    var dataTable = CreateDataTable(columnMapping.Values);
    var headerRow = updatedTableData[0]; // 获取CSV表头
    var dataRows = updatedTableData.Skip(1); // 跳过表头，处理数据行

    foreach (var row in dataRows)
    {
        if (row.Count == columnMapping.Count)
        {
            var dataRow = dataTable.NewRow();
            for (var i = 0; i < row.Count; i++)
            {
                // 根据表头匹配数据库列名
                if (columnMapping.TryGetValue(headerRow[i], out var dbColumnName))
                {
                    dataRow[dbColumnName] = row[i];
                }
            }
            dataTable.Rows.Add(dataRow);
        }
    }

    try
    {
        await SaveDataToDatabase(dataTable);
        return Json(new { success = true });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message });
    }
}

2. 修改前端代码 #

（1）添加防伪造令牌 #

在页面表单下方添加ASP.NET防伪造令牌，避免AJAX请求被拦截：

@Html.AntiForgeryToken()

（2）修复文件预览逻辑 #

原来的文件预览会把CSV文本直接插入DOM，导致格式混乱。修改为生成与后端一致的可编辑表格：

fileInput.addEventListener('change', function () {
    var file = fileInput.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var csvContent = e.target.result;
            // 解析CSV生成可编辑表格
            var rows = csvContent.split(/\r?\n/).filter(row => row.trim() !== '');
            var tableHtml = '<table id="editableTable" class="table table-bordered">';
            rows.forEach(row => {
                tableHtml += '<tr>';
                row.split(',').forEach(cell => {
                    tableHtml += `<td contenteditable="true">${cell}</td>`;
                });
                tableHtml += '</tr>';
            });
            tableHtml += '</table>';
            document.getElementById('fileContents').innerHTML = tableHtml;
            
            // 重新绑定表格输入事件
            editableTable = document.getElementById('editableTable');
            editableTable.addEventListener('input', function () {
                importBtn.disabled = false;
            });

            importBtn.disabled = false;
            clearBtn.disabled = false;
            fileNameElement.textContent = file.name;
        };
        reader.readAsText(file);
    } else {
        fileNameElement.textContent = '';
        document.getElementById('fileContents').innerHTML = '';
        importBtn.disabled = true;
        clearBtn.disabled = true;
    }
});

（3）修改Import按钮点击事件，发送更新数据 #

将原来仅打印日志的逻辑改为AJAX请求，把修改后的数据发送到后端新增接口：

importBtn.addEventListener('click', function () {
    var updatedTableData = [];
    var rows = editableTable.getElementsByTagName('tr');
    for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].getElementsByTagName('td');
        var rowData = [];
        for (var j = 0; j < cells.length; j++) {
            rowData.push(cells[j].innerText);
            cells[j].setAttribute('data-original-value', cells[j].innerText);
        }
        updatedTableData.push(rowData);
    }

    // 发送更新后的数据到后端
    fetch('/Import/ImportUpdatedData', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify(updatedTableData)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            alert('数据已成功导入数据库！');
        } else {
            alert(`导入失败：${result.message}`);
        }
    })
    .catch(error => {
        console.error('请求出错:', error);
        alert('导入过程中发生错误，请查看控制台日志');
    });
});

3. 验证ImportModel #

确保你的ImportModel包含必要属性：

public class ImportModel
{
    public IFormFile File { get; set; }
    public string FileName { get; set; }
    public string FileContent { get; set; }
}

修改后流程 #

1. 用户上传CSV文件 → 前端/后端解析并生成可编辑表格展示
2. 用户修改表格数据 → 点击Import按钮
3. 前端收集修改后的数据，通过AJAX发送到后端ImportUpdatedData接口
4. 后端解析数据，生成DataTable并写入数据库

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