将表单数据序列化为 Ajax POST 的模型

Question

我有一个 MVC Web 应用程序，使用这个模型

public class PersonViewModel
{
    public Guid SchoolId { get; set; }
    public string Name { get; set; }        
}

public class StudentViewModel : PersonViewModel
{

}

我有这个控制器方法来获取 StudentViewModel 并在我的数据库中创建一个 Student：

[HttpPost]
public async Task<IActionResult> CreateStudent(StudentViewModel viewModel)
{
    // ... do stuff
}

我正在用我的表单做很多动态 UI 的东西，我可能会发布到具有不同值的不同端点，所以我决定只使用 javascript 提交表单并根据一些决定我要发布到哪里条件。

所以这基本上是我不使用强类型辅助方法的正常路线的原因 - 这就是我的观点：

<form id="form">
    <input name="SchoolId" value="@Model.Id" type="hidden" />

    <input name="Name" type="text" />

    <button type="submit">Create</button>
</form>

<script>

    $(document).ready(function () {

        $('#form').on('submit', function (e) {
            e.preventDefault();            

            var formData = $('#form').serialize()
            console.log(formData);

            $.ajax({
                url: '/CreateStudent',
                type: "POST",
                data: formData,
                contentType: "application/json"
            });
        });

    });

</script>

我可以在我的控制台日志中看到表单数据已正确序列化，并且它命中了我的控制器方法。但是视图模型参数没有我传递给它的值。

我试过这样设置表单数据：

var formData = JSON.stringify($('#form').serializeArray());

我什至尝试对值进行硬编码：

var formData = '{"SchoolId":"c65fc8ad-7ad2-e811-b37f-9cb6d0b709c2","Name":"Testing"}';

但无论我尝试什么，视图模型值都不会设置。

我的表单数据格式错误吗？还是有完全不同的方法我需要这样做？

Answer 1

当您使用.serialize() 时，它会以“查询字符串”格式生成数据——即SchoolId=someValue&Name=AnotherValue，需要使用默认的contentType 即'application/x-www-form-urlencoded; charset=UTF-8' 发送，而不是JSON。

删除contentType 选项或指定contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

$('#form').on('submit', function (e) {
    e.preventDefault();            
    var formData = $('#form').serialize()
    $.ajax({
        url: '@Url.Action("CreateStudent")', //recommended
        type: "POST",
        data: formData,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8' // optional
    });
});

请注意，如果您要使用 contentType: "application/json"，那么您将使用（假设您为输入提供适当的 id 属性）生成数据

var formData = JSON.stringify({
    SchoolId: $('#SchoolId').val(),
    Name: $('#Name').val(),
})