IT

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

itgroup 2023. 8. 11. 21:41
반응형

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

jQuery의 agax() 함수를 사용하여 객체 배열을 MVC 컨트롤러 메소드로 전달하려고 합니다.내가 고갯길에 들어갈 때Thing() C# 컨트롤러 메서드, "things" 인수가 null입니다.저는 인수에 목록 유형을 사용하여 이것을 시도했지만, 그것도 소용이 없습니다.내가 뭘 잘못하고 있는 거지?

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

닉W의 제안을 이용하여, 저는 이것을 다음과 같이 작동시킬 수 있었습니다.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. 그 내용은Ajax() 함수에서는 Type 및 dataType 설정이 반드시 필요합니다.그것들이 없어지면 작동하지 않을 것입니다.저는 이것을 많은 시행착오 끝에 알게 되었습니다.

  2. 개체 배열을 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...
}

를 사용하고 있습니다.NetCore 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();
    }

실패는 다음과 같습니다.

  • 내용 이름 지정

    데이터: {content: 노드}, // 서버 오류 500

  • 내용이 없음유형 = 서버 오류 500

메모들

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

데이터를 포맷하는 것이 문제일 수 있습니다.다음 중 하나를 사용해 보십시오.

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

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

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

저는 이 모든 것에 대한 완벽한 답을 가지고 있습니다. 저는 많은 해결책을 시도했지만 결국에는 스스로 해결할 수 없었습니다. 아래에서 자세한 답을 찾아보십시오.

       $.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);

이것이 저에게 잘 작동하는 방법입니다.

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: '/Controller/action',
    data: { "things": things },
    success: function () {
        $('#result').html('"PassThings()" successfully called.');
    },
    error: function (response) {
        $('#result').html(response);
    }
});

대문자 "C"에 "ContentType"을 사용합니다.

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

컨트롤러

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

asp.net core 2.1에서 콘텐츠 유형을 제거하면 Ajax 호출이 작동했음을 확인할 수 있습니다.

function PostData() {
    var answer = [];

    for (let i = 0; i < @questionCount; i++) {
        answer[i] = $(`#FeedbackAnswer${i}`).dxForm("instance").option("formData");
    }

    var answerList = { answers: answer }

    $.ajax({
        type: "POST",
        url: "/FeedbackUserAnswer/SubmitForm",
        data: answerList ,
        dataType: 'json',
        error: function (xhr, status, error) { },
        success: function (response) { }
    });
}

[HttpPost]
public IActionResult SubmitForm(List<Feedback_Question> answers)
{}

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

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

를 제거하기contentType.net 3.1에서 근무했습니다. asp.net core 3.1에서 근무했습니다.

다른 모든 메서드가 실패했습니다.

ASP를 사용하는 경우. 웹 하시면 됩니다.data: JSON.stringify(things).

컨트롤러의 모양은 다음과 같습니다.

public class PassThingsController : ApiController
{
    public HttpResponseMessage Post(List<Thing> things)
    {
        // code
    }
}

@veereshi에서 수정.

 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
      }

DataTable에서 선택한 여러 행의 일부 데이터를 MVC 작업으로 전송하려고 할 때 수행한 작업:

HTML 페이지 시작 부분:

@Html.AntiForgeryToken()

(행만 표시되며 모델에서 바인딩):

 @foreach (var item in Model.ListOrderLines)
                {
                    <tr data-orderid="@item.OrderId" data-orderlineid="@item.OrderLineId" data-iscustom="@item.IsCustom">
                        <td>@item.OrderId</td>
                        <td>@item.OrderDate</td>
                        <td>@item.RequestedDeliveryDate</td>
                        <td>@item.ProductName</td>
                        <td>@item.Ident</td>
                        <td>@item.CompanyName</td>
                        <td>@item.DepartmentName</td>
                        <td>@item.ProdAlias</td>
                        <td>@item.ProducerName</td>
                        <td>@item.ProductionInfo</td>
                    </tr>
                }

JavaScript 기능을 시작하는 버튼:

 <button class="btn waves-effect waves-light btn-success" onclick="ProcessMultipleRows();">Start</button>

JavaScript 함수:

  function ProcessMultipleRows() {
            if ($(".dataTables_scrollBody>tr.selected").length > 0) {
                var list = [];
                $(".dataTables_scrollBody>tr.selected").each(function (e) {
                    var element = $(this);
                    var orderid = element.data("orderid");
                    var iscustom = element.data("iscustom");
                    var orderlineid = element.data("orderlineid");
                    var folderPath = "";
                    var fileName = "";

                    list.push({ orderId: orderid, isCustomOrderLine: iscustom, orderLineId: orderlineid, folderPath: folderPath, fileName : fileName});
                });

                $.ajax({
                    url: '@Url.Action("StartWorkflow","OrderLines")',
                    type: "post", //<------------- this is important
                    data: { model: list }, //<------------- this is important
                    beforeSend: function (xhr) {//<--- This is important
                      xhr.setRequestHeader("RequestVerificationToken",
                      $('input:hidden[name="__RequestVerificationToken"]').val());
                      showPreloader();
                    },
                    success: function (data) {

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    },
                     complete: function () {
                         hidePreloader();
                    }
                });
            }
        }

MVC 동작:

[HttpPost]
[ValidateAntiForgeryToken] //<--- This is important
public async Task<IActionResult> StartWorkflow(IEnumerable<WorkflowModel> model)

C#의 MODEL:

public class WorkflowModel
 {
        public int OrderId { get; set; }
        public int OrderLineId { get; set; }
        public bool IsCustomOrderLine { get; set; }
        public string FolderPath { get; set; }
        public string FileName { get; set; }
 }

결론:

오류의 이유:

"Failed to load resource: the server responded with a status of 400 (Bad Request)"

특성:[ValidateAntiForgeryToken] 액션의 경우 과 같습니다.StartWorkflow

Ajax의 솔루션 상담:

  beforeSend: function (xhr) {//<--- This is important
                      xhr.setRequestHeader("RequestVerificationToken",
                      $('input:hidden[name="__RequestVerificationToken"]').val());
                    },

예(목록 개체 채우기) 및 다음과 같이 데이터를 구성해야 하는 개체 목록을 보내려면:

데이터: {model: list},

유형: "포스트",

asp.net core 3.1에서는 아무 것도 작동하지 않았습니다.위의 모든 접근법을 시도했습니다.아무 것도 작동하지 않고 다른 사람이 테이블의 행을 읽고 이를 Action 메서드에 전달하려는 경우 아래 접근을 시도하십시오.이것은 분명히 효과가 있을 것입니다...

<script type="text/javascript">
    $(document).ready(function () {

        var data = new Array();
      var things = {};

      // make sure id and color properties match with model (Thing) properties
      things.id = 1;
      things.color = 'green';

      data.push(things);

      Try the same thing for dynamic data as well that is coming from table.

        // var things = [ { id: 1, color: 'yellow' }, { id: 2, color: 'blue' }, { id: 3, color: 'red' } ];

        $.ajax({
            contentType: 'application/json;',
            type: 'POST',
            url: 'your url goes here',
            data: JSON.stringify(things)
        });
    });
</script>

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

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

내게 효과가 있었던 방식은

            $.ajax({
            url: '@Url.Action("saveVideoesCheckSheet", "checkSheets")',
            type: "POST",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: "data=" + JSON.stringify(videos),
            success: function (response) {
                window.location.reload(true);
            },
            failure: function (msg) {
                
            }
        });
    });

컨트롤러

       public  string saveVideoesCheckSheet(string data)
    {

        List<editvideo> lst = JsonConvert.DeserializeObject<List<editvideo>>(data);...}

많은 실험 후에, 약간의 속임수.

목록에서 데이터 전송 확인란을 클릭하여 배열로 보내고 컨트롤러에서 모델의 목록 유형을 전달하여 배열 이름이 일치하는 새 모델을 생성하고 뷰 페이지에서 원하는 모델 속성을 선언합니다.

<script>
    function save() {
        alert('hi'); 
        var cartridges = new Array();
        $("#tbl1  input:checked ").each(function () {
            var row = $(this).parents("tr");
            var cartridge = {};
            cartridge.Id = row.find("TD").eq(0).html();
            cartridge.Name = row.find("TD").eq(1).html();
            cartridges.push( cartridge );
        });
        //alert(JSON.stringify(customers) + "rfgdfcd");
        $.ajax({
            type: 'post',
            url: '@Url.Action("saveDetails", "Home")',
            data: JSON.stringify(cartridges),
            dataType: "json",
            contentType: 'application/json',
            success: function (response) {
                alert("succese");
            },
                failure: function (response) {
                    alert("fail");
            },
                error: function (response) {
                    alert("error");
            },
        });
    }
</script>

언급URL : https://stackoverflow.com/questions/13242414/passing-a-list-of-objects-into-an-mvc-controller-method-using-jquery-ajax

반응형

'IT' 카테고리의 다른 글

Angular 4와 함께 jQuery 플러그인을 사용하는 방법은 무엇입니까?  (0) 2023.08.11
jQuery - 해시 변경 이벤트  (0) 2023.08.11
문자열은 어떻게 연결될 수 있습니까?  (0) 2023.08.11
하위 요소에 CSS 스타일 적용  (0) 2023.08.06
SQL Server 2012 스키마의 모든 테이블 이름 나열  (0) 2023.08.06

'IT'의 다른글

  • 현재글jQuery Ajax를 사용하여 MVC 컨트롤러 메서드에 개체 목록 전달

관련글

댓글

티스토리툴바