有時候,我們的網頁需要串聯功能表或者級聯下拉框,比如在選擇一個省市縣的時候,我們必須讓下拉框為聯動下拉框,才能擷取該省份下的該市下的該縣!下面我用一個例子來示範下在MVC中如何用ajax技術製作聯動下拉框!
1. 首先我們在view裡寫入兩個下拉框:
1 <div class="editor-field"> 2 3 4 @Html.DropDownList("fathernodeid") 5 6 7 @Html.DropDownList("nodeid") 8 9 10 </div>
View Code
一個id和name都為fathernodeid的下拉框和一個id和name都為nodeid的下拉框,我們接下來要做的就是改變fathernodeid 下拉框的選項後nodeid下拉框的選項也跟著改變,這裡的改變選項是無重新整理的,因為我們要用ajax非同步載入這些選項!
Ok,我們去建立個JavaScript指令檔TypeLinkage.js,代碼如下:
1 //類別聯動js指令碼 2 3 4 $(document).ready(function() { 5 6 7 $("#fathernodeid").change(function() { 8 9 10 GetChildrenTreeList(); //擷取子選項11 12 13 });14 15 16 });17 18 19 20 21 22 function GetChildrenTreeList() {23 24 25 var url = "/TheTree/GetChildrenTreeList/" + $("#fathernodeid").val();26 27 28 $.getJSON(29 30 31 url, function(data) {32 33 34 $("#nodeid").empty(); //清空原來的選項35 36 37 $.each(data,function(i, item) {38 39 40 $("<option></option>").val(item["ID"]).text(item["Nodename"]).appendTo("#nodeid");41 42 43 });44 45 46 });47 48 };
View Code
因為我的view用了布局頁,所以我們直接將js引用到布局頁中即可,在這之前我們首先要把js加入到BundleConfig.cs中,他是為我們集中化管理js指令碼和css樣式表的一個檔案,現在我們把剛才寫好的聯動指令碼也放進去並起個名字為~/bundles/TypeLinkage如下:
1 bundles.Add(newScriptBundle("~/bundles/TypeLinkage").Include(2 "~/Scripts/TypeLinkage.js"3 ));
View Code
2.現在我們在布局頁中設定一個佔位,這樣引用此布局頁的頁面就可以為我們留出來一個空間讓我們寫自己的代碼了,布局頁中隨便地方加入 @RenderSection("scripts", required: false)
第一個參數為預留位置名字,第二個參數是設定引用此頁面的頁面必須填充預留位置也可以選擇不填充,這裡我們選擇可以選擇不填充。
現在來到我們的view層代碼;來填充我們的預留位置,如下:
1 @section Scripts { 2 3 4 @Scripts.Render("~/bundles/jqueryval") 5 6 7 @Scripts.Render("~/bundles/TypeLinkage") 8 9 10 }
View Code
我是在頁面最底部填充的預留位置!
3.現在我們去寫控制器中的方法吧:
1 ///<summary> 2 3 4 ///ajax擷取json資料的子類型列表 5 6 7 ///</summary> 8 9 10 ///<paramname="id"></param>11 12 13 ///<returns></returns>14 15 16 public JsonResult GetChildrenTreeList(intid)17 18 19 {20 21 22 List<TheTree>treelist = db.TheTrees.Where(e => e.TheFatherNode == id).ToList();23 24 25 return Json(treelist, JsonRequestBehavior.AllowGet);26 27 28 }
View Code
JsonResult 是ActionResult的一個子類,所以我們可以返回這種類型的視圖。
代碼很簡單,就是根據第一個下拉框的id擷取資料庫中父節點id==參數id的項的集合然後用json的方式返回給視圖,這裡要注意的是,因為頁面有緩衝,所以我們要在控制器類上加上取消緩衝的特性來聲明該類中的所有方法均不快取資料,特性如下:
1 [OutputCache(Location = OutputCacheLocation.None,NoStore = true)] //清除緩衝
View Code
Ok,現在可以運行我們的程式看效果啦……