如何在ASP.NET中用JavaScript序列化表单并绑定到.NET对象？

当然可以！你完全不用手动逐个提取表单字段，jQuery提供了非常方便的方法帮你把整个表单序列化成能直接绑定到.NET对象的格式，代码会简洁很多。下面一步步给你讲怎么实现：

1. 先确保表单结构和后端.NET模型匹配 #

首先你的HTML表单里，每个输入控件的name属性要和后端.NET模型的属性名完全对应（这是.NET模型绑定的核心，靠name匹配值）。比如你后端的模型是这样：

public class TestModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    // 其他表单字段对应的属性都放在这里
}

那你的HTML表单应该写成：

<form id="testForm">
    <input type="hidden" name="Id" id="Id" value="xxx" />
    <input type="text" name="Name" id="Name" placeholder="输入名称" />
    <!-- 其他需要提交的表单控件都加上正确的name属性 -->
</form>

2. 修改你的JavaScript代码，用表单序列化代替手动拼接 #

直接用jQuery的serialize()方法，它会自动把所有带name属性的表单控件序列化成key=value&key2=value2的格式，ASP.NET能直接把这个格式绑定到你的模型对象上。修改后的代码如下：

function confirmEdit() {
    swal({
        title: "MIS",
        text: "Case Created your Case Number is " + $("#Id").val(),
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((willUpdate) => {
        if (willUpdate) {
            $.ajax({
                url: "/tests/edit/" + $("#Id").val(),
                type: "POST",
                data: $("#testForm").serialize(), // 这里改成序列化整个表单
                dataType: "html",
                success: function () {
                    swal("Done!", "It was succesfully edited!", "success")
                        .then((success) => {
                            window.location.href = "/tests/index";
                        });
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    swal("Error updating!", "Please try again", "error");
                }
            });
        }
    });
}

3. 调整后端Action方法接收模型 #

后端的Action直接接收你的模型对象就行，ASP.NET会自动把序列化后的表单数据填充进去：

[HttpPost]
public ActionResult Edit(int id, TestModel model)
{
    // 这里model已经自动包含了所有表单字段的值
    // 写你的业务逻辑代码即可
    return View();
}

额外技巧：如果要加额外参数怎么办？ #

如果需要在表单数据之外再加额外参数，可以用serializeArray()把表单转成对象数组，再转换成普通对象后添加参数：

// 把表单转成对象数组
var formArray = $("#testForm").serializeArray();
var formData = {};
// 转成普通键值对对象
$(formArray).each(function(index, item){
    formData[item.name] = item.value;
});
// 添加额外参数
formData["ExtraField"] = "额外的值";

// 然后ajax里的data用formData

注意事项 #

• 表单控件必须有name属性，id不是必须的，但name要和模型属性名一致（ASP.NET默认不区分大小写，但建议严格一致避免问题）
• 如果涉及文件上传，serialize()不支持，需要用FormData对象，但你的场景看起来是普通表单，用上面的方法就够了

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