[C#][ASP.NET MVC]連動dropdownlist using json and jQuery
連動式的下拉選單需求很常見，而在ASP.NET MVC中已無法使用ajax control toolkit，
所以我們可以靠Json+jQuery來實現ajax效果(不採傳統Postback整個網頁表單送回Server端做法)。
Html
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<button id="btnClick" name="btnClick" type="button">載入地區資料</button>
地區:<select id="area" name="area">
</select>
城市:<select id="city" name="city">
</select>
Controller
public JsonResult GetArea()
{
List<SelectListItem> area = new List<SelectListItem>()
{
new SelectListItem(){Text="大台北"},
new SelectListItem(){Text="大台中"},
new SelectListItem(){Text="大高雄"},
};
return this.Json( area );
}
public JsonResult GetCity( Int32? type )
{
List<SelectListItem> city = null;
switch( type )
{
case 0:
city = new List<SelectListItem>()
{
new SelectListItem(){Text="台北市"},
new SelectListItem(){Text="台北縣"}
};
break;
case 1:
city = new List<SelectListItem>()
{
new SelectListItem(){Text="台中市"},
new SelectListItem(){Text="台中縣"}
};
break;
case 2:
city = new List<SelectListItem>()
{
new SelectListItem(){Text="高雄市"},
new SelectListItem(){Text="高雄縣"}
};
break;
}
return this.Json( city );
}
jQuery
$(function() {
$("#area").hide();//隱藏
$("#city").hide();
$("#btnClick").click(function() {
$.getJSON("/Home/GetArea", null, function(data) {//取得GetArea資料
$("#area").empty();//清空item
$("#area").show();
$.each(data, function(i, itemvalue) {//循環加入item
$("#area").append(
$("<option></option>").val(i).html(itemvalue.Text))
});
});
});
$("#area").change(function() {
var selindex = $("#area").attr("selectedIndex");
var url = "/Home/GetCity?type=" + selindex;
$.getJSON(url, null, function(data) {//取得GetCity資料
$("#city").empty();
$("#city").show();
$.each(data, function(i, itemvalue) {
$("#city").append(
$("<option></option>").val(i).html(itemvalue.Text))
});
});
});
});
結果
(載入地區資料)
(依地區顯示相關城市)
使用getJSON讀取Server端資料果然方便又輕巧。