在常規(guī)的后臺管理系統(tǒng)或者前端界面中伸眶，一般都有一個導(dǎo)航菜單提供給用戶，方便選擇所需的內(nèi)容刽宪±逶簦基于Metronic的Bootstrap開發(fā)框架，是整合了Metroinc樣式圣拄，以及Boostrap組件模塊的內(nèi)容嘴秸，因此菜單的效果自然也是和Bootstrap一脈相承的”幼唬基于經(jīng)常使用的幾種菜單樣式岳掐，本文進(jìn)行了相關(guān)的介紹和展示。
1饭耳、菜單展示的三種方式
菜單的展示可以做成各種各樣的效果串述，本文只是針對性的介紹其中的三種，兩種左側(cè)豎放的菜單寞肖，一種是水平橫放的菜單纲酗。
樣式1：
菜單收縮后界面如下所示。
樣式2：
樣式3：
水平樣式的菜單如下所示：
2新蟆、幾種布局的組織方式
由于這幾種布局方式觅赊，它們的框架布局頁面（也就是Layout頁面）內(nèi)容有所不同，一般情況下我們可以把它分別定義為一種Layout頁面琼稻，這樣在實(shí)際使用的時候包含它即可吮螺。
我根據(jù)上面幾種樣式，分別定義了幾個不同的Layout頁面欣簇，如下所示
一般情況下，我們生成一個視圖頁面坯约，會提示我們選擇不同的視圖布局頁面的熊咽，確認(rèn)之后會在頁面頂部應(yīng)用對應(yīng)的Layout頁面。
如果我們需要動態(tài)指定頁面的布局內(nèi)容闹丐，可以在上面使用一個變量來處理横殴，如下代碼所示。
@{ Layout = **ConfigData.ViewLayoutFile**;// "~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "角色信息";}
實(shí)際上，我們一般的頁面布局確定好后衫仑，就相對比較少變更的梨与，所以為了不打破這個生成頁面的布局內(nèi)容，我們可以把前面處理好的Layout1/2/3等這些復(fù)制到Layout頁面里面進(jìn)行處理即可文狱。
不過頁面里面還是需要根據(jù)不同布局頁面粥鞋，指定不同的資源的。
我們添加樣式的資源如下所示瞄崇。
//開始全局必需樣式引用
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是我們根據(jù)不同布局頁面獲得的一個變量呻粹，從而能夠使得不同布局頁面的樣式和腳本順利引入的。
/// <summary>
/// 系統(tǒng)定義的一些常用變量
/// </summary>
public class ConfigData
{
/// <summary>
/// Web開發(fā)框架所屬的系統(tǒng)類型定義
/// </summary>
public const string SystemType = "WareMis";
/// <summary>
/// 配置視圖的樣式布局
/// </summary>
public static LayoutType Layout = LayoutType.Layout2;
}
/// <summary>
/// 布局樣式枚舉
/// </summary>
public enum LayoutType
{
Layout,
Layout2,
Layout3
}
3苏研、菜單的動態(tài)生成
為了實(shí)現(xiàn)菜單動態(tài)的生成等浊，我們需要了解這幾種方式的菜單結(jié)構(gòu)，然后我們根據(jù)它們的特點(diǎn)進(jìn)行數(shù)據(jù)結(jié)構(gòu)的生成即可摹蘑。
第一第二種布局方式的菜單結(jié)構(gòu)數(shù)據(jù)是一樣的筹燕，它們的內(nèi)容如下所示。
<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)
然后輸出的界面里即可衅鹿。
我們來看看前兩種菜單的結(jié)構(gòu)撒踪，簡單的結(jié)構(gòu)如下所示
<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>
如果有子菜單的，那么兩級菜單的結(jié)構(gòu)如下所示塘安。
<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">客戶聯(lián)系人</span>
</a>
</li>
</ul>
</li>
如果是三級菜單的結(jié)構(gòu)糠涛，如下所示：
<li class="nav-item active open" id="2">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-basket"></i>
<span class="title">行業(yè)動態(tài)</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">行業(yè)動態(tài)</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">政策法規(guī)</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>
根據(jù)這些內(nèi)容，我們在后臺動態(tài)輸出菜單結(jié)構(gòu)即可兼犯。
例如我們在基類控制器里面忍捡，通過判斷視圖的處理，實(shí)現(xiàn)菜單內(nèi)容的輸出切黔。
/// <summary>
/// 重載視圖展示界面砸脊，方便放置一些常規(guī)的ViewBag變量。
/// 如果放在OnActionExecuting纬霞，則會導(dǎo)致任何請求都會執(zhí)行一次凌埂，從而導(dǎo)致多次執(zhí)行，降低響應(yīng)效率
/// </summary>
protected override ViewResult View(string viewName, string masterName, object model)
{
//登錄信息統(tǒng)一設(shè)置
if (CurrentUser != null)
{
ViewBag.FullName = CurrentUser.FullName;
ViewBag.Name = CurrentUser.Name;
//ViewBag.MenuString = GetMenuString();
ViewBag.MenuString = GetMenuStringCache(); //使用緩存诗芜，隔一段時間更新
}
return base.View(viewName, masterName, model);
}
為了提高菜單的響應(yīng)處理瞳抓，避免多次遞歸耗時，我們可以把生成好的菜單內(nèi)容伏恐，放到緩存里面孩哑，通過鍵值實(shí)現(xiàn)處理。
/// <summary>
/// 使用分布式緩存實(shí)現(xiàn)菜單數(shù)據(jù)的緩存處理
/// </summary>
/// <returns></returns>
public string GetMenuStringCache()
{
string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache_" + CurrentUser.ID , delegate()
{
return GetMenuString();
},
null, DateTime.Now.AddMinutes(5) //5分鐘以后過期翠桦，重新獲取
);
return itemValue;
}
而對于水平方向的菜單處理横蜒，和前面兩者有所不同。
如二級菜單數(shù)據(jù)展示如下所示。
<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>
三級菜單展示的數(shù)據(jù)如下所示丛晌。
<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>
我們所需要做的就是把我們數(shù)據(jù)庫里面的菜單數(shù)據(jù)仅炊，動態(tài)構(gòu)建這種遞進(jìn)式的數(shù)據(jù)結(jié)構(gòu)即可。
