ASP.Net Web Application To ASP.Net MVC Notes Drop Down List- ASP.Net Web Application To ASP.Net MVC 新手筆記I Drop Down List

Leave a reply

很多時候我們都會用到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 Drop Down List Sample
而在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 DropDownList Sample
ASP.Net MVC相比起 ASP.Net 要寫多很多程式嗎…
當你嘗試多一點時..便會知道那一個比較適合你的Project使用的

Hope you find it useful

待續..

Leave a Reply