sending data from js over wire to the controller

Question

Inside js function I'm creating javascript object which I then send to the mvc controller using ajax

var ab = { id: 100, name: "abc" }
$.ajax({
    type: "POST",
    url: "/home/dosomething",
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify(ab),
    success: function (result) {
        $("#myDiv").html(result);
        $("#showModal").modal("show");
    },
    error: function () {
        alert("error!");
    }
});

on server side I have

[HttpPost]
public ActionResult DoSomething(string ab) 
{
    ... ab is always null
}

I'm guessing that I should using some other data type as expected in controller method instead of string?

Answer 1

You need to use id and name in your action method

 [HttpPost]
 public ActionResult DoSomething(int id, string name) 
 {
    //code
 }

Answer 2

Try this:

JS:

var ab = { Id: 100, Name: "abc" }
$.ajax({
        type: "POST",
        url: "/home/dosomething",
        dataType: "json",
        data: JSON.stringify({ ab: ab }),
        success: function (result) {
            $("#myDiv").html(result);
            $("#showModal").modal("show");
        },
        error: function () {
            alert("error!");
        }
    });

Controller:

[HttpPost]
public ActionResult DoSomething(YourClass ab) 
{
  . . .
}

Model:

public class YourClass
{
    public int Id { get; set; }

    public string Name { get; set; }
}

Answer 3

Make a class of the JSON object, peg it as Serializable

[Serializable]
public class SomeClass
{
    public int id { get; set; }

    public string name { get; set; }
}

In your controller, you can now accept this as:

[HttpPost]
public ActionResult DoSomething([FromBody] SomeClass someclass){
  // code
}

Answer 4

var ab = { id: 100, name: "abc" }
$.ajax({
    type: "POST",
    url: "/home/dosomething",
    dataType: "json",
    contentType: "application/json",
    // what if you pass data like this
    data: JSON.stringify({ab:ab}),
    success: function (result) {
        $("#myDiv").html(result);
        $("#showModal").modal("show");
    },
    error: function () {
        alert("error!");
    }
});

Answer 5

If you want to send { id: 100, name: "abc" } as a string to the controller you need to change the data in ajax call to

data: JSON.stringify({ab:ab}),

if you want to send id and name as separate paramamters change your controller to

public ActionResult DoSomething(string id, string name) 
{

}

and your ajax call data to

data: '{ "id":" 100 ","name":"abc" }',