MVC 코어 오류 400에 Ajax 다중 데이터 포인트 게시

질문

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>

답변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 },
            );
        }
    }

 

 

 

 

출처 : https://stackoverflow.com/questions/63240018/ajax-multiple-data-point-post-to-mvc-core-error-400