jQuery的填充下拉列表中的MVC [英] Jquery populate drop down list in mvc
问题描述
我试图填充一个下拉列表中我仍然很困惑Ĵ查询，因为我很新的吧。
I am trying to populate a drop down list an I am still very confused about J query as I am very new to it.
这是我的code：
在控制器：
[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的：
the jquery:
$(function() {
$(".dropdownlistStyle").change(function () {
$.getJSON("/Admin/GetTeams", { FooId: $(".dropdownlistStyle").val() },
function(fooList) {
$("#NameList").empty();
$.each(fooList, function(i, foo) {
$("#NameList").append(""+ foo.Name + "");
});
});
});
}）;
在这个获取小组按钮点击时的那一刻是结果：
At the moment when clicking on the Get Teams button this is the result:
[{选择：假的，文：阿森纳，值：1}，{选择：假的，文：阿斯顿
山庄，值：3}，{选择：假的，文字：夫
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
城市，值：8}，{选择：假的，文：曼彻斯特
美，值：9}，{选择：假的，文：纽卡斯尔
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
城市，值：16}，{选择：假的，文：托特纳姆热刺
热刺，值：17}，{选择：假的，文：西布朗
阿尔比恩，值：18}，{选择：假的，文：西汉姆
美，值：19}]
[{"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是不正确的，我得到了从一个论坛的样本。
I am sure that my jquery is incorrect as I got that from a sample from a forum.
任何帮助吗？
推荐答案
这行是你的问题：
$("#NameList").append(""+ foo.Name + "");
它需要是：
$("#NameList").append(""+ foo.Text + "");
因为你试图显示球队的名字是在Text属性在你的JSON字符串...
since the name of the team you are trying to display is under TEXT property in your JSON string...
我认为你需要定义你想要做什么，但我会向你解释2方案。
I think you need to define what you're trying to do but I will explain to you 2 scenarios.
如果你只是有1下拉网页上的列表，它应该显示你的足球队的名称，然后你不需要用AJAX来做到这一点。你可以让你的球队的名单在你的控制器动作，然后该列表绑定到中的下拉查看列表。因此，可以说你有一个领域模型是这样的：
If you just have 1 drop down list on your page which is supposed to display to you the name of the soccer teams then you don't need to do this with AJAX. You can get the list of your teams in your controller action and then bind that list to your drop down list in the view. So lets say you have a domain model like this:
namespace ProjectName.Models
{
public class Team
{
public int TeamId {get; set; }
public string TeamName {get; set;}
}
}
和你有一个视图模型是这样的：
and you have a View model like this:
public class LeagueViewModel
{
public int LeagueId {get; set; }
public int SelectedTeamId {get; set;}
public IEnumerable<ProjectName.Models.Team> Teams {get; set;}
}
然后在您的控制器，你有一个这样的动作：
then in your controller you have an action like this:
public ActionResult GetTeams()
{
var model = new LeagueViewModel();
var model.Teams = TeamsBusinessLogic.GetTeams();
return ActionResult(model);
}
其中TeamsBusinessLogic是提取从数据库强队之列的业务逻辑类的一个实例（你将不得不因为我有你使用的是什么类型的数据访问层的不知道该写你自己的）。一旦你有这样的设置，然后在您的视图所有你需要的是：
where TeamsBusinessLogic is an instance of your business logic class that fetches the list of teams from the database (you will have to write this on your own since I have no idea what type of data access layer are you using). Once you have this setup then in your view all you need is:
@model LeagueViewModel
本规定的基本类型的模型（你需要在这里引用视图模型的完整的命名空间）。然后，所有你需要的是：
this specifies the underlying type of your model (you need to reference full namespace of the view model here). Then all you need is:
<%: Html.DropDownListFor(model => model.SelectedTeamId, (SelectList)Model.Teams, new { @class = "dropdownlistStyle" })%>
现在在下拉列表中会从你的控制器动作中获取的强队之列填充。
Now the drop down list will populate with the list of teams that were fetched from your controller action.
第二情况是，当你有2下拉列表，并在其中的一个变化值触发另一加载。这是你在出售汽车网站看到的，当你第一次指定生产厂家，然后根据您的选择品牌和型号下拉列表改变。对于这种情况，你需要类似你写什么的AJAX加载程序。所以，再一次假设我们有一个域模型是这样的：
The 2nd scenario is when you have 2 drop down lists and changing the value in one of them trigger the loading in another. This is what you see on the sites that sell cars when you 1st specify the manufacturer and then based on your selection the make and model drop down lists change. For this scenario you will need the ajax loader similar to what you have written. So again suppose we have a domain models like this:
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; }
}
}
您也需要像这样的视图模型：
You will also need a view model like this one:
public class LeagueViewModel
{
public int SelectedLeagueId {get; set;}
public IEnumerable<ProjectName.Models.League> LeaguesList {get; set;}
}
一旦你拥有了这些，你需要在你的控制器，可填充联赛到LeagueViewModel一个动作：
once you have those you need an action in your controller that populates available leagues into your LeagueViewModel:
public ActionResult Leagues()
{
var model = new LeagueViewModel();
var model.LeaguesList = LeagueBusinessLogic.GetLeagues();
return ActionResult(model);
}
所以现在在你的查看您在顶部以下内容：
so now in your view you have the following at the top:
@model LeagueViewModel
然后
<%: Html.DropDownListFor(model => model.SelectedLeagueId, (SelectList)Model.LeaguesList, new { @class = "dropdownlistStyle" })%>
和在那里的某个地方，你将有你的空下拉需要填充列表：
and somewhere in there you will have your empty drop down list that needs to be populated:
<select id="LeagueTeams"></select>
一旦你有，你可以写你的JQuery如下：
once you have that you can write your JQuery as following:
$(function() {
$(".dropdownlistStyle").change(function () {
$.getJSON("/Admin/GetTeams", { LeagueId: $(".dropdownlistStyle").val() },
function(results) {
$("#LeagueTeams").empty();
$.each(results, function(i, team) {
$("#LeagueTeams").append(""+ team.TeamName+ "");
});
});
});
所以基本上你的jQuery将envoke服务器称为GetTeams称为AdminController控制器上的方法，并通过它选择的联盟ID。控制器动作将返回球队的JSON列表。然后，通过团队的这个列表循环，并将其追加到选择列表中。
so basically your JQuery will envoke a method on the server called GetTeams in the controller called AdminController and pass it the ID of the selected League. The controller action will return a JSON list of teams. You then loop through this list of teams and append them to the select list.
所有你需要现在写的是让你的团队实际控制的行动：
All you need to write now is the actual controller action that gets you the teams:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetTeams(int LeagueId)
{
var model = TeamsBusinessLogic.getTeams(LeagueId);
return Json(model);
}
再次，您将需要编写让你在特定的联盟所有球队自己的业务逻辑...
again you will need to write your own business logic that get you all the teams in specific league...
这篇关于jQuery的填充下拉列表中的MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
