iT邦幫忙

DAY 27
1

當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統系列 第 27

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(27) – MvcMenuProvider自訂篇

  • 分享至 

  • xImage
  •  

* 本篇目標

選單依登入角色至資料庫撈取,並自訂bootstrap的選單樣式

* 前言

上一篇我們講了MvcMenuProvider基本使用,這篇會來介紹搭配權限管理及自訂css樣式選單的使用方法

* 逐步教學

打開專案底下的Mvc.sitemap,修改設定如下:

我們需要寫程式動態撈取選單,dynamicNodeProvider可以設定指向的位置

在Model底下新增一個名稱為PageDynamicNodeProvider的class,我們複寫GetDynamicNodeCollection這個方法,而PermissionService是取得資料,內容為前幾篇寫好的選單SQL SP,詳細請參考此篇

執行結果,但這不是我們要的,因為並未套上一些CSS

* 自訂選單CSS

記得我們前一篇有介紹他有一些預設的View嗎,可以在這個View做微調,當然也可以做新增,譬如我們新增一個BootstrapMenuHelperModel.cshtml

而這個View的邏輯有點複雜,建議下載程式回去參考,以下分區塊說明:

新增一個Helper,傳入所有選單樣式並跑回圈,ul 有套入bootstrap的class,而如果該選單又有子項目的話,則跑另一個Helper來秀出子選單(DropDownMenu)

DropDownMenu helper如下:

跑所有子選單並套入bootstrap的class,如果還有下一層的話,則呼叫自己這個方法,相信有寫過程式的人應該都不陌生,這就是一種遞迴跑出無限層樹狀結構的概念。

接著在這個View中,最後一行加入@TopMenu(Model.Nodes) 來執行這兩個helper

而在_Layout.cshtml 將秀出選單指定成這個view,而false則是不要秀出Mvc.Sitemap定義的文字(最上層)

執行結果,就完成自訂bootstrap的選單樣式了

* 後記

其實程式一旦複雜就很難用文章來解釋,建議至我的Github下載程式回去參考,會比較清楚

本資料庫可至此連結下載,使用前先新增Northwind並執行SQL Scripts

本系列程式原始碼請至我的Github下載 https://github.com/kyleap

** 如內容有誤請告知,將進行修改,謝謝 **


上一篇
[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(26) – MvcMenuProvider安裝篇
下一篇
[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(28) – Elmah監控網站
系列文
當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言