Jquery在mvc中填充下拉列表

Question

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

这是我的代码:

在 Controller 中:

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

View 中:

<%: 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,"Text":"Liverpool","Value":"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":"Stoke City","Value":"14"},{"Selected":false,"Text":"Sunderland","Value":"15"},{"Selected":false,"Text":"Swansea City","Value":"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 属性下...

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

如果您的页面上只有 1 个下拉列表，该列表应该向您显示足球队的名称，那么您不需要使用 AJAX 来执行此操作。您可以在 Controller 操作中获取团队列表，然后将该列表绑定(bind)到 View 中的下拉列表。假设您有一个像这样的域模型:

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

你有一个像这样的 View 模型:

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

然后在你的 Controller 中你有一个像这样的操作:

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

其中 TeamsBusinessLogic 是业务逻辑类的实例，用于从数据库中获取团队列表(您必须自己编写此内容，因为我不知道您使用什么类型的数据访问层)。一旦你完成了这个设置，那么在你看来你所需要的就是:

@model LeagueViewModel

这指定了模型的基础类型(您需要在此处引用 View 模型的完整命名空间)。那么您所需要的就是:

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

现在，下拉列表将填充从 Controller 操作中获取的团队列表。

第二种情况是当您有 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; }
  }
}

您还需要一个像这样的 View 模型:

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

一旦你有了这些，你需要在 Controller 中执行一个操作，将可用的联赛填充到你的 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 的 Controller 中调用服务器上名为 GetTeams 的方法，并向其传递所选联盟的 ID。 Controller 操作将返回团队的 JSON 列表。然后，您循环浏览此团队列表并将它们附加到选择列表中。

您现在需要编写的就是让您加入团队的实际 Controller 操作:

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

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