Post a json object to mvc controller with jquery and ajax

ajax, asp.net-mvc, html, javascript, jquery

Solution

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 -

Problem

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?

Original source