ASP.NET MVC 連動式下拉式選單
- 2009-08-21
- 34957
- 0
現在的網頁連動式下拉選單相當的普遍,之前 demo 也有寫過一篇,當時是利用 AJAX.NET Toolkits 來完成的,現在介紹一下使用 jQuery 的寫法。
在 ASP.NET MVC 中註定是不會使用 AJAX.NET Toolkits 所以我們就要來利用 HTML 和 JavaScript(jQuery)來達成,所以此文其實不限定在 ASP.NET MVC 中使用。
連動式選單的經典範例就是郵遞區號,因此 demo 今天就不用郵遞區號來做示範。
為了加強共用性所以我們把下拉選單寫成兩個很簡單的Helper
/// <summary> /// 居住縣市下拉選單 /// </summary> /// <param name="helper"></param> /// <param name="ID">選單的ID</param> /// <param name="name">選單的name</param> /// <returns></returns> public static string GetItemsForDist(this HtmlHelper helper, string ID, string name) { StringBuilder sb = new StringBuilder(); sb.Append("<select name=" + name + " id=" + ID + ">"); sb.Append("<option value='0'> 縣市 </option>"); sb.Append("<option value='TaipeiCity'>台北市</option>"); sb.Append("<option value='KeelungCity'>基隆市</option>"); sb.Append("</select>"); return sb.ToString(); }
/// <summary> /// 鄉鎮市區下拉選單 /// </summary> /// <param name="helper"></param> /// <param name="ID">選單的ID</param> /// <param name="name">選單的name</param> /// <returns></returns> public static string GetItemsForArea(this HtmlHelper helper, string ID, string name) { StringBuilder sb = new StringBuilder(); sb.Append("<select name=" + name + " id=" + ID + ">"); sb.Append("<option value='0' class='sub_TaipeiCity'>行政區</option>"); sb.Append("<option class='sub_TaipeiCity' value='100'>中正區</option>"); sb.Append("<option class='sub_TaipeiCity' value='103'>大同區</option>"); sb.Append("<option class='sub_TaipeiCity' value='104'>中山區</option>"); sb.Append("<option class='sub_TaipeiCity' value='105'>松山區</option>"); sb.Append("<option class='sub_TaipeiCity' value='106'>大安區</option>"); sb.Append("<option class='sub_TaipeiCity' value='108'>萬華區</option>"); sb.Append("<option class='sub_TaipeiCity' value='110'>信義區</option>"); sb.Append("<option class='sub_TaipeiCity' value='111'>士林區</option>"); sb.Append("<option class='sub_TaipeiCity' value='112'>北投區</option>"); sb.Append("<option class='sub_TaipeiCity' value='114'>內湖區</option>"); sb.Append("<option class='sub_TaipeiCity' value='115'>南港區</option>"); sb.Append("<option class='sub_TaipeiCity' value='116'>文山區</option>"); sb.Append("<option value='0' class='sub_KeelungCity'>行政區</option>"); sb.Append("<option class='sub_KeelungCity' value='200'>仁愛區</option>"); sb.Append("<option class='sub_KeelungCity' value='201'>信義區</option>"); sb.Append("<option class='sub_KeelungCity' value='202'>中正區</option>"); sb.Append("<option class='sub_KeelungCity' value='203'>中山區</option>"); sb.Append("<option class='sub_KeelungCity' value='204'>安樂區</option>"); sb.Append("<option class='sub_KeelungCity' value='205'>暖暖區</option>"); sb.Append("<option class='sub_KeelungCity' value='206'>七堵區</option>"); sb.Append("</select>"); return sb.ToString(); }
View頁面就可以很好寫
<%=Html.GetItemsForDist("Dist", "Dist")%> <%=Html.GetItemsForArea("Area", "Area")%>
這時候執行就是出現兩個下拉選單,並且行政區的選單會包含了所有的"區"當然這不是我們要的,加上神奇的jQuery吧。
在頁面上加上
$(function() { makeSublist('Dist', 'Area'); });
function makeSublist(parent, child) { $("body").append("<select style='display:none' id='" + parent + child + "'></select>"); $('#' + parent + child).html($("#" + child + " option")); $('#' + child).html("<option value='0'>行政區</option>"); $('#' + parent).change( function() { var parentValue = $('#' + parent).attr('value'); $('#' + child).html($("#" + parent + child + " .sub_" + parentValue).clone()); if (parentValue=="0") { $('#' + child).html("<option value='0'>行政區</option>"); } }) ; }
上面的 js 寫法重點在於 clone() 這個函式可以把整套複製下來,相當的好用,建議各位一定要看的懂上面在寫什麼,這樣子連動幾層都難不倒你了。
為了先能讓大家都看懂,所以 demo 在組下拉選單的 HTML 時用的方法很直覺,不過 ASP.NET MVC 內還有一個更好用的玩意TagBuilder有興趣的可以先研究看看。
回應討論