Returning complex types (multiple Lists) to client side using jquery.ajax

Question

I'm designing a page which makes an ajax call (via jQuery.ajax) to a page method on the server side.
On the server side, I have two classes: Agent and Channel.
In the page method, I'd like to return a List<Agent> and a List<Channel> to the client side.
How can I return two lists to client side? should wrap them up in one class like:

public class ReturnData
  {
     public List<Agent> Agents{ get; set; }
     public List<Channel> Channels{ get; set; }
  }  

Or is there a better way?
Also, How can I access to these lists' items in client side? Something like foreach(var item in Agents) but in client side?

Answer 1

Controller code

  public ActionResult SomeAction()
    {
        List<Agent> collectionOfAgents = //get your collection
        List<Channels> collectionOfChannels = //get your collection
        var jsonData = new
                           {
                                   Agents =collectionOfAgents,
                                   Channels = collectionOfChannels 

                           };
        return Json(jsonData);
    }

Jquery code

                    jQuery.ajax({
                            url: '/Controller/SomeAction',
                            type: "POST",
                            dataType: "json",
                            success: function (data) {
                                var collectionOfAgents = data.Agents;
                                //iterate over agents
                                for(var a in collectionOfAgents)
                                {
                                  alert(collectionOfAgents[a]);
                                }
                                var collectionOfChannels = data.Channels;
                                //iterate over channels 
                                for(var c in collectionOfChannels)
                                {
                                  alert(collectionOfChannels[c]);
                                }
                            }
                        });

Answer 2

As was commented by @igorw, the best way to manage it would be to wrap them up in a JSON object. Easiest way to do this would be something like...

return Json(new {agent = Agents, channel = Channels});

This sends you the code back in a javascript friendly format, and keeps the two lists split apart into 2 pieces, so you can step through either of them by javascript, and still know which one is which.

Answer 3

You left out the details of your jQuery.ajax call... you may find a better answer if you can provide more detail.

Assuming you're making a GET request, you can wrap your lists in a JSON object. JSON serialization will require far less badnwidth than HTML/XML serialization counterparts. Then, in terms of client-side access, you'll be dealing with an object literal:

{  
    Agents: [ {name:"Jane"}, {name: "John"} ],
    Channels: [ {someValue: 123}, {someValue: 456} ]
}

Using your JSON result you can use standard JavaScript for/in syntax to iterate over the Agents and Channels lists.

It's not possible to say whether there's a "better" approach without knowing the details of your situation, but it sounds like you're already on the right track.

Answer 4

The container class works well enough. Often, you end up wanting to include a few extra items at the top level too, and then the container class is useful.

If you don't like the extra class, you can use an anonymous type to avoid the container class:

public static object GetAgentsAndChannels() {
  List<Agent> agents = GetListOfAgents();
  List<Channel> channels = GetListOfChannels();

  return new { Agents: agents, Channels, channels };
}

On the client-side, they'll be present as regular arrays. You can access them like this:

$.ajax({
  url: 'YourPage.aspx/GetAgentsAndChannels',
  type: 'POST',
  dataType: 'json',
  contentType: 'application/json',
  success: function(response) {
    var agentsAndChannels = response.d;

    var numberOfAgents = agentsAndChannels.Agents.length;
    var numberOfChannels = agentsAndChannels.Channels.length;

    var firstAgent = agentsAndChannels.Agents[0];

    var firstChannelName = agentsAndChannels.Channels[0].Name;

    // Etc.
  }
});