基於BootStrap Metronic開發架構經驗小結【一】架構總覽及菜單模組的處理，bootstrapmetronic

基於BootStrap Metronic開發架構經驗小結【一】架構總覽及菜單模組的處理，bootstrapmetronic

大家對Bootstrap架構知識瞭解多少

Bootstrap是一個前端的技術架構，很多平台都可以採用，JAVA/PHP/.NET都可以用來做前端介面，整合JQuery可以實現非常豐富的介面效果，目前也有很多Bootstrap的外掛程式能夠提供給大家使用，但是在國內很多基於Bootstrap的介紹很多還是停留在教學的基礎上，介紹Bootstrap的各種基礎知識和簡單的使用；本文希望以基於C#的MVC實際項目的基礎上，對Bootstrap開發架構進行全面的案例介紹，以實際項目的代碼和效果進行講解，力求詳盡、直觀為大家介紹這方面的經驗和心得。

1、基於Metronic的Bootstrap開發架構總覽

Metronic是一個國外的基於HTML、JS等技術的Bootstrap開發架構整合，整合了很多Bootstrap的前端技術和外掛程式的使用，是一個非常不錯的技術架構。本文以這個為基礎，結合我對MVC的Web架構的研究，整合了基於MVC的Bootstrap開發架構，使之能夠符合實際項目的結構需要的實際項目。

以下是我整體性項目的總的。

啟動菜單區的內容，動態從資料庫裡面擷取，系統頂欄放置一些資訊展示，以及提供使用者對個人資料快速處理，如查看個人資訊、登出、鎖屏等操作，內容地區則主要是可視化展示的資料，可以通過樹清單控制項、表格控制項進行展示，一般資料還有增刪改查、以及分頁的需要，因此需要整合各種功能的處理。另外，使用者的資料，除了查詢展示外，還需要有匯入、匯出等相關操作，這些是常規性的資料處理功能。確定好這些規則和介面效果後，我們可以通過代碼產生工具進行產生，快速產生這些Web項目的介面效果了。

2、Bootstrap開發架構菜單展示

整個架構涉及了很多內容，包括常規Bootstrap的各種CSS特性的使用，以及功能表列、Bootstrap表徵圖管理、系統頂欄、樹形控制項JSTree、Portlet容器、Modal對話方塊、Tab控制項、、下拉式清單Select2、複選框iCheck、多文本編輯控制項summernote、檔案及圖片上傳展示fileinput、提示控制項bootstrap-toastr和sweetalert、數值調整控制項touchspin、視頻播放展示控制項video-player等等，這些特性在整體性的解決方案裡面都有設計，集合這些優秀的外掛程式，能夠為我們的架構提供更強大的功能和豐富的介面體驗。

本節繼續回到架構的開始部分，菜單的處理和展示。一般為了管理方便，菜單分為三級，選中的菜單和別的菜單樣式有所區分，菜單可以摺疊最小化，效果如下所示。

在Bootstrap，構建菜單是一個相對比較容易的事情，主要是利用了UL和LI，通過樣式的處理，就可以實現了菜單的布局設定了，代碼如下所示。

        <ul class="page-sidebar-menu page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">          <li class="start" id="1">            <a href="/Home/index">              <i class="icon-home"></i>              <span class="title">首頁</span>              <span class="selected"></span>              <span class="arrow open"></span>            </a>          </li>          <li id="2">            <a href="javascript:;">              <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="heading" style="font-size:14px;color:yellow">                <i class="icon-home"></i>                行業動態              </li>              <li>                <a href="#">                  <i class="icon-home"></i>                  <span class="badge badge-danger">4</span>                  政策法規                </a>              </li>              <li>                <a href="#">                  <i class="icon-basket"></i>                  <span class="badge badge-warning">4</span>                  通知公告                </a>              </li>              <li>                <a href="#">                  <i class="icon-tag"></i>                  <span class="badge badge-success">4</span>                  動態資訊                </a>              </li>            </ul>          </li>        </ul>

但是，我們一般的菜單是動態變化的，也就是需要從資料庫裡面擷取，並設定到最上層顯示，這樣我們就需要在MVC的控制器裡面，輸出菜單的內容，然後綁定到前端的介面上，實現菜單資料的動態化，同時這也是許可權控制的基礎處理。

在基類裡面，我們可以在使用者登陸後，擷取菜單的資料放到ViewBag對象裡面。

具體代碼如下所示，先判斷使用者是否登陸，如果登陸，則擷取使用者的菜單資料，存在ViewBag裡面待用。

/// <summary>    /// 重寫基類在Action執行之前的處理    /// </summary>    /// <param name="filterContext">重寫方法的參數</param>    protected override void OnActionExecuting(ActionExecutingContext filterContext)    {      base.OnActionExecuting(filterContext);      //得到使用者登入的資訊      CurrentUser = Session["UserInfo"] as UserInfo;      if (CurrentUser == null)      {        Response.Redirect("/Login/Index");//如果使用者為空白跳轉到登入介面      }      else      {        //設定授權屬性，然後賦值給ViewBag儲存        ConvertAuthorizedInfo();        ViewBag.AuthorizeKey = AuthorizeKey;        //登入資訊統一設定        ViewBag.FullName = CurrentUser.FullName;        ViewBag.Name = CurrentUser.Name;        ViewBag.MenuString = GetMenuString();        //ViewBag.MenuString = GetMenuStringCache(); //使用緩衝，隔一段時間更新      }    }

其中，GetMenuString函數就是對菜單的組裝處理。資料庫中菜單的資訊是一個樹形結構，如下所示。

我們可以根據資料庫的菜單資訊，構建一部分介面用到的HTML代碼。

 #region 定義的格式模板      // javascript:;      // {0}?tid={1}      var firstTemplate = @"      <li id='{3}'>        <a href='{0}'>          <i class='{1}'></i>          <span class='title'>{2}</span>          <span class='selected'></span>          <span class='arrow open'></span>        </a>";      var secondTemplate = @"        <li class='heading' style='font-size:14px;color:yellow'>          <i class='{0}'></i>          {1}        </li>";      var thirdTemplate = @"        <li id='{3}'>          <a href='{0}'>            <i class='{1}'></i>            {2}          </a>        </li>";      var firstTemplateEnd = "</li>";      var secondTemplateStart = "<ul class='sub-menu'>";      var secondTemplateEnd = "</ul>";       #endregion

例如三級菜單就可以通過代碼進行產生。

 //三級            icon = subNodeInfo.WebIcon;            //tid 為頂級分類id，sid 為第三級菜單id            tmpUrl = string.Format("{0}{1}tid={2}&sid={3}", subNodeInfo.Url, GetUrlJoiner(subNodeInfo.Url), info.ID, subNodeInfo.ID);            url = (!string.IsNullOrEmpty(subNodeInfo.Url) && subNodeInfo.Url.Trim() != "#") ? tmpUrl : "javascript:;";            sb = sb.AppendFormat(thirdTemplate, url, icon, subNodeInfo.Name, subNodeInfo.ID);

當然，如果想提高並發量，可以減少菜單的頻繁檢索，把這部分資料放到MemeryCache裡面，如下處理即可。

 public string GetMenuStringCache()    {      string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache", delegate()        {          return GetMenuString();        },        null, DateTime.Now.AddMinutes(5) //5分鐘以後到期，重新擷取      );      return itemValue;    }

3、布局頁面的使用

同時，我們為了提高頁面的重用，一般情況下，是把每個頁面相同部分的內容抽離出來，放到總的布局頁面上，這樣處理內容地區外，其他部分全部是繼承自布局視圖頁面的內容了，我們的動態菜單部分，也是在布局視圖裡面的一部分內容。

的_Layout.cshtml就是基於C#的MVC總的布局視圖頁面。這樣，我們在這個頁面裡面，設定了菜單的展示內容，以及留出首頁面內容的部分，以及指令碼的部分展示，就可以了。

菜單的展示代碼如下所示：

布局頁面留出的頁面展示Section如下所示。

由於Bootstrap一般把JS檔案放到最後載入，因此我們在布局頁面保留部分必備的Jquery等指令碼外，還需要把指令碼部分內容放到頁面底部進行載入，並且我們指令碼載入可以利用MVC的Bundles技術進行壓縮整合處理。關於這方面技術，可以參考我之前的文章介紹《基於MVC4+EasyUI的Web開發架構經驗總結（11）--使用Bundles處理簡化頁面代碼》。

這樣，我們在各個子頁面的視圖裡面，引入布局視圖頁面後，只需要編寫個人化展示內容的部分即可，具體代碼如下所示。

然後在頁面底部，包含所需部分的指令碼代碼即可，這樣在頁面產生後，就會依據布局版面設定好的順序塊，進行合理的展示，並且是把所有部分內容進行整合了。

4、頁面編輯工具Sublime Text的使用

我前面，很多是VS環境裡面的，不過一般我們編輯檢視頁面的時候，都是採用Sublime Text這個強大的編輯工具的，豐富的外掛程式、智能文法提示等，會讓你用了之後愛不釋手，是編輯檢視頁面非常快速的利器，強烈推薦使用。

VS一般我們用來做檔案管理，以及編譯等處理就可以了。

以上內容是小編給大家介紹的基於BootStrap Metronic開發架構經驗小結【一】架構總覽及菜單模組的處理的相關知識，希望對大家有所協助，如果大家想瞭解更多資訊敬請關注幫客之家網站！