AJAX & ASP.NET MVC 3: How to pass a string parameter AND an array at the same time to Controller

Question

I have the following Controller signature:

public void DoSomething(string dialerJob, MyViewModel[] agentStates)

The viewModels represent form fields in an array (selected items in an HTML table). I figured out how to pass the form elements int as an array argument to the controller thanks to Robert Koritnik's .toDictionary() jQuery plug-in (http://erraticdev.blogspot.com/2010/12/sending-complex-json-objects-to-aspnet.html).

However, now I need to pass one additional string parameter (from a dropdown) to the controller and I cannot figure out how to make that work. I've tried various combinations, like:

 var job = $('#DialerJobs').attr('value');
 var data1 = $.toDictionary(data, "agentStates");

 $.ajax({
   url: "/Blending/ChangeOutboundJob",
   type: "POST",
   dataType: "application/JSON",
   data: {job, data1}
 });

I've also tried the following:

 var job = $('#DialerJobs').attr('value');
 var data1 = $.toDictionary(data, "agentStates");

 $.ajax({
   url: "/Blending/ChangeOutboundJob",
   type: "POST",
   dataType: "application/JSON",
   data: {dialerJob: job, agentStates: data1}
 });

But neither work.

If I remove the dialerJob parameter from the data to send, the agentStates populate in the controller correctly. And what gets sent looks like this:

agentStates[0].agentId=7654&agentStates[0].projectId=999&agentStates[0].stateId=1&agentStates

[0].subStateId=1&agentStates[1].agentId=9876&agentStates[1].projectId=999&agentStates

[1].stateId=1&agentStates[1].subStateId=1

But if I included the dialerJob, then what gets sent is:

dialerJob=SomeJob&agentStates[0][name]=[0].agentId&agentStates[0][value]=84&agentStates[1][name]=

[0].projectId&agentStates[1][value]=999&agentStates[2][name]=[0].stateId&agentStates[2][value]

=1&agentStates[3][name]=[0].subStateId&agentStates[3][value]=1&agentStates[4][name]=[1].agentId&agentStates

[4][value]=15884&agentStates[5][name]=[1].projectId&agentStates[5][value]=999&agentStates[6][name]=[1].stateId&agentStates[6][value]=1&agentStates[7][name]=[1].subStateId&agentStates[7][value]=1

Which is all messed up...

Answer 1

You could use a JSON request:

$.ajax({
    url: '@Url.Action("ChangeOutboundJob", "Blending")',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ 
        dialerJob: 'job', 
        agentStates: [
            { property1: 'value 1', property2: 'value 2' }, 
            { property1: 'value 3', property2: 'value 4' } 
        ] 
    }),
    success: function (result) {
        // TODO: process the results
    }
});

This will successfully map to the following controller action:

public void DoSomething(string dialerJob, MyViewModel[] agentStates)

where MyViewModel is defined like this:

public class MyViewModel
{
    public string Property1 { get; set; }
    public string Property2 { get; set; }
}

Remark: the JSON.stringify method is natively built into all modern browsers. If you need to support legacy browsers you need to include the json2.js script into your page.