C# MVC视图动态表格数据AJAX提交至控制器失效问题

问题现象 #

尝试将包含动态值的表格数据发送到控制器，先后通过Request对象取值、控制器方法形参绑定两种方式获取前端传递的数据，均无法正常读取，项目基于C# MVC + ADO.NET技术栈开发。

现有表格Razor代码 #

<tbody>
    @if (ViewBag.data != null)
    {
        foreach (var item in ViewBag.data)
        {
            <tr>
                <td class="AutoId">@item.AutoID <input type="hidden" name="AutoID" value="@item.AutoID" /></td>
                <td class="hove" name="text"><a href="#"> <b>@item.Text</b></a><br /><label></label></td>
                <td class="Active">@item.Active</td>
                <td id="oBy" name="OrderBy">@item.OrderBy</td>
            </tr>
        }
    }
</tbody>

现有AJAX提交代码 #

<script>
    $(document).ready(function () {
        alert("Test 1");
        $("#btnSave").click(function (e) {
            alert("Test 2");
             $.ajax({
                 type: "POST",
                 url: '@Url.Action("LookupManagementUpdate", "Admin", new { Area = "Admin" })',
                 data: $(".hove").val(),
                 dataType: 'json',
                 async: false,
                 success: function (response) {
                     Success = true;
                 },
                 error: function (response) {
                 },
             });
        });
    });
</script>

现有控制器代码 #

public string LookupManagementUpdate(string text)
{
    return "answer"+Request["text"]+text;
}

失败原因 #

• jQuery的.val()方法仅支持读取input、select、textarea这类表单控件的value属性，.hove是普通td标签，调用.val()永远返回空值
• 提交数据时没有按MVC模型绑定要求的键名封装参数，直接传入原始字符串，后端无法匹配到名为text的形参
• 表格为多行动态渲染，当前写法仅会匹配第一个.hove元素，无法获取全量行数据
• 给普通td标签添加的name属性无效，MVC默认值提供器只会识别表单提交的键值对，不会解析普通标签的name属性
• 代码存在规范问题：多行元素重复使用id="oBy"违反HTML全局id唯一的规范，同步AJAX（async:false）会阻塞浏览器线程，严重影响体验

修复实现 #

前端修正 #

1. 遍历所有表格行组装结构化数据，从普通标签读取文本内容时用.text()方法
2. 提交时按后端参数名封装数据，声明JSON提交格式
3. 移除同步AJAX、测试用alert等冗余代码

$(document).ready(function () {
    $("#btnSave").click(function (e) {
        e.preventDefault();
        // 组装全量表格数据
        const tableRows = [];
        $("tbody tr").each(function () {
            const currentTr = $(this);
            tableRows.push({
                AutoID: currentTr.find("input[name='AutoID']").val(),
                Text: currentTr.find(".hove b").text().trim(),
                Active: currentTr.find(".Active").text().trim(),
                OrderBy: currentTr.find(".oBy").text().trim()
            });
        });

        $.ajax({
            type: "POST",
            url: '@Url.Action("LookupManagementUpdate", "Admin", new { Area = "Admin" })',
            data: JSON.stringify({ rows: tableRows }),
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (response) {
                console.log("提交成功", response);
            },
            error: function (err) {
                console.log("提交异常", err);
            }
        });
    });
});

注意：先把原td上重复的id="oBy"改成class="oBy"，避免选择器异常

后端修正 #

1. 定义和前端字段匹配的实体类，用列表类型接收批量表格数据
2. 返回JSON格式结果适配AJAX请求

// 表格行数据实体
public class LookupDataItem
{
    public int AutoID { get; set; }
    public string Text { get; set; }
    public bool Active { get; set; }
    public int OrderBy { get; set; }
}

public ActionResult LookupManagementUpdate(List<LookupDataItem> rows)
{
    // 此处直接遍历rows，用ADO.NET执行更新逻辑即可
    return Json(new { success = true, totalCount = rows.Count });
}

可选简化方案 #

如果不想手动遍历DOM组装数据，可以把所有需要提交的字段都改成隐藏input放在对应td内，提交时直接调用$(表单选择器).serialize()序列化表单数据，MVC默认表单绑定器可以直接识别，不需要额外配置JSON提交格式。

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