binding json string to a model in asp.net MVC

Question

I have a json string and I want to parse it to the ASP.NET MVC controller and bind to my model. Here is the way I did it but its not working, because the book parameter in the action method is null.

Below is my json string:

function parseDAta() {
    var jsonString = "{\"book\":[{\"id\":\"01\",\"author\":\"j.k.rowling\",\"price\":250,\"available\":true,\"editions\":[{\"id\":\"001\",\"name\":\"2017\"},{\"id\":\"002\",\"name\":\"2018\"}]},{\"id\":\"02\",\"author\":\"carlsom james\",\"price\":500,\"available\":false,\"editions\":null}]}";

    $.ajax({
        url: '/book/book',
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: jsonString,
        success: function (result) {
            console.log('Data received: ');
            console.log(result);
        }
    });
}

Below is my action method:

[HttpPost]
public ActionResult book(model book)
{
    return null;
}

Below is my model:

public class model
{
    public book[] book { get; set; }
}

public class book
{
    public string id { get; set; }
    public string availabity { get; set; }
    public string Author { get; set; }
    public int price { get; set; }

    public  edition[] edition { get; set; }
}

public class edition
{
    public string name { get; set; }
    public string id { get; set; }
}

adiga · Accepted Answer · 2017-10-14 09:24:06Z

2

The DefaultModelBinder is unable to bind your object because it expects a payload like this:

{"book": {"book":[]}}

So, the json should be

"{\"book\":{\"book\":[{\"id\":\"01\",\"author\":\"j.k.rowling\",\"price\":250,\"available\":true,\"editions\":[{\"id\":\"001\",\"name\":\"2017\"},{\"id\":\"002\",\"name\":\"2018\"}]},{\"id\":\"02\",\"author\":\"carlsom james\",\"price\":500,\"available\":false,\"editions\":null}]}}";

The json you have created would work if the action method was like this:

public ActionResult book(book[] book)
{
}

To avoid this confusion with having too many books, you can change the parameter of the Action method to:

public ActionResult book(model model)
{
}

and the json to:

"{\"model\":{\"book\":[{\"id\":\"01\",\"author\":\"j.k.rowling\",\"price\":250,\"available\":true,\"editions\":[{\"id\":\"001\",\"name\":\"2017\"},{\"id\":\"002\",\"name\":\"2018\"}]},{\"id\":\"02\",\"author\":\"carlsom james\",\"price\":500,\"available\":false,\"editions\":null}]}}";

Another way to do this would be to add FromBody attribute to the parameter like this:

public ActionResult book([FromBody]model book)
{
}

You'd need to add a System.Web.Http reference to use this attribute.

edited Oct 14, 2017 at 9:24

answered Oct 14, 2017 at 7:22

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shyamal Over a year ago

Thanks a lot . I simply changed the action method as you explained and now it works fine. Thanks for the explanation.

Shyamal Over a year ago

very sorry for that I fixed it

Erik Philips Over a year ago

FromBody is not needed at all. The default ValueProviders include all ValueProviders (querystring, json, etc).

Rahul Mistry · Accepted Answer · 2017-10-14 07:45:36Z

 var jsonString = "{\"book\":[{\"id\":\"01\",\"author\":\"j.k.rowling\",\"price\":250,\"available\":true,\"editions\":[{\"id\":\"001\",\"name\":\"2017\"},{\"id\":\"002\",\"name\":\"2018\"}]},{\"id\":\"02\",\"author\":\"carlsom james\",\"price\":500,\"available\":false,\"editions\":null}]}";

first you needs to unescape which will gives you in format of json

In JS

var jsonString =unescape("{\"book\":[{\"id\":\"01\",\"author\":\"j.k.rowling\",\"price\":250,\"available\":true,\"editions\":[{\"id\":\"001\",\"name\":\"2017\"},{\"id\":\"002\",\"name\":\"2018\"}]},{\"id\":\"02\",\"author\":\"carlsom james\",\"price\":500,\"available\":false,\"editions\":null}]}");
    console.log(jsonString);
    $.ajax({
        url: '/home/book',
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: jsonString,
        success: function (result) {
            console.log('Data received: ');
            console.log(result);
        }
    });

Controller

        [HttpPost]
        public ActionResult book(List<book> book)
        {
            return null;
        }

Models

public class model //No need of this class,you can remove it
    {
        public book[] book { get; set; }

    }

    public class book
    {
        public string id { get; set; }
        public string availabity { get; set; }
        public string Author { get; set; }
        public int price { get; set; }

        public edition[] edition { get; set; }

    }

    public class edition
    {
        public string name { get; set; }
        public string id { get; set; }
    }

Thank you very much. I did the changes as you explained and this is working. Thanks for the explanation.

Collectives™ on Stack Overflow

binding json string to a model in asp.net MVC

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related