Jquery填充mvc中的下拉列表

我正在尝试填充下拉列表,我仍然对J查询非常困惑,因为我对它很新。

这是我的代码:

在控制器中:

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

在视图中:

  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按钮时,结果如下:

[{“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”},{ “选中”:假,“文字”:“水晶宫”,“价值”:“22”},{“选定”:虚假,“文字”:“埃弗顿”,“价值”:“5”},{“选中“:false”,文字“:”富勒姆“,”价值“:”6“},{”选定“:虚假,”文字“:”赫尔城市“,”价值“:”21“},{”已选中“: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” :假的, “文”: “诺威治”, “值”: “11”},{ “选择”:假的, “文”: “南安普敦”, “值”: “13”},{ “选择”:假的,“文字”:“斯托克城”,“价值”:“14”},{“选定”:虚假,“文字”:“桑德兰”,“价值”:“15”},{“选中”:虚假, “文字”:“斯旺西城市”,“价值”:“16”},{“选定”:虚假,“文字”:“托特纳姆热刺”,“价值”:“17”},{“选定”:虚假, “文字”:“西布罗姆维奇”,“价值 “:”18“},{”选定“:假,”文字“:”西汉姆联队“,”价值“:”19“}]

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

有什么帮助吗?

这行是你的问题:

 $("#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;} } } 

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

 public class LeagueViewModel { public int LeagueId {get; set; } public int SelectedTeamId {get; set;} public IEnumerable 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 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" })%> 

在那里你将有你需要填充的空下拉列表:

  

一旦你有了,你可以编写你的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); } 

再次,你需要编写自己的业务逻辑,让你的特定联盟的所有团队…