Post a json object to mvc controller with jquery and ajax

Question

I am trying to submit some values from a form to my mvc controller.

Here is my controller:

 //Post/ Roles/AddUser     [HttpPost]            public ActionResult AddUser(String json)     {         Log.submit(json);                     return View();     } 

here is the js:

<script> function submitForm() {      var usersRoles = new Array;     $("#dualSelectRoles2 option").each(function () {         usersRoles.push($(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);         }     }); } 

When I debug on the controller I get my parameter to be null? The console.log(usersRoles) gives me data.

What am I doing incorrectly?

How can I receive a json object in the controller?

Answer 1

I see in your code that you are trying to pass an ARRAY to POST action. In that case follow below working code -

<script src="~/Scripts/jquery-1.10.2.min.js"></script> <script>     function submitForm() {         var roles = ["role1", "role2", "role3"];          jQuery.ajax({             type: "POST",             url: "@Url.Action("AddUser")",             dataType: "json",             contentType: "application/json; charset=utf-8",             data: JSON.stringify(roles),             success: function (data) { alert(data); },             failure: function (errMsg) {                 alert(errMsg);             }         });     } </script>  <input type="button" value="Click" onclick="submitForm()"/> 

And the controller action is going to be -

    public ActionResult AddUser(List<String> Roles)     {         return null;     } 

Then when you click on the button -

Answer 2

instead of receiving the json string a model binding is better. For example:

[HttpPost]        public ActionResult AddUser(UserAddModel model) {     if (ModelState.IsValid) {         return Json(new { Response = "Success" });     }     return Json(new { Response = "Error" }); }  <script> function submitForm() {         $.ajax({         type: 'POST',         url: "@Url.Action("AddUser")",         contentType: "application/json; charset=utf-8",         dataType: 'json',         data: $("form[name=UserAddForm]").serialize(),         success: function (data) {             console.log(data);         }     }); } </script>