MVC中用ajax做聯動下拉框

來源:互聯網
上載者:User

 

有時候,我們的網頁需要串聯功能表或者級聯下拉框,比如在選擇一個省市縣的時候,我們必須讓下拉框為聯動下拉框,才能擷取該省份下的該市下的該縣!下面我用一個例子來示範下在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,現在可以運行我們的程式看效果啦……

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.