Asp.net MVC 實作jQuery+Html.DropDownList更換頁面資料(14)

先廢話一下
這功能蠻實用的原本還想說用AjaxBeginForm但不知該如何寫
雖然寫出來了但應該還有許多可以地方可以加強

---

Controller部份先抓產生下拉選單的資料

        public ActionResult Index( )
        {
            ViewBag.TabData = new SelectList(db.Tab, "TabID", "TabName"); //產生下拉選單
            return View();
        }

View的部份也放一個@Html.DropDownList接收下拉選單
也放一個DIV來準備給jQuery用

@Html.DropDownList("TabData", null, null, new { id = "ddTabData" })

然後產原本產生的Index裡的Table另外開一個_List.schtml裡
所以這時畫面應該只剩一個下拉選單
我們要讓下拉後變更整個Table裡的資料
怎麼做當然就是去呼叫剛的頁面
要動態更新DOM我只會jQuery哈

  
        $(function () {     
            $("#ddTabData").change(function () {
                var selectedItem = $("#ddTabData").val();
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@(Url.Action("GetList", "TabContent", null))",
                    data: { "tid": selectedItem },
                    success: function (data) {
                        $("#Content").html(data);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('讀取資料失敗.');
                    }
                });
            });          
        });
    

去呼叫@(Url.Action("GetList", "TabContent", null))

  public ActionResult GetList(int tid = 1)
        {
            var tabcontent = db.TabContent.Where(u => u.TabID == tid).Include(t => t.Account).Include(t => t.Account1).Include(t => t.Tab);
            return View("_List",tabcontent.ToList() );
        }

這樣就會回傳一整個Table回來
但_List.cshtml裡除了原本宣告model要放

@{    
    if (IsAjax)
    {
        Layout = null;
    }    
}

上面這句也要加，不加差在那邊各位可以自己測試!!