jQuery實現DropDownList(MVC)


今天學點什么呢?
想來想去覺得DropDownList還是要加強功力,因為以前寫ASP.NET網站時,此功能用的非常之多。在練習之前,先溫習一下以前練習的《Html.DropDownListFor練習(2)http://www.cnblogs.com/insus/p/3383277.html 是直接使用Rzaor語法實現。近段時間有jQuery與MVC一起學習,所以不如嘗試使用jQuery來實現DropDownList。


溫習之后,發覺以前寫的,是在視圖中還要實例化Entity:

@{
    var fcEntity = new FruitCategoryEntity();    
}


如果使用jQuery來實現的話,就不必這樣寫了。因為我們可以使用jQuery的$.get(),$.post或$.getJSON()方法中的任一方法獲取數據。

怎樣寫呢?


也就是說,在MVC應用程序的Controllers目錄下的CategoryController.cs控制器寫JsonResult() Action。
DropDownList的JSON的數據源准備好了。我們現在可以創建一個新視圖來實現這個DropDownList了。

創建視圖前,先去控制器FruitController.cs創建一個Create() Action:


在應用程序的Views/Fruit/下,創建Create.cshtml視圖。

 

在視圖中的第#17行代碼,有放select 標簽。后面我們就可以為這個標簽使用jQuery綁定數據。
現在我們可以寫jQuery代碼了:



上圖中的1部分,是為了給DropDownList添加一個Item。第2部分是給DropDownList綁定數據。另外第2部分還可以使用下面代碼來替代:


Insus.NET較習慣后一種寫法,因為更直觀。

最后來看看這個DropDownList的效果:



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM