Sending a JSON array to be received as a Dictionary

Question

I have a method with the following signature:

public ActionResult RenderFamilyTree(string name, Dictionary<string, string> children)

I'm trying to call it from javascript using jQuery like this:

$('#div_render').load(
    "<%= Url.Action("RenderFamilyTree") %>", 
    { 
         'name': 'Raul',
         [
             {'key':'key1','value':'value1'},
             {'key':'key2','value':'value2'}
         ] 
    }, 
    function() {                
        alert('Loaded');
    }
);

Am I missing something to get this to work?

Answer 1

There is a syntax error in the javascript object literal. The two key/value pairs in the array should be assigned to a named property alongside "name" (ex: "myProperty").

$('#div_render').load(
"<%= Url.Action("RenderFamilyTree") %>", 
{ 
     name: 'Raul',
     myProperty: [
         {key:'key1',value:'value1'},
         {key:'key2',value:'value2'}
     ] 
}, 
function() {                
    alert('Loaded');
}

);

Answer 2

The default model binder supports advanced scenarios such as binding to lists and dictionaries. In order for this to work you need to send the following request:

children[0].Key=key1&children[0].Value=value1&
children[1].Key=key2&children[1].Value=value2&
name=Raul

So you could either write your own custom binder or format your query parameters in this way. I am not sure that jQuery supports this out of the box.