最近做了一個項目， 要在客戶端動態的顯示菜單，也就是這些菜單是保存在數據庫中的， 在客戶端動態加載菜單，這樣做的好處很明顯，就是菜單很容易修改，直接在后台進行維護，再也不會直接在前面的 視圖頁面中進行修改，但是，缺點也很明顯，實現起來有一定的難度，如果菜單多的話，在前台首次加載時，頁面就會變慢，我想談談自己在這方面的經驗
首先， 我們要創建兩個表，（其實一個表也可以了,不過那樣的話會變得比較復雜）， 一個一級分類表， 一個二級分類表， 兩個表的結構如下 ：
一個是一級分類表，對應的就是父級菜單， 一個是二級分類表，對應的就是子菜單
實現步驟如下： 定義一個方法， 讀取所有的一級分類的菜單， （注意在一級分類中的菜單編碼 （channelNo)是唯一的） ， 然后定義一個 查詢出指定一級編號下的所有的二級菜的 返回 類型都是集合類型
這樣編寫好相關的數據訪問層后，在控制器中直接調用就可以了，關鍵步驟是在視圖中，在控制器中要定義兩個 關鍵的Action, 一個獲取一級分類， 一個獲取一級分類下的二級分類名稱，我的控制器中的 Action是這樣寫的：
1 /// <summary> 2 /// 獲取一級分類名稱 幫助導航列表 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult GetAll() 6 { 7 //一級分類名稱 8 var model = channelService.GetAll(); 9 return PartialView("/views/shared/_help.cshtml", model); 10 } 11 12 13 /// <summary> 14 /// 一級分類下的二級分類名稱 幫助導航列表 15 /// </summary> 16 /// <param name="chid"></param> 17 /// <returns></returns> 18 public ActionResult GetMenu(int chid) 19 { 20 ///一級分類下的二級分類名稱 21 var model = partService.GetAll(chid); 22 return PartialView("/views/shared/_menu.cshtml", model); 23 24 }
返回的都是一個部分視圖， 在這兩個部分視圖中，是這樣布局的
1 @{ 2 Layout = null; 3 } 4 @model IEnumerable<xftwl.Common.ChannelModel> 5 6 7 <div id="accordion1" class="accordion"> 8 <div class="accordion-top"><h3>幫助中心</h3></div> 9 10 @if (Model != null) 11 { 12 13 foreach (var item in Model) 14 { 15 if (item.Id > 0) 16 { 17 <div class="accordion-group"> 18 <div class="accordion-heading"> 19 <a class="accordion-toggle" href="#" data-target="#@item.Id" data-toggle="collapse"> @item.ChannelName 20 </a> 21 </div> 22 <div id="@item.Id" class="accordion-body collapse"> 23 @Html.Action("GetMenu", "Help", new { chid = item.Id }) 24 </div> 25 26 </div> 27 28 } 29 } 30 } 31 32 </div> 33 34
在 _menu.cshtml 部分視圖中， 視圖是這樣布局的
1 @{ 2 Layout = null; 3 } 4 @model IEnumerable<xftwl.Common.PartModel> 5 6 @if( Model !=null) 7 { 8 foreach (var t in Model) 9 { 10 <div class="accordion-inner clearfix"> 11 <label class="field"><a href="@Url.Action("Index", "help", new {prtid=t.Id })" target="test"><strong>@t.PartName</strong></a></label> 12 </div> 13 } 14 }
最后，在控制器 的 Index 視圖中這樣來寫 :
1 ViewBag.Title = "幫助中心"; 2 Layout = "~/Views/Shared/_Layout.cshtml"; 3 } 4 @model IEnumerable<xftwl.Common.ArticleModel> 5 6 <!--main--> 7 <div class="container content-main-help"> 8 @* @Html.Partial("_HelpMeau")*@ 9 10 @Html.Action("getall","help") 11 <div class="help-text-right"> 12 13 @if (Model != null) 14 { 15 16 foreach (var item in Model) 17 { 18 19 <div style="height:auto"> 20 21 <a href="@Url.Action("Detail","Help", new{Id=item.Id})" > @item.Title</a> 22 </div> 23 24 } 25 } 26 27 </div> 28 </div> 29 30 <!--main end-->
其中的循環遍歷是獲取一級分類的名稱的，好，運行一下看看效果怎么樣
這是所有的一級菜單展開后的樣子。好了，今天就到這吧。