在开发Web项目过程中,经常需要使用dropdownlist联动,那么在asp.net mvc dropdownlist联动是如何实现的呢?下面我一步一步的介绍如何实现。
首先,在Controller类中实现两个方法,一个是页面刚加载时候的Index(),另一个是dropdownlist onchange()。实现代码如下:
public ActionResult Index(int? projectId, int? teamId)
{
//获取所有的项目ID
ViewData["projectinfos"] = new SelectList(db.FindAllProjectInfos(), "ProjectId", "ProjectName");
int _teamId = teamId ?? 0;
int _projectId = projectId ?? 0;
//通过项目ID获取班组ID
ViewData["teams"] = new SelectList(db.FindAllTeamsByProjectId(_projectId), "teamid", "teamname");
if (_teamId != 0)//不为0,表示要获取指定班组下的信息
{
var contracts = db.FindTeamContractInfosByForeignerId(_teamId);
return View(contracts);
}
else//为0,表示要获取所有班组下的信息
{
var contracts = db.FindTeamContractInfos();
return View(contracts);
}
}
///
/// 通过项目ID获取班组ID
///
public JsonResult GetTeamsByProjectId(int id)
{
var teams = db.FindAllTeamsByProjectId(id);
return Json(teams.ToList(), JsonRequestBehavior.AllowGet);
}
接下来,在View页面中加入两个dropdownlist和javascript脚本。实现代码如下:
<div class="editor-label">
所属项目名称
<%: Html.DropDownList("projectId", ViewData["projectinfos"] as SelectList, "---全部项目---")%>
所属班组名称
<%: Html.DropDownList("teamId", ViewData["teams"] as SelectList, "---全部项目---")%>
<input type="submit" value="查询" />
</div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function () {
$("#projectId").change(function () { GetTeams() });
});
function GetTeams() {
$("#teamId").empty();
var url = "/ContractInfo/GetTeamsByProjectId/" + $("#projectId").val() + "/";//规则是控制器/方法/参数
alert(url);
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("
<option></option>
")
.val(item["TeamId"])
.text(item["TeamName"])
.appendTo($("#teamId"));
});
});
}
// ]]></script>
最后就是运行一下看看效果。这里有几个点要注意: