ASP.NET Core Blazor 用Inspinia靜態頁模板搭建簡易后台（實現菜單選中）

Blazor 是一個用於使用 .NET 生成交互式客戶端 Web UI 的框架：

• 使用 C# 代替 JavaScript 來創建豐富的交互式 UI。
• 共享使用 .NET 編寫的服務器端和客戶端應用邏輯。
• 將 UI 呈現為 HTML 和 CSS，以支持眾多瀏覽器，其中包括移動瀏覽器。

一、網站下載Inspinia 模板

 

建立 ASP.NET Core Blazor 項目

如果是服務器模式 把js和css核心復制進去，放置位置是很目錄的 _Host.cshtml。

如果是WebAssembly 模式，放置位置是_wwwroot文件下面的index.html頁面。

二、建立簡易的菜單結構（模擬傳統的MVC）

1.一級菜單 【客戶管理】，二級菜單分別是 添加客戶 和 客戶列表。

添加客戶 對應路由地址 Customer/Add

客戶列表 對應路由地址 Customer/List

2.一級菜單 【產品管理】，二級菜單分別是 添加產品 和 產品列表。

添加產品 對應路由地址  Product/Add

產品 列表 對應路由地址 Product/List

三、實現菜單選中

下面引自 官方文檔解釋

NavLink 組件

創建導航鏈接時，請使用 NavLink 組件來代替 HTML hyperlink 元素類可幫助用戶了解在顯示的導航鏈接中哪一頁是活動頁。

以下 NavMenu 組件創建一個演示如何使用 NavLink 組件的啟動導航欄：

 

但是 NavLink 只能實現自身 加active 樣式，且只能是a標簽 ，實際項目中可能a 標簽父元素 需要設置 active 樣式或者更外層的元素。例如本模板

當前點擊菜單父層 li 設置了active 實現當前選中，且同級元素UL 也是設置 class 添加in樣式才能展開。

所以 Navlink現在不能用了，所以需要用到 NavigationManager 組件來監聽路由切換。

 

點擊一級菜單 掉客戶都安用showa 函數來實現，這個功能是展開二級菜單（給a表的父標簽li添加active樣式實現左側上色，同級元素UL添加in 實現展開），不跳轉。

點擊二級菜單實現跳轉，跳轉完成后觸發 LocationChanged 事件，事件里面調用js客戶端函數 setMenuActive 來實現二級菜單設置active.

c#代碼調用Javascript 可以注入IJSRuntime 來實現，這里不詳細解釋了。

$("#side-menu").find("li").removeClass("active");
$(".nav-second-level").find("li").removeClass("active");

$(".nav-second-level").find("a").each(function () {
var childurl = $(this).attr("href");
if (url.indexOf(childurl) > -1)
{
$(this).parent().addClass("active").parent().parent().addClass("active");
return false;
}
});

 

遍歷當前所有一級菜單 如果是當前URL 被選中 就設置active，同時設置二級元素a （就是當前點擊 的二級的元素）的父元素為active。

至此，所有功能完成。

如下圖。