基于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 MvcApplication.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。

如有大家对上述说法有异议或者更好的实现方案，请给予指正或说明，谢谢。