Ajax публикация нескольких точек данных в MVC основная ошибка 400

Question

Я пытаюсь AJAX JQuery отправить некоторые данные формы на свой MVC контроллер, но получаю сообщение об ошибке 400. Я пытаюсь опубликовать, выполнив:

 var count = $('#MediaList').children().length;        
        for (var i = 0; i < count; i++) {           
            $.post('/Submit/MediaAdd',
                { model: $('.AddMedia:nth-child(' + i + ')').find('form').serialize(), count: count }
            );
        }

Информация должна быть go в этом методе:

 [Route("/Submit/MediaAdd")]
 [ValidateAntiForgeryToken] //Add media form handler
 public IActionResult MediaAdd(Media model, int count)
 {
    if (ModelState.IsValid)
    {
       //do stuff to model and count
    }
 }

Наконец, вот сокращенная версия моей формы:

<form name="mediaAdd" method="post">
    @Html.AntiForgeryToken()
    <div class="container">        
        <div class="form-row">
            <label asp-for="Medias.Blurb" class="control-label">Blurb
                 <span class="text-danger ml-1">*</span> 
                 <span class="text-muted ml-1">Explain what is in the media</span>
            </label>
            <input asp-for="Medias.Blurb" class="form-control" />
            <span asp-validation-for="Medias.Blurb" class="text-danger"></span>
        </div>
        <div class="form-row col-5">
            <div class="form-group MediaLink">
                 <label for="FileLink">Link the Media</label>
                 <input asp-for="Medias.SourceFile" type="url" class="form-control" id="FileLink">
            </div>
        </div>
    </div>
</form>

Answer 1

Может быть, это вызвано { model: $('.AddMedia:nth-child(' + i + ')').find('form').serialize(), count: count }. Вот демонстрация работала:

Media.cs:

public class Media
    {
        public string Blurb { get; set; }
        public string SourceFile { get; set; }
    }

Контроллер:

 [Route("/Submit/MediaAdd")]
        [ValidateAntiForgeryToken] //Add media form handler
        public IActionResult MediaAdd(Media model, int count)
        {
            if (ModelState.IsValid)
            {
                return Ok();
            }
            return Ok();
        }
        

Просмотр:

@model Media
@{
    ViewData["Title"] = "Media";
}

<h1>Media</h1>
<form name="mediaAdd" method="post" id="dataForm">
    @Html.AntiForgeryToken()
    <div class="container">
        <div class="form-row">
            <label asp-for="Blurb" class="control-label">
                Blurb
                <span class="text-danger ml-1">*</span>
                <span class="text-muted ml-1">Explain what is in the media</span>
            </label>
            <input asp-for="Blurb" class="form-control" />
            <span asp-validation-for="Blurb" class="text-danger"></span>
        </div>
        <div class="form-row col-5">
            <div class="form-group MediaLink">
                <label for="FileLink">Link the Media</label>
                <input asp-for="SourceFile" type="url" class="form-control" id="FileLink">
            </div>
        </div>
    </div>
    <button onclick="sendData()">send</button>
</form>
@section scripts{ 
<script type="text/javascript">
    function sendData() {
        var count = 1;
        var formdata = {};
        formdata.Blurb = $('input[name="Blurb"]').val();
        formdata.SourceFile = $('input[name="SourceFile"]').val();
        var token = $('input[name="__RequestVerificationToken"]').val();
        $.post('/Submit/MediaAdd',
            { __RequestVerificationToken: token, model: formdata, count: count }
            );
    }
</script>
}

результат: введите описание изображения здесь

Answer 2

Чтобы это исправить, потребовалось три вещи. Сначала удалите Medias. с передней части asp -for. Во-вторых, метод контроллера требует ввода в виде массива JSON. Поэтому мне пришлось преобразовать сериализованный вывод в массив JSON. Наконец, мне нужно проверить ввод, а это означает, что мне нужно передать токен проверки методу, я украл код для этого у пользователя Yiyi You. Это можно сделать с помощью следующего кода:

function SubmitMedia () {
        var count = $('#MediaList').children().length;
        var token = $('input[name="__RequestVerificationToken"]').val();     
        for (var i = 0; i < count; i++) {
        var data = $('.AddMedia:nth-child(1)').find('form').serialize().split("&");
        console.log(data);
        var obj = {};
        for (var key in data) {
            console.log(data[key]);
            obj[data[key].split("=")[0]] = data[key].split("=")[1];
        }
        console.log(obj);
            $.post('/Submit/MediaAdd',
                { __RequestVerificationToken: token, model: obj, count: count },
            );
        }
    }