c# - 예제 - spring ajax post



jQuery Ajax를 사용하여 MVC 컨트롤러 메소드에 객체 목록 전달하기 (8)

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; }
    }
}

https://src-bin.com


Answer #1

.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> 은 컨트롤러 메소드에서도 작동합니다.

Answer #2

@veeresh i에서 수정

 var data=[

                        { id: 1, color: 'yellow' },
                        { id: 2, color: 'blue' },
                        { id: 3, color: 'red' }
                        ]; //parameter
        var para={};
        para.datav=data;   //datav from View


        $.ajax({
                    traditional: true,
                    url: "/Conroller/MethodTest",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data:para,
                    success: function (data) {
                        $scope.DisplayError(data.requestStatus);
                    }
                });

In MVC



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
      }

Answer #3

MVC 컨트롤러가 예상하는 매개 변수의 이름과 일치하는 속성을 포함하는 다른 개체를 사용하여 개체 목록을 래핑합니다. 중요한 비트는 객체 목록을 둘러싼 래퍼입니다.

$(document).ready(function () {
    var employeeList = [
        { id: 1, name: 'Bob' },
        { id: 2, name: 'John' },
        { id: 3, name: 'Tom' }
    ];      

    var Employees = {
      EmployeeList: employeeList
    }

    $.ajax({
        dataType: 'json',
        type: 'POST',
        url: '/Employees/Process',
        data: Employees,
        success: function () {          
            $('#InfoPanel').html('It worked!');
        },
        failure: function (response) {          
            $('#InfoPanel').html(response);
        }
    }); 
});


public void Process(List<Employee> EmployeeList)
{
    var emps = EmployeeList;
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Answer #4

NickW의 제안을 사용하여, 나는이 things = JSON.stringify({ 'things': things }); 다음은 완전한 코드입니다.

$(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; }
}

내가 배운 두 가지가 있습니다.

  1. contentType 및 dataType 설정은 ajax () 함수에서 절대적으로 필요합니다. 누락 된 경우 작동하지 않습니다. 나는 많은 시행 착오 끝에 이것을 발견했다.

  2. MVC 컨트롤러 메소드에 객체 배열을 전달하려면 JSON.stringify ({ 'things': things}) 형식을 사용하기 만하면됩니다.

나는 이것이 다른 누군가를 돕기를 바랍니다!


Answer #5

너 그냥 할 수 없어?

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...
}


Answer #7

이것은 귀하의 쿼리에 대한 작동 코드입니다, 당신은 그것을 사용할 수 있습니다.

제어 장치

    [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");
   }
   });

Answer #8
     var List = @Html.Raw(Json.Encode(Model));
$.ajax({
    type: 'post',
    url: '/Controller/action',
    data:JSON.stringify({ 'item': List}),
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        //do your actions
    },
    error: function (response) {
        alert("error occured");
    }
});




jquery