ASP.NET MVC5中如何向表插入多行数据及问题排查

我尝试向数据库表插入多行数据，参考相关方案后应用到MVC5项目中，虽然弹出了插入成功的提示弹窗，但数据库表并未接收到插入的数据。我是ASP MVC新手，以下是我的相关代码：

View代码 #

<table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th style="width:150px">Name</th>
            <th style="width:150px">FINAL_STACK</th>
            <th style="width:150px">RAW_DATA</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (Seismic item in ViewBag.seismics)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.FINAL_STACK</td>
                <td>@item.RAW_DATA</td>
                <td><input type="button" value="Remove" onclick="Remove(this)" /></td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="txtFINAL_STACK" /></td>
            <td><input type="text" id="txtRAW_DATA" /></td>
            <td><input type="button" id="btnAdd" value="Add" /></td>
        </tr>
    </tfoot>
</table>
<input type="button" id="btnSave" value="Save All" />

JS代码 #

@section Scripts {
    <script type="text/javascript">
    $("body").on("click", "#btnAdd", function () {
        var txtName = $("#txtName");
        var txtFINAL_STACK = $("#txtFINAL_STACK");
        var txtRAW_DATA = $("#txtRAW_DATA");
        var tBody = $("#tblCustomers > TBODY")[0];
        var row = tBody.insertRow(-1);
        var cell = $(row.insertCell(-1));
        cell.html(txtName.val());
        cell = $(row.insertCell(-1));
        cell.html(txtFINAL_STACK.val());
        cell = $(row.insertCell(-1));
        cell.html(txtRAW_DATA.val());
        cell = $(row.insertCell(-1));
        var btnRemove = $("<input />");
        btnRemove.attr("type", "button");
        btnRemove.attr("onclick", "Remove(this);");
        btnRemove.val("Remove");
        cell.append(btnRemove);
        txtName.val("");
        txtFINAL_STACK.val("");
        txtRAW_DATA.val("");
    });

    function Remove(button) {
        var row = $(button).closest("TR");
        var name = $("TD", row).eq(0).html();
        if (confirm("Do you want to delete: " + name)) {
            var table = $("#tblCustomers")[0];
            table.deleteRow(row[0].rowIndex);
        }
    };

    $("body").on("click", "#btnSave", function () {
        var seismics = new Array();
        $("#tblCustomers TBODY TR").each(function () {
            var row = $(this);
            var seismic = {};
            seismic.Name = row.find("TD").eq(0).html();
            seismic.FINAL_STACK = row.find("TD").eq(1).html();
            seismic.RAW_DATA = row.find("TD").eq(2).html();
            seismics.push(seismic);
        });

        $.ajax({
            type: "POST",
            url: "/Seismic/Insert",
            data: JSON.stringify(seismics),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                alert(r + " record(s) inserted.");
            }
        });
    });
</script>
}

Controller代码 #

public JsonResult Insert(List<Seismic> seismics)
{
    foreach (Seismic seismic in seismics)
    {
        string name = seismic.Name;
        string FINAL_STACK = seismic.FINAL_STACK;
        string RAW_DATA = seismic.RAW_DATA;
    }
    return Json(seismics);
}

Model代码 #

public class Seismic
{
    [Key]
    public int SeismicId { get; set; } = 0;
    [Required]
    public string Name { get; set; } = "";
    public string? PROCESSING { get; set; } = "";
    public string? SPS { get; set; } = "";
    public string? RPS { get; set; } = "";
    public string? XPS { get; set; } = "";
    public string? OBSERVER_LOG_REPORT { get; set; } = "";
    public string? FINAL_STACK { get; set; } = "";
    public string? RAW_DATA { get; set; } = "";
}

核心问题修复 #

你的Insert方法仅读取了参数值，完全没有执行数据库插入操作，这是数据未入库的直接原因。假设你使用Entity Framework，按以下步骤修复：

1. 创建DbContext类

public class SeismicDbContext : DbContext
{
    public SeismicDbContext() : base("YourConnectionStringName")
    {
    }

    public DbSet<Seismic> Seismics { get; set; }
}

注意替换YourConnectionStringName为你配置文件中的数据库连接字符串名称。

2. 修改Controller的Insert方法

[HttpPost]
public JsonResult Insert(List<Seismic> seismics)
{
    using (var db = new SeismicDbContext())
    {
        db.Seismics.AddRange(seismics);
        db.SaveChanges();
    }
    return Json(seismics.Count);
}

使用AddRange批量添加数据，SaveChanges将数据提交到数据库，返回插入的记录条数，前端弹窗可正确显示插入数量。

额外优化建议 #

• 前端数据可靠性优化：当前用html()获取单元格内容，若单元格存在其他元素可能出错。建议添加自定义属性存储数据：

// 添加行时
cell.html(txtName.val()).attr("data-value", txtName.val());
// 获取数据时
seismic.Name = row.find("TD").eq(0).attr("data-value");

• 错误排查与处理：在Ajax请求中添加错误回调，方便定位问题：

$.ajax({
    // 原有配置
    error: function(xhr, status, error) {
        alert("插入失败：" + error);
    }
});

• 防止重复提交：点击保存后禁用按钮，避免重复提交：

$("body").on("click", "#btnSave", function () {
    var btn = $(this);
    btn.prop("disabled", true);
    
    // 组装数据和Ajax请求
    $.ajax({
        // 原有配置
        success: function (r) {
            alert(r + " record(s) inserted.");
            btn.prop("disabled", false);
        },
        error: function() {
            btn.prop("disabled", false);
        }
    });
});

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