Ajax 多个数据点发布到 MVC 核心错误 400答案

【问题标题】：Ajax multiple data point post to MVC core Error 400Ajax 多个数据点发布到 MVC 核心错误 400
【发布时间】：2020-08-04 03:51:09
【问题描述】：

我正在尝试通过 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 }
            );
        }

信息应该进入这个方法：

 [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>

【问题讨论】：

在控制器中使用 [HttpPost] 而非操作
我试过了，它不会改变任何东西。顺便说一句，如果我这样做 ``` $.post('/Submit/MediaAdd', $('.AddMedia:nth-child(1)').find('form').serialize());```我可以在MediaAdd 内打断点，但模型完全为空/充满空值。

标签： jquery ajax asp.net-mvc asp.net-core

【解决方案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>
}

结果：

【讨论】：

感谢您的回复，尤其是您验证令牌的部分。但是，如果您查看我的答案，我认为可以以更简单的方式完成

【解决方案2】：

完全修复它需要三件事。首先从 asp-for 的前面删除Medias.。其次，控制器方法需要 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 },
            );
        }
    }

【讨论】：