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 stackoverflow.com/questions/6620165/how-can-i-parse-json-with-c — VDWWD
– VDWWD, Commented Jan 11, 2020 at 12:21

MBadrian · Accepted Answer · 2020-01-11 12:28:24Z

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

Nan Yu · Accepted Answer · 2020-01-13 05:43:59Z

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, 2020 at 5:43

Nan Yu

27.7k9 gold badges75 silver badges157 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related