.net MVC 下拉多級聯動及MVC Html.DropDownList 和DropDownListFor
阿新 • • 發佈：2018-11-20
第一種方式
前臺html
<div style="margin:50px 0"> <span>省份：</span> <select id="Province"> <option>請選擇</option> </select> <span>市：</span> <select id="City"> <option>請選擇</option> </select> </div>
jquery
<script src="~/Scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function () { GetProvince(); //載入省份 $("#Province").change(function () { GetCity(); }); }); function GetProvince() { $.getJSON( "/Home/GetProvincelist", function (data) { $.each(data, function (i, item) { $("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province")); }) }); } function GetCity() { $("#City").empty(); $.getJSON( "/Home/GetCitylist", { pid: $("#Province").val() } , function (data) { $.each(data, function (i, item) { $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City")); }) }); } </script>
後臺程式碼
/// <summary> /// 模擬省份資料 /// </summary> /// <returns></returns> public List<Province> Provincelist() { List<Province> list = new List<Province>(); list.Add(new Province() { PID = 1, ProvinceName = "廣東" }); list.Add(new Province() { PID = 2, ProvinceName = "北京" }); list.Add(new Province() { PID = 3, ProvinceName = "上海" }); list.Add(new Province() { PID = 4, ProvinceName = "河北" }); list.Add(new Province() { PID = 5, ProvinceName = "貴州" }); list.Add(new Province() { PID = 6, ProvinceName = "雲南" }); return list; } /// <summary> /// 模擬城市資料 /// </summary> /// <returns></returns> public List<City> Citylist() { List<City> cityList = new List<City>(); cityList.Add(new City() { CID = 1, PID = 1, CityName = "廣州" }); cityList.Add(new City() { CID = 2, PID = 1, CityName = "深圳" }); cityList.Add(new City() { CID = 3, PID = 1, CityName = "惠州" }); cityList.Add(new City() { CID = 4, PID = 1, CityName = "湛江" }); cityList.Add(new City() { CID = 5, PID = 2, CityName = "北京" }); cityList.Add(new City() { CID = 6, PID = 3, CityName = "上海" }); cityList.Add(new City() { CID = 7, PID = 4, CityName = "唐山市" }); cityList.Add(new City() { CID = 8, PID = 4, CityName = "保定市" }); cityList.Add(new City() { CID = 9, PID = 4, CityName = "張家口市" }); return cityList; } /// <summary> /// 獲取省份 /// </summary> public JsonResult GetProvincelist() { var list = Provincelist(); return Json(list, JsonRequestBehavior.AllowGet); } /// <summary> /// 獲取城市 /// </summary> /// <param name="pid"></param> /// <returns></returns> [WithoutLocalization] public JsonResult GetCitylist(int pid) { var citys = Citylist().Where(m => m.PID == pid).ToList(); List<SelectListItem> item = new List<SelectListItem>(); foreach (var City in citys) { item.Add(new SelectListItem { Text = City.CityName, Value = City.CID.ToString() }); } return Json(item, JsonRequestBehavior.AllowGet); }
第二種方式
前臺html
model需要在該頁面首行新增類的引用，@model WebApplicationShare.Controllers.ProvinceViewModel
<div style="margin:50px 0">
<span>省份：</span>
@Html.DropDownListFor(model => model.PID,ViewBag.ProvinceList as IEnumerable<SelectListItem>, "＝請選擇＝", new { @class = "form-control", id = "Province" })
<span>市：</span>
@Html.DropDownListFor(model => model.CID, ViewBag.CityList as IEnumerable<SelectListItem>, "＝請選擇＝", new { @class = "form-control", id = "City" })
</div>jquery程式碼（和上面的那個幾乎一樣，區別在於初始化的時候不載入省份，而是載入城市）
$(function () {
//GetProvince(); //載入省份
GetCity();
$("#Province").change(function () {
GetCity();
});
});
function GetProvince() {
// $("#Province").empty();
$.getJSON(
"/Home/GetProvincelist",
function (data) {
$.each(data, function (i, item) {
$("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));
})
});
// GetCity();
}
function GetCity() {
$("#City").empty();
$.getJSON(
"/Home/GetCitylist",
{ pid: $("#Province").val() } ,
function (data) {
$.each(data, function (i, item) {
$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));
})
});
}後臺程式碼
public ActionResult Index()
{
ViewBag.ProvinceList = Provincelist().Select(m => new SelectListItem()
{
Text = m.ProvinceName,
Value = m.PID.ToString(),
Selected = (m.PID == 4) //測試，預設讓它繫結第四個
}).ToList();
ViewBag.CityList = Citylist().Select(m => new SelectListItem()
{
Text = m.CityName,
Value = m.CID.ToString(),
Selected = (m.CID == 9) //測試發現這個設定了沒啥用
}).ToList();
return View();
}
public class ProvinceViewModel
{
/// <summary>
/// 省份ID
/// </summary>
public int PID { get; set; }
/// <summary>
/// 城市ID
/// </summary>
public int CID { get; set; }
}參考網址：https://www.cnblogs.com/jys509/p/4554688.html#autoid-0-0-0
不理解原博主說的編輯是什麼意思，我自己試了之後只能實現級聯，而且還有一些小bug，比如省份如果選擇請選擇，城市那邊獲取不到省份的pid導致F12輸出中報錯
DropDownList用法
後臺程式碼
public SelectList CardTypeSelectList(int? value)
{
List<dic_docmenttype> dic_dtList = CardTypeService.LoadEntities(c => c.VALID == 1).ToList();
dic_dtList.Insert(0, new dic_docmenttype { CODE = 0, DVALUE = "請選擇" });
return new SelectList(dic_dtList, "CODE", "DVALUE", value);
}
public ActionResult Index()
{
int CardValue = 0;
ViewData["RY_cardType"] = CardTypeSelectList(CardValue);
return View();
}前臺html
<div class="form-group">
<label class="control-label col-sm-4"><span style="color: red;">* </span>證件型別</label>
<div class="col-sm-8">
@Html.DropDownList("RY_cardType", null, new { @class = "form-control allCardType" })
</div>
</div>參考網址：https://blog.csdn.net/pt_sm/article/details/53893899
這個部落格寫的挺詳細的