[c#] jQuery Ajax를 사용하여 MVC 컨트롤러 메서드에 개체 목록 전달

jQuery의 ajax () 함수를 사용하여 MVC 컨트롤러 메서드에 개체 배열을 전달하려고합니다. PassThing () C # 컨트롤러 메서드에 들어가면 “things”인수가 null입니다. 인수에 List 유형을 사용하여 시도했지만 작동하지 않습니다. 내가 뭘 잘못하고 있죠?

<script type="text/javascript">
    $(document).ready(function () {
        var things = [
            { id: 1, color: 'yellow' },
            { id: 2, color: 'blue' },
            { id: 3, color: 'red' }
        ];

        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/Xhr/ThingController/PassThing',
            data: JSON.stringify(things)
        });
    });
</script>

public class ThingController : Controller
{
    public void PassThing(Thing[] things)
    {
        // do stuff with things here...
    }

    public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }
}

답변

NickW의 제안을 사용하여 things = JSON.stringify({ 'things': things });Here is the complete code를 사용하여이 작업을 수행 할 수있었습니다 .

$(document).ready(function () {
    var things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];

    things = JSON.stringify({ 'things': things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: things,
        success: function () {
            $('#result').html('"PassThings()" successfully called.');
        },
        failure: function (response) {
            $('#result').html(response);
        }
    });
});


public void PassThings(List<Thing> things)
{
    var t = things;
}

public class Thing
{
    public int Id { get; set; }
    public string Color { get; set; }
}

이것에서 배운 두 가지가 있습니다.

contentType 및 dataType 설정은 ajax () 함수에서 절대적으로 필요합니다. 누락 된 경우 작동하지 않습니다. 많은 시행 착오 끝에 이것을 발견했습니다.
MVC 컨트롤러 메서드에 개체 배열을 전달하려면 JSON.stringify ({ ‘things’: things}) 형식을 사용하면됩니다.

다른 사람에게 도움이되기를 바랍니다.

답변

그냥 할 수 없나요?

var things = [
    { id: 1, color: 'yellow' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'red' }
];
$.post('@Url.Action("PassThings")', { things: things },
   function () {
        $('#result').html('"PassThings()" successfully called.');
   });

… 그리고 당신의 행동을

[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
    // do stuff with things here...
}

답변

문제가 될 수있는 데이터 서식 지정. 다음 중 하나를 시도하십시오.

data: '{ "things":' + JSON.stringify(things) + '}',

또는 ( 폼없이 ASP.NET MVC 컨트롤러에 문자열 배열 을 어떻게 게시 할 수 있습니까? )

var postData = { things: things };
...
data = postData

답변

.Net Core 2.1 웹 응용 프로그램을 사용하고 있으며 여기에서 하나의 답변을 얻을 수 없습니다. 빈 매개 변수 (메서드가 호출 된 경우) 또는 500 서버 오류가 발생했습니다. 나는 가능한 모든 답변 조합을 가지고 놀기 시작했고 마침내 작업 결과를 얻었습니다.

제 경우에는 해결책은 다음과 같습니다.

스크립트-원래 배열 문자열 화 (명명 된 속성을 사용하지 않음)

    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: mycontrolleraction,
        data: JSON.stringify(things)
    });

그리고 컨트롤러 메서드에서 [FromBody]를 사용합니다.

    [HttpPost]
    public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
    {
        return Ok();
    }

실패에는 다음이 포함됩니다.

콘텐츠 이름 지정

data : {content : nodes}, // 서버 오류 500
contentType = 서버 오류 500이 없음

노트

dataType응답 디코딩에 사용 되기 때문에 일부 답변에도 불구하고 필요하지 않습니다 (따라서 요청 여기 예제 ).
List<Thing> 컨트롤러 방법에서도 작동합니다.

답변

나는이 모든 것에 대한 완벽한 대답을 가지고 있습니다 : 마침내 스스로 관리 할 수없는 많은 솔루션을 시도했습니다. 아래에서 자세한 답변을 찾으십시오.

       $.ajax({
            traditional: true,
            url: "/Conroller/MethodTest",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify(
               [
                { id: 1, color: 'yellow' },
                { id: 2, color: 'blue' },
                { id: 3, color: 'red' }
                ]),
            success: function (data) {
                $scope.DisplayError(data.requestStatus);
            }
        });

관제사

public class Thing
{
    public int id { get; set; }
    public string color { get; set; }
}

public JsonResult MethodTest(IEnumerable<Thing> datav)
    {
   //now  datav is having all your values
  }

답변

이 작업을 수행 할 수있는 유일한 방법은 JSON을 문자열로 전달한 다음을 사용하여 역 직렬화하는 것입니다 JavaScriptSerializer.Deserialize<T>(string input). 이는 MVC 4의 기본 역 직렬화 기인 경우 매우 이상합니다.

내 모델에는 중첩 된 개체 목록이 있으며 JSON 데이터를 사용하여 얻을 수있는 최선의 방법은 올바른 항목 수를 포함하는 최상위 목록이지만 항목의 모든 필드는 null이었습니다.

이런 종류의 일은 그렇게 어렵지 않아야합니다.

    $.ajax({
        type: 'POST',
        url: '/Agri/Map/SaveSelfValuation',
        data: { json: JSON.stringify(model) },
        dataType: 'text',
        success: function (data) {

    [HttpPost]
    public JsonResult DoSomething(string json)
    {
        var model = new JavaScriptSerializer().Deserialize<Valuation>(json);

답변

이것은 귀하의 쿼리에 대한 작동 코드이며 사용할 수 있습니다.

관제사

    [HttpPost]
    public ActionResult save(List<ListName> listObject)
    {
    //operation return
    Json(new { istObject }, JsonRequestBehavior.AllowGet); }
    }

자바 스크립트

  $("#btnSubmit").click(function () {
    var myColumnDefs = [];
    $('input[type=checkbox]').each(function () {
        if (this.checked) {
            myColumnDefs.push({ 'Status': true, 'ID': $(this).data('id') })
        } else {
            myColumnDefs.push({ 'Status': false, 'ID': $(this).data('id') })
        }
    });
   var data1 = { 'listObject': myColumnDefs};
   var data = JSON.stringify(data1)
   $.ajax({
   type: 'post',
   url: '/Controller/action',
   data:data ,
   contentType: 'application/json; charset=utf-8',
   success: function (response) {
    //do your actions
   },
   error: function (response) {
    alert("error occured");
   }
   });