ASP.NET MVC 連動DropDownList

2013-11-07

11801
0
2013-11-08

摘要:ASP.NET MVC 連動DropDownList

前言

在Web Form時代，我們習慣使用DropDownList控制項，透過AutoPostBack機制，在後端進行連動的控制，十分快速方便。但如今.Net MVC回到了純手工撰寫程式，必需回歸到以前asp的觀念，來達到DropDownList連動效果，本篇就以我習慣處理的方式分享給大家。

DrodownList連動實作




@using (Html.BeginForm("Index", "DropDown", FormMethod.Post, new { name = "form1" }))
{
    @Html.DropDownList("group_id1", ViewBag.group_id1 as SelectList, new { onchange = "tab(this)" })
    @Html.DropDownList("group_id2", ViewBag.group_id2 as SelectList, new { onchange = "tab(this)" })   
    
}

首先，假設我們有兩個下拉選單要做連動，透過主分類來連動次分類。

View做法：

(1) 建立主、次分類的@Html.DropDownList，並置於Form裡。

(2) 再將下拉選單增加onchange事件，讓被選取的時候去觸發javascript function

(3) 而Javascript function負責執行Form Submit，送至action做處理。

Controller做法：

先建立3個Method：

(1) GetSelectItem - 用來初始化select itme，並可以傳入bool參數來決定是否顯示「請選擇」的字樣。

(2) SetDropDown1 - 用來設定第一下拉選項(主分類)內容，傳入值id為選單預設d 選取值。

(3) SetDropDown2 - 用來設定第二下拉選項(次分類)內容，傳入值id為主份類的選取值；傳入值id2為次分類的選取值。


       // 初始化DropDownList      
        List<<selectlistitem>> GetSelectItem(bool dvalue = true)
        {
            List<<selectlistitem>> items = new List<<selectlistitem>>();
            if (dvalue) { items.Insert(0, new SelectListItem { Text = "--請選擇--", Value = "0" }); }
            return items;
        }


       // 第一層下拉選項       
        private List<<selectlistitem>> SetDropDown1(int id = -1)
        {
            List<<selectlistitem>> items = GetSelectItem();
            using (DB19113Entities db = new DB19113Entities())
                items.AddRange(new SelectList(db.travel_catogory, "id", "title", id));
            return items;
        }


 // 第二層下拉選項       
        private List<<selectlistitem>> SetDropDown2(int id = -1, int id2 = -1)
        {
            List<<selectlistitem>> items = GetSelectItem();
            using (DB19113Entities db = new DB19113Entities())
            {
                var query = db.travel_project.Where(m => m.travel_catogory_id == id);
                items.AddRange(new SelectList(query, "id", "project", id2));
            }
            return items;
        }

建立完成以上3個Method後，Action的code就變的簡單多了，如以下程式碼所示：


public ActionResult Index()
        {
            ViewBag.group_id1 = SetDropDown1();
            ViewBag.group_id2 = GetSelectItem();
            return View();
        }

(1) 初始頁面，將ViewBag.group_id1取得分類資料即呼SetDropDown1

(2) 而ViewBag.Group_id2則設定為下拉選單初始的狀態。


[HttpPost]
        public ActionResult Index(FormCollection form)
        {
            int id = 0;
            int id2 = 0;
            id = int.Parse(form["group_id1"]);
            id2 = int.Parse(form["group_id2"]);
            ViewBag.group_id1 = SetDropDown1(id);
            ViewBag.group_id2 = SetDropDown2(id, id2);
 
            return View();
        }

(1) User操作時，在選擇完主分類的選項後，透過form post到action後，可以從FormCollection取得下group_id1(主分類選取值)，並將其傳入SetDropDown2，即可取得次分類的選單。

(2) 注意需再重新指定 ViewBag.group_id1 = SetDropDown1(id); ，才能keep住主分類的值。

回首頁