很多時候我們都會用到Drop Down List 的
特別是當我們想給使用者選擇 的時候 [和你有很多資料要給用戶選擇其中一個資料的時候]
為了方便大家對比ASP.Net Web Application 和 ASP.Net MVC3 Web Application 有什麼不同
我希望在將來的網誌上做一些例子給大家參考
由於之前寫的ASP.Net Web Application 是使用 ASP.Net Control 的
很方便..便可以建立一個Drop Down List 了
E.G.
.aspx
<asp:DropDownList ID="ddl_FoodCategories" runat="server" />
Code Behind
C#
//這是一個簡單的ASP.NET Drop Down List Sample
public partial class _Default : System.Web.UI.Page { //在Page Load Event上加入我們的Code protected void Page_Load(object sender, EventArgs e) { //當動作不是PostBack時我們取資料之後作Data Binding if (!IsPostBack) { //首先建立一個ShareChiWai_Model的 Instance ShareChiWai_Model Share_tbl = new ShareChiWai_Model(); //用Get_Food_Categories()這個方法來取出一個Food Categories 的DataTable ddl_FoodCategories.DataSource = Share_tbl.Get_Food_Categories(); //設定在Drop Down List上顯示的字為 "FoodCategory_Name" Field上的內容 ddl_FoodCategories.DataTextField = "FoodCategory_Name"; //設定當選擇Drop Down List時取的的內容為 "FoodCategory_NameID" Field上的內容 ddl_FoodCategories.DataValueField = "FoodCategory_ID"; //設定完成後進行Data Bind, 這便大功告成了 ddl_FoodCategories.DataBind(); } } }
而在ASP.Net MVC..由於我們不可以直接DataBind一個DataTable去一個DropDownList Control上..
所以如果我們是使用DataTable的話便要自行把這個DataTable 轉成 List 才可以
詳情可以參考以下URL:
Convert DataTable to List of Object – 把DataTable轉成List Of Object
我們先在Model上加入一個新的功能 來轉換 Get_Food_Categories方法取得的DataTable 轉為 List
Model
C#
public List<FoodCategory> Get_Food_Categories_List() { List<FoodCategory> Categories_List = new List<FoodCategory>(); DataTable tbl = Get_Food_Categories(); for (int i = 0; i < tbl.Rows.Count; i++) { Categories_List.Add(new FoodCategory() { FoodCategory_ID = (string)tbl.Rows[i]["FoodCategory_ID"], FoodCategory_Name = (string)tbl.Rows[i]["FoodCategory_Name"] }); } return Categories_List; }
把Model 建立好之後我們便可以把這個Model pass去我們的 view上面
我們先在Controller上建立一個新的Method FoodCategory
Controller
C#
public ActionResult FoodCategories() { ViewBag.Message = "Show Food Categories"; ShareChiWai_Model Share_Model = new ShareChiWai_Model(); return View(Share_Model.Get_Food_Categories_List()); }
之後我們便可以在我們的前台使用程式碼 建立我們的Drop Down List 了
.cshtml
View
C#
//我們要在.cshtml上定義我們使用的Model是那一個什麼類型的東西 @model List<ShareChiWaiWebTutorial.Models.FoodCategory> @{ //建立一個SelectList的 Object 之後我們便可以 定義個Object了 //new SelectList(“IEnumerable Item”, "DataValueField", "DataTextField"); var ddl_FoodCategories = new SelectList(Model, "FoodCategory_ID", "FoodCategory_Name"); } <h2>FoodCategories</h2> //最後我們可以使手 Razor 把這個DropDownList Render出來了 //@Html.DropDownList("Drop Down List的名稱/給Javascript/css 用的 E.G. 就像 ID 一樣", "SeletList Object") @Html.DropDownList("ddl_FoodCategories", ddl_FoodCategories)
ASP.Net MVC相比起 ASP.Net 要寫多很多程式嗎…
當你嘗試多一點時..便會知道那一個比較適合你的Project使用的
Hope you find it useful
待續..