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?

ramiramilu · Accepted Answer · 2014-02-06 09:50:55Z

30

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 -

enter image description here

edited Feb 6, 2014 at 9:50

answered Feb 6, 2014 at 8:17

ramiramilu

17.2k6 gold badges51 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick.Mc Over a year ago

I spent a while trying to get this model bound method to work but my controller parameter only ever got null. I discovered I had a javascript bug that added another item with a single column only. Make absolutely sure your passed JSON matches the model perfectly. If it doesn't, you'll just get a null parameter without any clue or message

Shibbir Ahmed · Accepted Answer · 2014-02-05 07:46:34Z

11

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>

answered Feb 5, 2014 at 7:46

Shibbir Ahmed

1,35013 silver badges21 bronze badges

4 Comments

Zapnologica Over a year ago

What do I make the UseerAddModel ?

Zapnologica Over a year ago

But I am submitting a json object. not multiple variables?

Shibbir Ahmed Over a year ago

not sure why you have to do in that way. anyway, can you please show the html? whats in the usersRoles array?

Shibbir Ahmed Over a year ago

try to remove the contentType from your ajax function and use data: {"json": JSON.stringify(usersRoles)}

David Ulvmoen · Accepted Answer · 2016-09-28 13:53:59Z

What am I doing incorrectly?

You have to convert html to javascript object, and then as a second step to json throug JSON.Stringify.

How can I receive a json object in the controller?

View:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://raw.githubusercontent.com/marioizquierdo/jquery.serializeJSON/master/jquery.serializejson.js"></script>

var obj = $("#form1").serializeJSON({ useIntKeysAsArrayIndex: true });
$.post("http://localhost:52161/Default/PostRawJson/", { json: JSON.stringify(obj) });

<form id="form1" method="post">
<input name="OrderDate" type="text" /><br />
<input name="Item[0][Id]" type="text" /><br />
<input name="Item[1][Id]" type="text" /><br />
<button id="btn" onclick="btnClick()">Button</button>
</form>

Controller:

public void PostRawJson(string json)
{
    var order = System.Web.Helpers.Json.Decode(json);
    var orderDate = order.OrderDate;
    var secondOrderId = order.Item[1].Id;
}

Collectives™ on Stack Overflow

Post a json object to mvc controller with jquery and ajax

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related