我有一个页面,其中有一个LeagueDDL
,一个ClubDDL
,然后是玩家列表。我想实现的是,用户将选择联赛,然后根据联赛ID将俱乐部绑定到第二个DDL,当用户也选择俱乐部时,根据ClubID将球员列表绑定到View。
到目前为止,我有以下内容:-
视图:-
<script type="text/javascript">
function populateClubsDropdown() {
$("#ddlClubs").empty();
var typeID = getLeagueID();
$.getJSON('@Url.Action("GetClubsByLeague", "Footballer")?TypeID=' + typeID, function (result) {
$.each(result, function () {
$("<option>").attr("value", this.ClubID).text(this.Club).appendTo("#ddlClubs");
});
});
}
function getLeagueID() {
var leagueID = $("#ddlLeagues").val();
return leagueID;
}
</script>
@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList,
new { id = "ddlLeagues", onChange = "$:populateClubsDropdown()" })
@Html.DropDownListFor(model => model.Club.ClubID, Model.ClubList, new { id = "ddlClubs" })
在我的控制器中,我有:-
public ViewResult Index()
{
League league = new League();
string selected = "Please Select";
model.LeagueList = model.PopulateLeagueDDL(selected, league, null);
Club club = new Club();
model.ClubList = model.PopulateClubDDL(selected, league, club, null);
model.Footballers = db.Footballers.Include("Club").Include("Position").Include("Status").Include("Country");
return View(model);
}
public JsonResult GetClubsByLeague(int LeagueID)
{
var result = footballersDAL.GetClubsByLeagueId(LeagueID).Select(
c => new { ClubID = c.ClubID, Club = c.ClubName });
JsonResult jsonResult = new JsonResult { Data = result, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
return jsonResult;
}
当我第一次启动页面时,两个Dropdown都是正确的,但是当我更改LeagueDDL
时,我会得到一个空的第二个DDL。Json断点没有被击中。
我很感激在这方面能得到一些帮助,我不太明白我做错了什么。
更新以查看
<script type="text/javascript">
function populateClubsDropdown() {
$("#ddlClubs").empty();
var typeID = getLeagueID();
$.getJSON('@Url.Action("GetClubsByLeague", "Footballer")?TypeID=' + typeID, function (result) {
$.each(result, function () {
$("<option>").attr("value", this.ClubID).text(this.Club).appendTo("#ddlClubs");
});
});
}
function getLeagueID() {
var leagueID = $("#ddlLeagues").val();
return leagueID;
$(function () {
$('#ddlLeagues').change(populateClubsDropdown);
});
}
@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList,
new { id = "ddlLeagues" })
@Html.DropDownListFor(model => model.Club.ClubID, Model.ClubList, new { id = "ddlClubs" })
看起来问题就在这里:
@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList,
new { id = "ddlLeagues", onChange="$:populateClubsDropdown()" }) //What is"$:"?!
更改为:
@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList,
new { id = "ddlLeagues", onChange = "populateClubsDropdown()" })
使用jQuery不引人注目的事件侦听器是更好的事件:
<script>
function populateClubsDropdown() {
$("#ddlClubs").empty();
var typeID = getLeagueID();
$.getJSON('@Url.Action("GetClubsByLeague", "Footballer")?TypeID=' + typeID, function (result) {
$.each(result, function () {
$("<option>").attr("value", this.ClubID).text(this.Club).appendTo("#ddlClubs");
});
});
}
$(function(){
$('#ddlLeagues').change(populateClubsDropdown);
});
</script>
@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList,
new { id = "ddlLeagues"})
@Html.DropDownListFor(model => model.Club.ClubID, Model.ClubList,
new { id = "ddlClubs" })
更新:看起来您向操作发送了错误的参数:
应该是LeagueID
,但您发送TypeId
~