将表单数据序列化为 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()IE浏览器- ，它在“查询字符串”格式生成的数据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(),
})