jquery在mvc中填充下拉列表

Question

我正在尝试填充一个下拉列表，但我仍然对 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":"Aston Villa","Value":"3"}, {"Selected":false,"Text":"Cardiff City","Value":"20"},{"Selected":false,"Text":"Chelsea","Value":"4"},{ "Selected":false,"Text":"Crystal Palace","Value":"22"},{"Selected":false,"Text":"Everton","Value":"5"},{" Selected":false,"Text":"Fulham","Value":"6"},{"Selected":false,"Text":"Hull City","Value":"21"},{"Selected ":false,"文本":"利物浦","值":"7"},{"Selected":false,"Text":"Manchester City","Value":"8"},{"Selected":false,"Text":" Manchester United","Value":"9"},{"Selected":false,"Text":"Newcastle United","Value":"10"},{"Selected":false,"Text":" Norwich","Value":"11"},{"Selected":false,"Text":"Southampton","Value":"13"},{"Selected":false,"Text":"斯托克城","Value":"14"},{"Selected":false,"Text":"Sunderland","Value":"15"},{"Selected":false,"Text":"斯旺西城","值":"16"},{"Selected":false,"Text":"Tottenham Hotspur","Value":"17"},{"Selected":false,"Text":" West Bromwich Albion","Value":"18"},{"Selected":false,"Text":"West Ham United","Value":"19"}]

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

请问有什么帮助吗？

Answer 1

这一行是你的问题：

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

它必须是：

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

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

我认为你需要定义你想要做什么，但我会向你解释两种情况。

如果您的页面上只有 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);
}

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