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发送，即{{1} }，而不是JSON。

要么删除'application/x-www-form-urlencoded; charset=UTF-8'选项，要么指定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

将表单数据序列化为Ajax POST

1 个答案: