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 + "");
           });
       });
   });

}）;

点击Get Teams按钮时，结果如下：

[{ “已选择”：假， “文本”： “阿森纳”， “值”： “1”}，{ “已选择”：假， “文本”：“阿斯顿别墅 “ ”值“： ”3“}，{ ”选择“：假的， ”文字“：” 夫城市 “ ”值“： ”20“}，{ ”选择“：假的， ”文“： ”切尔西“， ”值“： ”4“}，{ ”选择“：假的， ”文“：” 水晶宫”， “值”： “22”}，{ “选择”：假的， “文”： “埃弗顿”， “值”： “5”}，{ “选择”：假的， “文”： “富勒姆” ， “值”： “6”}，{ “选择”：假的， “文”：“赫尔城市 “ ”值“： ”21“}，{ ”选择“：假的， ”文“： ”利物浦“， ”值“： ”7“}，{ ”选择“：假的， ”文“：” 曼彻斯特城市 “ ”值“： ”8“}，{ ”选择“：假的， ”文“：” 曼彻斯特美国 “ ”值“： ”9“}，{ ”选择“：假的， ”文“：” 纽卡斯尔美国”， “值”： “10”}，{ “选择”：假的， “文”： “诺威治”， “值”： “11”}，{ “选择”：假的， “文”： “南安普敦” ， “值”： “13”}，{ “选择”：假的， “文”：“斯托克城市 “ ”值“： ”14“}，{ ”选择“：假的， ”文“： ”桑德兰“， ”值“： ”15“}，{ ”选择“：假的， ”文“：” 斯旺西城市 “ ”值“： ”16“}，{ ”选择“：假的， ”文“：” 热刺 Hotspur“，”Value“：”17“}，{”Selected“：false，”Text“：”West Bromwich Albion“，”Value“：”18“}，{”Selected“：false，”Text“：”West Ham 联合”， “值”： “19”}]

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

请帮忙吗？

Answer 1

这一行是你的问题：

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

需要：

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

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

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

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

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;}
}

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

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

再次，您需要编写自己的业务逻辑，让您了解特定联盟中的所有团队...

Jquery填充mvc中的下拉列表

1 个答案: