Bind an object to asp mvc controller from ajax request using asp.net core and Jquery

Question

I am struggling to post json data to asp mvc controller method from ajax request but asp mvc model binder is not binding it because of some unknown reasons.

I have tried to follow multiple answers posted here on SO including below

Post json object to ASP MVC doesn't work properly

but my jQuery ajax method always posts null values to asp mvc controller.

Basically, I am trying to load an partial view via ajax request.

Ajax Request

var myData =
 {
        "Id": 7,
        "Name": "Name 1"
 };

  var obj = { 'test': myData };
  var val = JSON.stringify(obj);
  console.log(val);

  $.ajax({
    type: 'POST',
    dataType: 'html',
    url: '/Home/Partial',
    contentType: 'application/json',
    data: val,
    success: function (xhr, status, response) {
             console.log(response);
             $('#1').html(response.responseText);
         },
    error: function (err) {
        alert("error - " + err);
    }
   });

Controller Method

[HttpPost]
public IActionResult Partial(Test test)
{
   return PartialView("_Test", test);
}

Model

public class Test
{
    public int Id;
    public string Name;
}

Use data: myData. You're adding another object property in the values you're sending which is confusing the ModelBinder — Rory McCrossan
– Rory McCrossan, Commented Jul 26, 2017 at 15:58
{"test":{"Id":7,"Name":"Name 1"}} this is how my payload looks like after JSON.stringify() so i dont think there is any problem.. btw data:myData didnt work — PalakM
– PalakM, Commented Jul 26, 2017 at 16:14
The issue is test. That's not needed. If data: myData didn't work step through the request in VS. If you don't even get that far, check the console to find out what the error is in JS — Rory McCrossan
– Rory McCrossan, Commented Jul 26, 2017 at 16:18
@Pratham you could also consider using public IActionResult Partial([FromBody]Test test) so the model binder knows to check the body for the model. — Nkosi
– Nkosi, Commented Jul 26, 2017 at 16:27
If you are using .net core, it is very picking about requiring the [FromBody]. — nurdyguy
– nurdyguy, Commented Jul 26, 2017 at 16:28

Nkosi · Accepted Answer · 2017-07-26 16:34:47Z

4

myData would have been enough to bind the object.

var myData = { Id: 7, Name: "Name 1" };
var val = JSON.stringify(myData);
console.log(val);

$.ajax({
  type: 'POST',
  dataType: 'html',
  url: '/Home/Partial',
  contentType: 'application/json',
  data: val,
  success: function (xhr, status, response) {
    console.log(response);
    $('#1').html(response.responseText);
  },
  error: function (err) {
    alert("error - " + err);
  }
});

You should also consider [FromBody] attribute on the parameter so the model binder knows to check the body for the model.

[HttpPost]
public IActionResult Partial([FromBody]Test test)  {
    return PartialView("_Test", test);
}

edited Jul 26, 2017 at 16:34

answered Jul 26, 2017 at 16:00

Nkosi

249k38 gold badges472 silver badges506 bronze badges

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

3 Comments

PalakM Over a year ago

curious to know what will be the approach if i want to bind List<Test> on controller side ???

Nkosi Over a year ago

@Pratham You post an array of the objects and the binder will convert and bind it to the list

PalakM Over a year ago

great..it worked.. model binder to the rescue.. is it possible to have List<Test> as a member of another class say Tests and then bind Tests in action method?

public class Tests     {         public Tests()         {             tests = new List<Test>();         }         public List<Test> tests;     }

MuM6oJuM6o · Accepted Answer · 2018-09-05 22:09:31Z

0

May be a trivial issue but I overlooked it and had spent a few hours trying to debug this issue.

Make sure your model that you're binding has its properties labelled as public.

answered Sep 5, 2018 at 22:09

MuM6oJuM6o

10710 bronze badges

Collectives™ on Stack Overflow

Bind an object to asp mvc controller from ajax request using asp.net core and Jquery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related