如何使用Ajax提交带模型绑定的ASP.NET Core表单？

问题核心 #

使用fireModal调用绑定UserProfile模型的表单，Ajax提交后控制器的UpdatePassword方法接收的参数为null，需保留原有控制器结构，实现正确的模型绑定Ajax提交。

解决方案步骤 #

1. 修正表单控件的name属性

asp-for会自动生成符合模型绑定规则的name属性，不要手动覆盖。原代码中手动设置name="password"会破坏模型绑定的字段映射，需删除该属性：

@model RES.Models.UserModels.UserProfile
<form class="modal-part" id="modal-login-part" asp-action="UpdatePassword" asp-controller="User">
    <!-- 其他表单控件保持不变 -->
    <input type="password" asp-for="UpdatePassword.ConfirmPassword" id="confirmPassword" class="form-control" placeholder="Confirm Password">
</form>

2. 实现正确的Ajax提交逻辑

在onFormSubmit回调中，通过序列化表单数据并设置正确的请求头，让ASP.NET Core能正确解析并完成模型绑定：

$("#cmdUpdatePassword").fireModal({
    // 保留你的其他fireModal配置项
    onFormSubmit: function (modal, e, form) {
        e.preventDefault();
        
        // 序列化表单数据，自动匹配模型绑定规则
        const formData = $(form).serialize();
        
        $.ajax({
            url: $(form).attr('action'), // 直接使用表单的action属性，无需硬编码
            type: 'POST',
            data: formData,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8', // 关键：匹配默认表单提交的内容类型
            success: function (response) {
                console.log('提交成功:', response);
                // 提交成功后的逻辑，比如关闭模态框
                modal.modal('hide');
            },
            error: function (xhr) {
                console.error('提交失败:', xhr.responseText);
                // 处理错误逻辑
            }
        });
    }
});

关键说明 #

• name属性是模型绑定的核心：ASP.NET Core通过表单控件的name属性与模型字段名称匹配来完成绑定，asp-for生成的name格式（如UpdatePassword.ConfirmPassword）能正确映射到UserProfile的嵌套属性。
• 表单序列化的作用：$(form).serialize()会将所有带有效name的控件数据转换成URL编码格式，完全符合ASP.NET Core默认的表单数据解析要求。
• contentType必须正确：设置为application/x-www-form-urlencoded是确保服务器能识别并解析表单数据的关键，不要使用application/json（除非手动将数据序列化为JSON格式且控制器添加[FromBody]属性，但这需要修改控制器，不符合需求）。

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