How to compose and post a JSON object from jQuery to an MVC3 action method?

Question

I have the following JavaScript code that gets the Id property (Guid) from every user row in a Kendo UI grid. Now I am wondering how best to compose these Id's and the owner roleId into a JSON object that I can pass to an MVC3 action method. Versus my silly string concat.

$("#command-add-selected").click(function () {
    var json = "roleId: '51FC554E-353C-4D55-BE52-1B4BF9D2F17F', users: [";
    var avail = $("#availableUsersGrid").data().kendoGrid._data;
    for (var i = 0; i < avail.length; i++) {
        json += "{ Id: '" + avail[i].Id + "'},";
    }
    json = json.slice(0, -1);
    json += "]";
    alert(json);
    return false;
});

The action method can be GET or POST and need not return any value (this is another puzzle here, no returned view). All it does is domain updates that are fetched by other ajax code subsequent to the above code.

How can I pass the above type JSON to an action method essentially of void return type?

EDIT: This question answered the minor part of my question nicely, with how to dynamically add items to an array with push.

@sakhunzai No, rather how to dynamically build the object I call stringify on. then, how to consume that object in an action. — ProfK, Apr 13 '12 at 19:32
may be your are looking for this: http://stackoverflow.com/questions/2277405/json-stringify-missing-from-jquery-1-4-1 , I might not be able to help in MVC3 part , but if you can share the consumer method , I might be helpful. — sakhunzai, Apr 13 '12 at 19:57

Parv Sharma · Accepted Answer · 2012-04-14T22:56:40.207

1.first of all u dont need to create the full json ur self use JSON.Stringify() method to change the javascript object to JSON string.
2.after u have created the JSON string u can GET or POST it to any normal method in any MVC Controller of visibility public. even if the signature of the action method is like public ActionResult MehodName(string jsonString) u can always return null.
3. u can use built in JavaScriptSerializer class in System.Web.Script.Serialization namespace to deserialize the json string u recieve in the action to create an object with the same propertiese
Edit:-
make a javascript array names users then inside the for loop use .push() function of javascript to insert the objects like this

var users = [];
for(something)
{
var user = {"Id":"YOUR ID VALUE"};
users.push(user)
}
var objectToSerialize = {"roleId":"YOUR ROLE GUID","Users":users};
var jsonString = JSON.stringify(objectToSerialize);

Edit 2:-
so going by your previous comments u dont want that u need to deseralize the whole JSON object. going by your object architecture even if ur action method has a signature like this

public ActionResult GetUsersByRole(Users users)
{
//some code 
}

and Users class like this one

class Users
{
public string RoleId{get; set;}
public User[]{get; set;}
}

and User class like this

class User
{
string Id{get; set;}
}

it would automatically bind property with your complex users object

OK, but how would I dynamically add id's to an array on the soon-to-be-json object without the concat? — ProfK, Apr 13 '12 at 19:28
dont forget to set "Mark As Ans" if this answered ur ques. this will help others too — Parv Sharma, Apr 13 '12 at 19:46
Thanks @Parv, +1 for some useful code and tips, but I would prefer to somehow use built-in model binding and a strongly typed action method to fully answer my question. — ProfK, Apr 14 '12 at 04:49

score 1 · Answer 2 · answered Apr 13 '12 at 19:36

In conjunction with Parv Sharma's solution:

function User(id) { this.Id=id; }

$("#command-add-selected").click(function () {

    var avail = $("#availableUsersGrid").data().kendoGrid._data;
    var userArray = array();
    for (var i = 0; i < avail.length; i++) {
        userArray.push(new User(avail[i].Id));
    }
    var obj = {roleId:'51FC554E-353C-4D55-BE52-1B4BF9D2F17F',users:userArray};
    alert(JSON.stringify(obj));
    return false;
});

Thanks, it was mainly `push` I needed for this side of things. — ProfK, Apr 13 '12 at 19:41

score 0 · Answer 3 · answered Apr 13 '12 at 19:10

0

Should just be able to use Url.Action("NameofAction","nameofcontroller", json); You may have to add an AcceptVerbs attribute to the action method as well, depending on if you want it to be a GET or a POST. As far as the building part goes, I would suggest not using strings at all. Jsons are objects, not strings, so I would go ahead and build a "users" object with your foreach loop and then throw that object into your json return object.

edit: forgot to mention stringify. Yeah. Use that.

answered Apr 13 '12 at 19:10

Phillip Schmidt

8,805
3
43
67

OK, in avoiding strings, what do I bind to in the controller? – ProfK Apr 14 '12 at 04:32
you'd just give your json object that you built as an argument to Url.Action() (i can't remember the exact overload for it-- i think its Url.Action(Action,Controller,Argument) ) and then the corresponding action in your controller should accept a single argument of whatever type you need (provided that you set up your JSON object right), and then youll be able to do the binding from the controller – Phillip Schmidt Apr 20 '12 at 19:03

How to compose and post a JSON object from jQuery to an MVC3 action method?

3 Answers3