如何通过AJAX将Bootstrap模态框表单数据以Model传回MVC控制器

看起来你在MVC5+EF6环境下，尝试用AJAX提交Bootstrap模态框表单时遇到了模型绑定或请求处理的问题，我来帮你一步步排查和解决：

一、当前代码的核心问题 #

1. 模型绑定失败
   你用serializeArray()把表单转成键值对数组后，又包装在{ person: person }里传递，这种嵌套格式MVC的模型绑定器没法正确解析成Person对象。MVC需要的是扁平的键值对（比如LastName=Smith&FirstName=John），而不是数组嵌套的结构。

2. 请求配置不合理

   • AJAX默认用GET请求，但你的控制器方法涉及数据写入，需要用POST请求（GET有安全和长度限制问题）；
   • async: false会阻塞浏览器主线程，导致页面卡顿，这是非常不推荐的做法；
   • 你没有指定dataType: 'json'，可能导致返回的布尔值被解析成字符串，所以data === 'True'的判断永远不生效。

3. WebMethod的误用
   在MVC控制器里用[WebMethod]是WebForms的遗留写法，MVC的标准做法是用ActionResult返回JsonResult，这样能更好地处理模型验证、错误信息返回等场景。

二、修正后的完整方案 #

1. 重构控制器方法（推荐MVC标准写法） #

把原来的WebMethod改成普通的POST Action，这样能正常使用ModelState和EF上下文：

[HttpPost]
public JsonResult ModalCreate([Bind(Include = "LastName,FirstName,EmailAddress,PhoneNumber,CustomerID,VendorID")] Person person)
{
    try
    {
        if (ModelState.IsValid)
        {
            db.CorrActionPerson.Add(person);
            db.SaveChanges();
            // 返回成功标记
            return Json(true);
        }
    }
    catch (Exception ex)
    {
        ModelState.Merge(globalUtils.HandleExceptions(ex));
    }
    // 验证失败或出错时，返回错误信息
    var errors = ModelState.Values
        .SelectMany(v => v.Errors)
        .Select(e => e.ErrorMessage)
        .ToList();
    return Json(new { success = false, errorMessages = errors });
}

2. 修正AJAX代码 #

调整请求配置，确保表单数据能正确绑定，并且异步处理结果：

let objModalForm = $('#newPersonModal form');

// 先清空之前的错误提示（如果有的话）
$('#errorMessages').empty().hide();

$.ajax({
    url: urlPrefix + '/Quality/CorrAction/Person/ModalCreate',
    type: 'POST', // 指定POST请求
    data: objModalForm.serialize(), // 直接序列化表单为扁平键值对
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    dataType: 'json', // 明确预期返回JSON格式
    cache: false // 禁用缓存，避免重复提交问题
}).done(function (response) {
    if (response === true || response.success === true) {
        // 成功操作：关闭模态框、刷新列表等
        $('#newPersonModal').modal('hide');
        // 示例：刷新页面上的人员列表
        // $('#personListContainer').load(urlPrefix + '/Quality/CorrAction/Person/GetPersonList');
        alert('人员创建成功！');
    } else {
        // 显示验证错误信息
        let errorHtml = response.errorMessages.map(msg => `<p>${msg}</p>`).join('');
        $('#errorMessages').html(errorHtml).show();
    }
}).fail(function (xhr, status, error) {
    // 处理请求失败（比如网络错误、服务器异常）
    console.error('提交失败:', error);
    alert('请求出错，请稍后重试');
});

3. 确保表单字段的name属性正确 #

表单里的input元素name必须和Person类的属性名完全一致，比如：

<div class="modal-body">
    <form id="personForm">
        <div class="form-group">
            <label>姓氏</label>
            <input type="text" class="form-control" name="LastName" required />
        </div>
        <div class="form-group">
            <label>名字</label>
            <input type="text" class="form-control" name="FirstName" required />
        </div>
        <div class="form-group">
            <label>邮箱</label>
            <input type="email" class="form-control" name="EmailAddress" required />
        </div>
        <!-- 其他字段：PhoneNumber、CustomerID、VendorID -->
    </form>
</div>

三、验证步骤 #

1. 打开浏览器开发者工具（F12），切换到Network标签；
2. 提交表单，查看请求的Payload，确认参数是扁平的键值对；
3. 查看响应内容，确认返回的是JSON格式的true或包含错误信息的对象；
4. 如果模型绑定失败，可以在控制器里加ModelState.IsValid的调试输出，或者查看请求参数是否和属性名匹配。

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