2

我正在尝试填充一个下拉列表，我仍然对 J 查询感到非常困惑，因为我对它很陌生。

这是我的代码：

在控制器中：

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult GetTeams(StatisticModel model)
    {
        StatisticModel newModel = new StatisticModel(model.leagueId);
        var teams = newModel.getTeams;
        return Json(teams);
    }

鉴于：

<%: Html.DropDownListFor(model => model.teamIdHome, Model.getTeams, new { @class = "dropdownlistStyle" })%>

jQuery：

$(function() {
$(".dropdownlistStyle").change(function () {
    $.getJSON("/Admin/GetTeams", { FooId: $(".dropdownlistStyle").val() },
       function(fooList) {
           $("#NameList").empty();
           $.each(fooList, function(i, foo) {
               $("#NameList").append(""+ foo.Name + "");
           });
       });
   });

});

在单击“获取团队”按钮时，结果如下：

[{"Selected":false,"Text":"Arsenal","Value":"1"},{"Selected":false,"Text":"阿斯顿维拉","Value":"3"}, {"Selected":false,"Text":"Cardiff City","Value":"20"},{"Selected":false,"Text":"Chelsea","Value":"4"},{ "选中":false,"文本":"水晶宫","值":"22"},{"选中":false,"文本":"埃弗顿","值":"5"},{"已选":false,"Text":"富勒姆","Value":"6"},{"已选":false,"Text":"赫尔城","Value":"21"},{"已选“：假，”文本“："Liverpool","Value":"7"},{"Selected":false,"Text":"Manchester City","Value":"8"},{"Selected":false,"Text":"曼联","Value":"9"},{"Selected":false,"Text":"纽卡斯尔联","Value":"10"},{"Selected":false,"Text":"诺里奇","Value":"11"},{"Selected":false,"Text":"Southampton","Value":"13"},{"Selected":false,"Text":"斯托克城","Value":"14"},{"Selected":false,"Text":"Sunderland","Value":"15"},{"Selected":false,"Text":"斯旺西市","Value":"16"},{"Selected":false,"Text":"托特纳姆热刺队","Value":"17"},{"Selected":false,"Text":" West Bromwich Albion","Value":"18"},{"Selected":false,"Text":"West Ham United","Value":"19"}]

我确信我的 jquery 是不正确的，因为我是从论坛的样本中得到的。

请问有什么帮助吗？

4

1 回答 1

5

这条线是你的问题：

$("#NameList").append(""+ foo.Name + "");

它必须是：

$("#NameList").append(""+ foo.Text + "");

因为您尝试显示的团队名称位于 JSON 字符串中的 TEXT 属性下...

我认为你需要定义你想要做什么，但我会向你解释 2 个场景。

如果您的页面上只有 1 个下拉列表应该向您显示足球队的名称，那么您不需要使用 AJAX 执行此操作。您可以在控制器操作中获取团队列表，然后将该列表绑定到视图中的下拉列表。所以假设你有一个这样的域模型：

namespace ProjectName.Models
{
  public class Team
  {
     public int TeamId {get; set; }
     public string TeamName {get; set;}
  }
}

你有一个这样的视图模型：

public class LeagueViewModel
{
   public int LeagueId {get; set; }
   public int SelectedTeamId {get; set;}
   public IEnumerable<ProjectName.Models.Team> Teams {get; set;}
}

然后在你的控制器中你有一个这样的动作：

public ActionResult GetTeams()
{
    var model = new LeagueViewModel();
    var model.Teams = TeamsBusinessLogic.GetTeams();
    return ActionResult(model);
}

其中 TeamsBusinessLogic 是您的业务逻辑类的一个实例，它从数据库中获取团队列表（您必须自己编写，因为我不知道您使用的是哪种类型的数据访问层）。完成此设置后，在您看来，您所需要的只是：

@model LeagueViewModel

这指定了模型的底层类型（您需要在此处引用视图模型的完整命名空间）。那么你只需要：

<%: Html.DropDownListFor(model => model.SelectedTeamId, (SelectList)Model.Teams, new { @class = "dropdownlistStyle" })%>

现在下拉列表将填充从您的控制器操作中获取的团队列表。

第二种情况是当您有 2 个下拉列表并更改其中一个中的值时会触发另一个下拉列表中的加载。这是您在第一次指定制造商时在销售汽车的网站上看到的，然后根据您的选择，品牌和型号下拉列表会发生变化。对于这种情况，您将需要类似于您编写的 ajax 加载器。所以再次假设我们有一个这样的域模型：

namespace ProjectName.Models
{
  public class Team
  {
     public int TeamId { get; set; }
     public string LeagueId { get; set; }
     public string TeamName { get; set; }
  }

  public class League
  {
     public int LeagueId { get; set; }
     public string LeagueName { get; set; }
  }
}

您还需要一个像这样的视图模型：

public class LeagueViewModel
{
   public int SelectedLeagueId {get; set;}
   public IEnumerable<ProjectName.Models.League> LeaguesList {get; set;}
}

一旦你有了这些，你需要在你的控制器中执行一个动作，将可用的联赛填充到你的 LeagueViewModel 中：

public ActionResult Leagues()
{
    var model = new LeagueViewModel();
    var model.LeaguesList = LeagueBusinessLogic.GetLeagues();
    return ActionResult(model);
}

所以现在在您看来，您在顶部有以下内容：

@model LeagueViewModel

接着

<%: Html.DropDownListFor(model => model.SelectedLeagueId, (SelectList)Model.LeaguesList, new { @class = "dropdownlistStyle" })%>

在那里的某个地方，您将拥有需要填充的空下拉列表：

<select id="LeagueTeams"></select>

一旦你有了，你可以编写你的 JQuery 如下：

$(function() {
   $(".dropdownlistStyle").change(function () {
   $.getJSON("/Admin/GetTeams", { LeagueId: $(".dropdownlistStyle").val() },
      function(results) {
         $("#LeagueTeams").empty();
         $.each(results, function(i, team) {
            $("#LeagueTeams").append(""+ team.TeamName+ "");
         });
      });
  });

所以基本上你的 JQuery 将在名为 AdminController 的控制器中调用服务器上名为 GetTeams 的方法，并将所选联赛的 ID 传递给它。控制器操作将返回一个 JSON 团队列表。然后，您循环浏览此团队列表并将它们附加到选择列表中。

您现在需要编写的只是让您获得团队的实际控制器操作：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetTeams(int LeagueId)
{
    var model = TeamsBusinessLogic.getTeams(LeagueId);
    return Json(model);
}

再次，您将需要编写自己的业务逻辑，让您获得特定联赛中的所有球队......

于 2013-06-14T14:15:53.483 回答