How to pass JSON object to controller method in ASP.NET MVC 4

Question

I have an HTML table and would like to pass the content of the table into a controller method. I use JQuery to create an array then turn them into a JSON object.

                           var array_MACAddress = [];
                           var $MacAddress = $(".macaddress");

                           for (var i = 0, len = $MacAddress.length; i < len; i++) {
                               var $MAC = $($MacAddress[i]);
                               console.log($MAC.text()); ////for testing only!!!
                               array_MACAddress.push({
                                   key: $MAC.data("key"),
                                   value: $MAC.text()
                               });
                           };

(the code above it to create an array of a column called "MACAddress"), then I use the code below to turn them into JSON object

var json_MACAddress = json.stringify(array_MACAddress);

How do I pass the JSON object into the controller method?

public ActionResult ActivationManagement(String jsonData)

is it possible to pass the json object as the body of a post request? — Neil S, Aug 20 '13 at 23:57
are you hoping to use ajax to pass the data back to the controller? — Neil S, Aug 21 '13 at 00:01
I would suggest what neil suggested. Create a type similar as what you are passing from view to controller and everything should work as expected. — qamar, Aug 21 '13 at 02:22
If your keys are unique, you can skip custom object creation, and can bind the data in `IDictionary` in action method. — shakib, Aug 21 '13 at 03:21
hey qamar, I am new to MVC framework so I don't quite get what you mean by creating a type similar to the one I'm passing from view to controller. Can you give me an example? Thank you — user2701646, Aug 21 '13 at 16:13

Marko · Answer 1 · 2013-08-21T02:25:32.297

To make the AJAX request you can do this:

$("#someDomElement").click(function() {
   $.ajax({
     url: "@Url.Content("~/YourController/ActivationManagement")",
     data: array_MACAddress,
     type: 'POST',
     contentType: 'json'
   });
});

You will need to specify a view model that will match your ajax model that contains your mac addresses:

public class MacAddress
{
   public string Key { get; set; }
   public string Value { get; set; }
}

Since you effectively have a list of these objects you need the define the controller action as follows:

[HttpPost]
public ActionResult ActivationManagement(List<MacAddress> macAddresses)
{
   // Your logic here...
}

and MVC model binder will automatically map it out to your model since in contentType in you AJAX call you specified that the data you're sending is of JSON type.

My advice to you is to insta Fiddler (http://fiddler2.com/) which will help you analyze each request made so that you can clearly see if there is a problem and how to resolve it.

score 0 · Answer 2 · answered Aug 21 '13 at 00:08

so you can either use a webapi, or if I remember correctly, you can just add [HttpPost] to the line above your controller method:

[HttpPost]
public ActionResult ActivationManagement(String jsonData)

now the body of your ajax request will need to be a string, and you'll have to convert the string to an object you can manipulate on the server side, so if you know what to expect from the JSON object, you might consider defining your own custom object and then letting MVC parse the body to your custom object.

e.g.

public CustomObject ()
{
    public string id {get;set;}
    public string address {get;set;}
}

...

[HttpPost]
public ActionResult ActivationManagement(CustomObject jsonData)

Sorry, I'm a little rusty on MVC, but I think this is the general idea.

How to pass JSON object to controller method in ASP.NET MVC 4

2 Answers2

Linked