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

前端技术 2023/09/08 JavaScript
上次项目中遇到一个需要多个下拉列表联动的操作，今天有空将实现方式整理以便以后参考。
要达到的效果是，点击一个下拉框，则另一个下拉框的值发生对应变化。如：选择中国，则另个一下拉框里显示中国各个省份。
传统的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。
如有大家对上述说法有异议或者更好的实现方案，请给予指正或说明，谢谢。

本文地址：https://www.stayed.cn/item/22018

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案