在mvc中动态加载菜单

 

最近做了一个项目, 要在客户端动态的显示菜单,也就是这些菜单是保存在数据库中的, 在客户端动态加载菜单,这样做的好处很明显,就是菜单很容易修改,直接在后台进行维护,再也不会直接在前面的 视图页面中进行修改,但是,缺点也很明显,实现起来有一定的难度,如果菜单多的话,在前台首次加载时,页面就会变慢,我想谈谈自己在这方面的经验

 

首先, 我们要创建两个表,(其实一个表也可以了,不过那样的话会变得比较复杂), 一个一级分类表, 一个二级分类表, 两个表的结构如下 :

技术分享

 

一个是一级分类表,对应的就是父级菜单, 一个是二级分类表,对应的就是子菜单

实现步骤如下: 定义一个方法, 读取所有的一级分类的菜单, (注意在一级分类中的菜单编码 (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="[email protected]" 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-->

其中的循环遍历是获取一级分类的名称的,好,运行一下看看效果怎么样

技术分享这是所有的一级菜单展开后的样子。好了,今天就到这吧。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。