Jquery post to Action with Dictionary Parameter

Question

I am feeling dejavu, but I cannot find the answer to this: I have an array of objects that needs to look like this when inspecting a jQ $.post call:

limiter[0].Key
limiter[0].Value

so that it is mapped in the action

public ActionResult SomeAction(Dictionary<Guid, string> dictionary) { }

However, this javascript:

// Some Guid and Some Value
var param = [ { 'Key' : '00000000-0000-00000-000000', 'Value': 'someValue' } ];

$.post('/SomeController/SomeAction/',
       {
       dictionary: limiter,
       otherPostData: data
       },
       function(data) {
          callback(data);
       }
)

produces this when inspecting it in firebug:

limiter[0][Key] = someKey // Guid Value
limiter[0][Value] = someValue

This is in jq 1.4.2. I seem to remember some flag you need to set to render json a different way in jQ. Does this ring any bells?

Rhpositive

Answer 1

Try like this:

var param = {
    '[0].Key': '28fff84a-76ad-4bf6-bc6d-aea4a30869b1', 
    '[0].Value': 'someValue 1',

    '[1].Key': 'd29fdac3-5879-439d-80a8-10fe4bb97b18', 
    '[1].Value': 'someValue 2',

    'otherPostData': 'some other data'
};

$.ajax({
    url: '/Home/SomeAction/',
    type: 'POST',
    data: param,
    success: function (data) {
        alert(data);
    }
});

should map to the following controller action:

public ActionResult SomeAction(Dictionary<Guid, string> dictionary, string otherPostData) 
{ 
    ...
}

Sagitta

you forgot the parameter name, should be dictionary[0].key but this worked for me. I am still confused why the other way does not, but thanks for a helpful work around. – Rhpositive

Thanks! works great. Can loop through it too if you don't know ahead of time how many entries there are - param['[' + count + '].Key'] = loopObj.GUID; param['[' + (count++) + '].Value'] = loopObj.Value; – Festus

Answer 2

var dict = {}
dict["key1"] = 1
dict["key2"] = 2
dict["key3"] = 3

$.ajax({
        type: "POST",
        url: "/File/Import",
        data: dict,
        dataType: "json"
});

public void Import(Dictionary<string, int?> dict)
{
}

just send your obj as dataType: "json"

Avens

Answer 3

You can use this flag -

jQuery.ajaxSetting.traditional = true;

To get jQuery to post the data in a different format to the one you are seeing. See this question for further info -

Passing arrays in ajax call using jQuery 1.4

Missi

unfortunately the traditional flag does not help. when used it post [Object: Object] when viewed in firebug – Rhpositive

Answer 4

You will see the post param as limiter[0][Key] because jquery serializes the json data before it posts it. This is very well interpreted by the controller action and you get the required input in the action.

Reynaud

i am posting this because it is not being mapped, but i will update my code for more completeness to see if any one can help – Rhpositive

Answer 5

You can also use a list of objects and the result will be the same as what you wanted. This is a nice example.

http://www.mikesdotnetting.com/Article/96/Handling-JSON-Arrays-returned-from-ASP.NET-Web-Services-with-jQuery

Deuteronomy