基于Metronic的Bootstrap开发框架经验总结（11）--页面菜单的几种呈现方式
在常规的后台管理系统或者前端界面中，一般都有一个导航菜单提供给用户，方便选择所需的内容。基于Metronic的Bootstrap开发框架，是整合了Metroinc样式，以及Boostrap组件模块的内容，因此菜单的效果自然也是和Bootstrap一脉相承的。基于经常使用的几种菜单样式，本文进行了相关的介绍和展示。
1、菜单展示的三种方式
菜单的展示可以做成各种各样的效果，本文只是针对性的介绍其中的三种，两种左侧竖放的菜单，一种是水平横放的菜单。
样式1：
菜单收缩后界面如下所示。
样式2：
样式3：
水平样式的菜单如下所示：
2、几种布局的组织方式
由于这几种布局方式，它们的框架布局页面（也就是Layout页面）内容有所不同，一般情况下我们可以把它分别定义为一种Layout页面，这样在实际使用的时候包含它即可。
我根据上面几种样式，分别定义了几个不同的Layout页面，如下所示
一般情况下，我们生成一个视图页面，会提示我们选择不同的视图布局页面的，确认之后会在页面顶部应用对应的Layout页面。
如果我们需要动态指定页面的布局内容，可以在上面使用一个变量来处理，如下代码所示。
@{
Layout = ConfigData.ViewLayoutFile;// "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "角色信息";
}
实际上，我们一般的页面布局确定好后，就相对比较少变更的，所以为了不打破这个生成页面的布局内容，我们可以把前面处理好的Layout1/2/3等这些复制到Layout页面里面进行处理即可。
不过页面里面还是需要根据不同布局页面，指定不同的资源的。
我们添加样式的资源如下所示。
//开始全局必需样式引用
css_metronic.Include("~/Content/metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css",
"~/Content/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
"~/Content/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css",
"~/Content/metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css", .......................... //主题全局样式
"~/Content/metronic/assets/global/css/components-rounded.css",
"~/Content/metronic/assets/global/css/plugins.min.css",
//主题布局样式
"~/Content/metronic/assets/layouts/" + Layout + "/css/layout.css",
"~/Content/metronic/assets/layouts/" + Layout + "/css/themes/default.min.css",
"~/Content/metronic/assets/layouts/" + Layout + "/css/custom.min.css" );
上面红色的Layout是我们根据不同布局页面获得的一个变量，从而能够使得不同布局页面的样式和脚本顺利引入的。
/// <summary>
/// 系统定义的一些常用变量
/// </summary>
public class ConfigData
{
/// <summary>
/// Web开发框架所属的系统类型定义
/// </summary>
public const string SystemType = "WareMis"; /// <summary>
/// 配置视图的样式布局
/// </summary>
public static LayoutType Layout = LayoutType.Layout2;
} /// <summary>
/// 布局样式枚举
/// </summary>
public enum LayoutType
{
Layout,
Layout2,
Layout3
}
3、菜单的动态生成
为了实现菜单动态的生成，我们需要了解这几种方式的菜单结构，然后我们根据它们的特点进行数据结构的生成即可。
第一第二种布局方式的菜单结构数据是一样的，它们的内容如下所示。
<ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="nav-item start" id="1">
<a href="/Home/index?tid=1" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">首页</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
</li>
@Html.Raw(@ViewBag.MenuString)
</ul>
我们可以通过后台生成：@Html.Raw(@ViewBag.MenuString)
然后输出的界面里即可。
我们来看看前两种菜单的结构，简单的结构如下所示
<li class="nav-item start" id="1">
<a href="/Home/index?tid=1" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">首页</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
</li>
如果有子菜单的，那么两级菜单的结构如下所示。
<li class="nav-item " id="3">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-rocket"></i>
<span class="title">客户管理</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item " id="31">
<a href="second?tid=3&sid=31">
<i class="glyphicon glyphicon-th-list"></i>
<span class="title">客户管理</span>
</a>
</li>
<li class="nav-item " id="32">
<a href="second?tid=3&sid=32">
<i class="icon-basket"></i>
<span class="badge badge-roundless badge-danger">new</span>
<span class="title">客户联系人</span>
</a>
</li>
</ul>
</li>
如果是三级菜单的结构，如下所示：
<li class="nav-item active open" id="2">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-basket"></i>
<span class="title">行业动态</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
<ul class="sub-menu">
<li class="nav-item active open" id="21">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">行业动态</span>
<span class="arrow"></span>
<span class="selected"></span>
</a>
<ul class="sub-menu">
<li class="nav-item active open" id="211">
<a href="second?tid=2&sid=21&ssid=211">
<i class="icon-home"></i>
<span class="badge badge-danger">4</span>
<span class="title">政策法规</span>
</a>
</li>
<li class="nav-item " id="212">
<a href="second?tid=2&sid=21&ssid=212">
<i class="icon-basket"></i>
<span class="badge badge-warning">4</span>
<span class="title">通知公告</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
根据这些内容，我们在后台动态输出菜单结构即可。
例如我们在基类控制器里面，通过判断视图的处理，实现菜单内容的输出。
/// <summary>
/// 重载视图展示界面，方便放置一些常规的ViewBag变量。
/// 如果放在OnActionExecuting，则会导致任何请求都会执行一次，从而导致多次执行，降低响应效率
/// </summary>
protected override ViewResult View(string viewName, string masterName, object model)
{
//登录信息统一设置
if (CurrentUser != null)
{
ViewBag.FullName = CurrentUser.FullName;
ViewBag.Name = CurrentUser.Name; //ViewBag.MenuString = GetMenuString();
ViewBag.MenuString = GetMenuStringCache(); //使用缓存，隔一段时间更新
} return base.View(viewName, masterName, model);
}
为了提高菜单的响应处理，避免多次递归耗时，我们可以把生成好的菜单内容，放到缓存里面，通过键值实现处理。
/// <summary>
/// 使用分布式缓存实现菜单数据的缓存处理
/// </summary>
/// <returns></returns>
public string GetMenuStringCache()
{
string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache_" + CurrentUser.ID , delegate()
{
return GetMenuString();
},
null, DateTime.Now.AddMinutes() //5分钟以后过期，重新获取
);
return itemValue;
}
而对于水平方向的菜单处理，和前面两者有所不同。
如二级菜单数据展示如下所示。
<li class="menu-dropdown classic-menu-dropdown ">
<a href="index.html" class="nav-link ">
<i class="icon-bar-chart"></i> Default
<span class="arrow"></span>
</a>
</li>
<li class="menu-dropdown classic-menu-dropdown active">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-basket"></i> Dashboard
<span class="arrow"></span>
</a>
<ul class="dropdown-menu pull-left">
<li class=" active">
<a href="index.html" class="nav-link active">
<i class="icon-bar-chart"></i>Dashboard
<span class="arrow"></span>
</a>
</li>
</ul>
</li>
三级菜单展示的数据如下所示。
<li class="menu-dropdown classic-menu-dropdown ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-briefcase"></i> Pages
<span class="arrow"></span>
</a>
<ul class="dropdown-menu pull-left">
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-basket"></i> eCommerce
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="ecommerce_index.html" class="nav-link ">
<i class="icon-home"></i> Dashboard
</a>
</li>
<li class=" ">
<a href="ecommerce_orders.html" class="nav-link ">
<i class="icon-basket"></i> Orders
</a>
</li>
</ul>
</li> <li class="dropdown-submenu">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-notebook"></i> Login
<span class="arrow"></span>
</a>
<ul class="dropdown-menu pull-left">
<li class="">
<a href="page_user_login_1.html" class="nav-link " target="_blank"> Login Page 1 </a>
</li>
<li class="">
<a href="page_user_login_2.html" class="nav-link " target="_blank"> Login Page 2 </a>
</li>
</ul>
</li>
</ul>
</li>
我们所需要做的就是把我们数据库里面的菜单数据，动态构建这种递进式的数据结构即可。
如果感兴趣Bootstrap开发框架系列，可以参考学习下面的文章，感谢您的阅读。
基于Metronic的Bootstrap开发框架经验总结（10）--优化Bootstrap图标管理
在MVC控制器里面使用dynamic和ExpandoObject，实现数据转义的输出
基于Metronic的Bootstrap开发框架经验总结（11）--页面菜单的几种呈现方式的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理
最近一直很多事情,博客停下来好久没写了,整理下思路,把最近研究的基于Metronic的Bootstrap开发框架进行经验的总结出来和大家分享下,同时也记录自己对Bootstrap开发的学习研究的点点滴 ...
- 基于Metronic的Bootstrap开发框架经验总结（3）--下拉列表Select2插件的使用
在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外 ...
- 基于Metronic的Bootstrap开发框架经验总结（15）-- 更新使用Metronic 4.75版本
在基于Metronic的Bootstrap开发框架中,一直都希望整合较新.较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个 ...
- 基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作
在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML ...
- 基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
- （转）基于Metronic的Bootstrap开发框架经验总结（3）--下拉列表Select2插件的使用
http://www.cnblogs.com/wuhuacong/p/4761637.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JST ...
- 基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理
在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...
- 基于Metronic的Bootstrap开发框架经验总结（13）--页面链接收藏夹功能的实现2（利用Sortable进行拖动排序）
在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...
- 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
随机推荐
- SQL SERVER全面优化-------索引有多重要？
想了好久索引的重要性应该怎么写?讲原理结构?我估计大部分人不愿意看,也不愿意花那么多时间仔细研究.光写应用?感觉不明白原理一样不会用.举例说明?情况太多也写不全....到底该怎么写呢? 随便写吧,想到 ...
- Backbone源码分析（三）
Backbone源码分析(一) Backbone源码分析(二) Backbone中主要的业务逻辑位于Model和Collection,上一篇介绍了Backbone中的Model,这篇文章中将主要探讨C ...
- Python黑帽编程 4.0 网络互连层攻击概述
Python黑帽编程 4.0 网络互连层攻击概述 是时候重新温习下下面这张图了. 图2 本章的内容核心包含上图中的网络层和传输层.TCP/IP是整个网络协议体系中的核心,因为从这里开始,数据传输从局域 ...
- HTTPS那些事（一）HTTPS原理（转载）
原创地址:http://www.guokr.com/post/114121/ 楔子 谣言粉碎机前些日子发布的<用公共WiFi上网会危害银行账户安全吗?>,文中介绍了在使用HTTPS进行 ...
- IIS部署Remoting总结
1.在IIS里新建一个网站,命名为test,路径指向 e:\test: 2.在 e:\test下创建目录bin: 3.把Remoting远程对象的Project设置为类库,编译为DLL文件,然后复制到 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (24) ------ 第五章 加载实体和导航属性之查询内存对象
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-4 查询内存对象 问题 你想使用模型中的实体对象,如果他们已经加载到上下文中, ...
- Oracle 中 union 和union all 的简单使用说明
1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...
- VXLAN 概念（Part II）- 每天5分钟玩转 OpenStack（109）
上一节我们介绍了 VXLAN 的封装格式以及 VTEP.今天我们将通过例子讨论 VXLAN 封装和转发包的过程,以及 Linux 对 VXLAN 的原生支持. VXLAN 包转发流程 VXLAN 在 ...
- Service Plugin / Agent - 每天5分钟玩转 OpenStack（73）
Core Plugin/Agent 负责管理核心实体:net, subnet 和 port.而对于更高级的网络服务,则由 Service Plugin/Agent 管理.Service Plugin ...
- mac下安装tomcat
在window下面搭建tomcat环境很简单,那是因为我们不熟悉mac系统,当我们习惯了命令行的时候,也是so easy,只要通过以下几个步骤就可以解决,本人亲测可用,不会可以留言. 1.进入apch ...