2013年11月4日 星期一

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哈
  
去呼叫@(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;
    }    
}
上面這句也要加,不加差在那邊各位可以自己測試!!
參考網址