How to get JSON as parameter of MVC 5 method

Question

I try to scan all day through the Internet, trying to get a JSON object in the action controller.

What is the right or easy way to do this?

I tried the following: 1:

//Post/ Roles/AddUser [HttpPost] public ActionResult AddUser(String model) { if(model != null) { return Json("Success"); }else { return Json("An Error Has occoured"); } } 

Which gave me a null value at my input.

2:

  //Post/ Roles/AddUser [HttpPost] public ActionResult AddUser(IDictionary<string, object> model) { if(model != null) { return Json("Success"); }else { return Json("An Error Has occoured"); } } 

which gives me a 500 error on the jquery side that is trying to send a message to it? (this means that he did not attach correctly).

here is my jQuery code:

 <script> function submitForm() { var usersRoles = new Array; jQuery("#dualSelectRoles2 option").each(function () { usersRoles.push(jQuery(this).val()); }); console.log(usersRoles); jQuery.ajax({ type: "POST", url: "@Url.Action("AddUser")", contentType: "application/json; charset=utf-8", dataType: "json", data: JSON.stringify(usersRoles), success: function (data) { alert(data); }, failure: function (errMsg) { alert(errMsg); } }); } 

All I want to do is get my JSON object in my mvc action?

Answer 1

Unfortunately, the dictionary has always had a problem with model binding in MVC. Read the full story here . Therefore, we must create our own own connecting device in order to get the dictionary as a parameter for the action of our controller.

To solve your requirement, here is a working solution -

First create your ViewModels as follows. PersonModel may have a list of RoleModels.

 public class PersonModel { public List<RoleModel> Roles { get; set; } public string Name { get; set; } } public class RoleModel { public string RoleName { get; set;} public string Description { get; set;} } 

Then do an index action that will serve the main index -

  public ActionResult Index() { return View(); } 

Index view will have the following jQuery AJAX POST operation -

 <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script> $(function () { $('#click1').click(function (e) { var jsonObject = { "Name" : "Rami", "Roles": [{ "RoleName": "Admin", "Description" : "Admin Role"}, { "RoleName": "User", "Description" : "User Role"}] }; $.ajax({ url: "@Url.Action("AddUser")", type: "POST", data: JSON.stringify(jsonObject), contentType: "application/json; charset=utf-8", dataType: "json", error: function (response) { alert(response.responseText); }, success: function (response) { alert(response); } }); }); }); </script> <input type="button" value="click1" id="click1" /> 

Messages about index actions in AddUser action -

  [HttpPost] public ActionResult AddUser(PersonModel model) { if (model != null) { return Json("Success"); } else { return Json("An Error Has occoured"); } } 

So, now that the message is occurring, you can get all the published data in the action model parameter.

Answer 2

There are a couple of questions here. First, you need to bind your JSON object to the model in the controller. This is done by changing

 data: JSON.stringify(usersRoles), 

to

 data: { model: JSON.stringify(usersRoles) }, 

Secondly, you are not binding types correctly to your jquery call. If you remove

 contentType: "application/json; charset=utf-8", 

it will inherently bind to a string.

All together, use the first ActionResult method and the following jquery ajax call:

  jQuery.ajax({ type: "POST", url: "@Url.Action("AddUser")", dataType: "json", data: { model: JSON.stringify(usersRoles) }, success: function (data) { alert(data); }, failure: function (errMsg) { alert(errMsg); } }); 

Answer 3

You send an array of strings

 var usersRoles = []; jQuery("#dualSelectRoles2 option").each(function () { usersRoles.push(jQuery(this).val()); }); 

Change model type accordingly

  public ActionResult AddUser(List<string> model) { } 

Answer 4

fwiw, this did not work for me until I got this in ajax call:

 contentType: "application/json; charset=utf-8", 

using Asp.Net MVC 4.