基于MVC3方式实现下拉列表联动(JQuery)

上次项目中遇到一个需要多个下拉列表联动的操作，今天有空将实现方式整理以便以后参考。
要达到的效果是，点击一个下拉框，则另一个下拉框的值发生对应变化。如：选择中国，则另个一下拉框里显示中国各个省份。
传统的html方式比较简单，实际上基于mvc的实现方式也大同小异。

直接上代码：

. 代码如下:

public class dp_provice
{
public int proviceid { get; set; }
public string provicename { get; set; }
public int provicenode { get; set; }
public virtual list<dp_city> citysource { get; set; }
}

public class dp_city
{
public int citynode { get; set; }
public string cityname { get; set; }
public string provicenode { get; set; }
}

对以上涉及到的实体类予以赋值，暂时使用一个静态类初始化简单数据：

. 代码如下:

public static class dpdatasource
{
public static list<dp_provice> initaldata()
{
list<dp_provice> source = new list<dp_provice>
{
new dp_provice{ provicenode=1, provicename="北京", citysource=new list<dp_city>{
new dp_city{
citynode=11, cityname="北京海淀"
},
new dp_city{
citynode=12,cityname="北京西城"
}
}},
new dp_provice{ provicenode=2, provicename="山东", citysource=new list<dp_city>{
new dp_city{
citynode=21, cityname="济南"
},
new dp_city{
citynode=22,cityname="德州"
}
}},
new dp_provice{ provicenode=3, provicename="河北", citysource=new list<dp_city>{
new dp_city{
citynode=31, cityname="石家庄"
},
new dp_city{
citynode=32,cityname="衡水"
}
}}
};

return source;
}
}

具体在controller中的调用，因为使用的jquery中的ajax方式，所以返回的结果类型为json;

. 代码如下:

public actionresult index()
{
return view("dpshow");
}
list<dp_provice> source = dpdatasource.initaldata();

public jsonresult getprovincesource()
{
if (source == null || source.count < 0)
{
source = dpdatasource.initaldata();
}
return json(source, jsonrequestbehavior.allowget);
}
public jsonresult getcitysource(string provicename)
{
source = dpdatasource.initaldata();
list<dp_city> citysource = new list<dp_city>();
citysource = source.where(a => a.provicenode.tostring().contains(provicename)).first().citysource;
return json(citysource, jsonrequestbehavior.allowget);
}

数据准备完毕，此时需要razor视图中进行绑定和展示，代码如下：

. 代码如下:

@model mapplication.models.dp_provice
@{
viewbag.title = "dpshow";
layout = "~/views/shared/_layout.cshtml";
}
<script type="text/javascript">
$(function myfunction() {
getplant();
//初始化省份数据
$("#ddlprovince").change(function ff() { //设置当省份下拉列表发生变化时，更新城市数据列表
getcity();
});
});

function getplant() {
$("#ddlprovince").empty();
var url = "/dropdown/getprovincesource/";
$.getjson(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["provicenode"])
.text(item["provicename"])
.appendto($("#ddlprovince"));
});
getcity();
});
}
function getcity() {
$("#ddlcity").empty();
var temp=$("#ddlprovince").val();
var url ="@url.action("getcitysource", "dropdown")" ;
//使用mvc3中url.action 方法参数依次为：aciton ; controller ; area ;

$.getjson(url,{"provicename":temp}, function (data) {
//中间需要用到参数 所以采用在getjson方法中实现
$.each(data, function (i, item) {
$("<option></option>")
.val(item["citynode"])
.text(item["cityname"])
.appendto($("#ddlcity"));
});
});
}
</script>
<! doctype html />
<h2>
下拉列表联动</h2>
<table>
<tr>
<td>
<select id="ddlprovince" />
</td>
<td>
<select id="ddlcity" />
</td>
</tr>
</table>

说明：
一般来讲，采用mvc实现下拉列表绑定可以有多种方式，主要是数据绑定方式可以使用jquery中的ajax 方式，同时也可以使用自定义的基于mvc 的 url.acion 方式，个人建议使用基于mvc 的 url.acion。
一来是支持方式比较灵活，如果中间涉及到数据类型复杂，可以自定义，实现数据封装；
二来是jquery 中url在传递参数时需要格式化，否则将无法找到指定的action。