How do I pass a JSON object from ajax to ASP.net page

Question

I have the following code that sends JSON objects to a MVC controller through POST, I have no idea why its not working, any suggestions?

JS

    function Update()
    {
        var objects = $(".Classes");
        items = [];
        objects.each(function () {
            items .push({
                "Id": $(this).find(".input").attr('id'),
                "Value": $(this).find(".input2").val()
            });
        });
        $.ajax({
            type: "POST",
            url: "/A/Update",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },

            data: JSON.stringify(items),

            contentType: "application/json",
            dataType: "json",
            success: function (response) {
            }
        });
    }

Model

public class Update{
            public string Id{get;set;}
            public string Value{ get; set; }
        }

Task

[HttpPost("Update")]
        public async Task<JsonResult> Update(IList <Update> items)
        {...}

The task runs but JSON objects never deserialize to the model, I always get items of count 0.

Maybe this helps https://stackoverflow.com/questions/6620165/how-can-i-parse-json-with-c — VDWWD, Jan 11 '20 at 12:21

score 1 · Answer 1 · answered Jan 11 '20 at 12:28

you must be change your code data:{"items":JSON.stringify(items)} because you must be send Post data name then change code to this code

function Update()
    {
        var objects = $(".Classes");
        items = [];
        objects.each(function () {
            items .push({
                "Id": $(this).find(".input").attr('id'),
                "Value": $(this).find(".input2").val()
            });
        });
        $.ajax({
            type: "POST",
            url: "/A/Update",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },

            data:{"items":JSON.stringify(items)},

            contentType: "application/json",
            dataType: "json",
            success: function (response) {
            }
        });
    }

score 0 · Answer 2 · answered Jan 13 '20 at 05:43

0

The only change is to use [FromBody] to let model binding system read post data from request body and bind to your object :

public async Task<JsonResult> Update([FromBody]IList<Update> items)

answered Jan 13 '20 at 05:43

Nan Yu

26,101
9
68
148

How do I pass a JSON object from ajax to ASP.net page

2 Answers2