Сериализация данных формы в модель для Ajax POST

Question

У меня есть веб-приложение MVC с этой моделью

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
}

Я делаю много динамического пользовательского интерфейса с моей формой, и я могу публиковать на разных конечных точках с разными значениями, поэтому я решил просто отправить форму с использованием 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(),
})