使用 jquery.ajax 将复杂类型（多个列表）返回到客户端

Question

我正在设计一个页面，它对服务器端的页面方法进行 ajax 调用（通过 jQuery.ajax）。
在服务器端，我有两个类：Agent 和 Channel。
在页面方法中，我想向客户端返回一个 List 和 List。
如何向客户端返回两个列表？应该将它们包装在一个类中，例如：

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

或者有更好的方法吗？
另外，我如何在客户端访问这些列表的项目？类似 foreach(var item in Agents) 但在客户端？

Answer 1

控制器代码

  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代码

                    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

容器类工作得很好。通常，您最终希望在顶层也包含一些额外的项目，然后容器类就很有用了。

如果您不喜欢额外的类，您可以使用匿名类型来避免容器类：

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

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

在客户端，它们将作为常规数组出现。您可以像这样访问它们：

$.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.
  }
});

Answer 3

正如 @igorw 所评论的，管理它的最佳方法是将它们包装在 JSON 对象中。最简单的方法是这样的...

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

这会将代码以 javascript 友好的格式发送回来，并将两个列表分成两部分，这样您就可以通过 javascript 单步执行其中任何一个，并且仍然知道哪个一个是哪个。

Answer 4

您遗漏了 jQuery.ajax 调用的详细信息...如果您可以提供更多详细信息，您可能会找到更好的答案。

假设您发出 GET 请求，您可以将列表包装在 JSON 对象中。 JSON 序列化所需的 badnwidth 比 HTML/XML 序列化对应物少得多。然后，在客户端访问方面，您将处理对象文字：

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

使用 JSON 结果，您可以使用标准 JavaScript for/in 语法来迭代代理和通道列表。

在不了解您的具体情况的情况下，不可能说是否有“更好”的方法，但听起来您已经走在正确的轨道上。