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

時間 2019-11-11

標籤 asp.net asp core blazor inspinia 靜態模板搭建簡易後臺實現菜單選中欄目 ASP 简体版

原文原文鏈接

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

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

使用 .NET 進行客戶端 Web 開發可提供如下優點：css

使用 C# 代替 JavaScript 來編寫代碼。
利用現有的 .NET 庫生態系統。
在服務器和客戶端之間共享應用邏輯。
受益於 .NET 的性能、可靠性和安全性。
始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
以一組穩定、功能豐富且易用的通用語言、框架和工具爲基礎來進行生成。

1、網站下載Inspinia 模板

下載後的靜態頁模板html

創建 ASP.NET Core Blazor 項目java

若是是服務器模式把js和css核心複製進去，放置位置是很目錄的 _Host.cshtml。jquery

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

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

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

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

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

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

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

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

3、實現菜單選中

下面引自官方文檔解釋

NavLink 組件

建立導航連接時，請使用 NavLink 組件來代替 HTML hyperlink 元素（<a>）。 @No__t_0 組件的行爲相似於 <a> 元素，只不過它會根據其 href 是否匹配當前 URL 來切換 active CSS 類。 @No__t_0 類可幫助用戶瞭解在顯示的導航連接中哪一頁是活動頁。

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

<div class="@NavMenuCssClass" @onclick="@ToggleNavMenu">

 <ul class="nav flex-column"> <li class="nav-item px-3"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <span class="oi oi-home" aria-hidden="true"></span> Home </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="MyComponent" Match="NavLinkMatch.Prefix"> <span class="oi oi-plus" aria-hidden="true"></span> My Component </NavLink> </li> </ul> </div>

能夠將兩個 NavLinkMatch 選項分配給 <NavLink> 元素的 Match 屬性：

若是 NavLink 在與整個當前 URL 匹配時處於活動狀態，則 NavLinkMatch.All –。
NavLinkMatch.Prefix （默認值），當 NavLink 與當前 URL 的任何前綴匹配時，– 處於活動狀態。

在前面的示例中，Home NavLink href="" 與 home URL 匹配，而且僅接收應用的默認基路徑 URL （例如 https://localhost:5001/）中的 active CSS 類。第二個 NavLink 在用戶訪問具備 MyComponent 前綴的任何 URL （例如 https://localhost:5001/MyComponent 和 https://localhost:5001/MyComponent/AnotherSegment）時接收 active 類。

其餘 NavLink 組件特性會傳遞到呈現的定位點標記。在下面的示例中，NavLink 組件包含 target 屬性：

<NavLink href="my-page" target="_blank">My page</NavLink>

呈現如下 HTML 標記：

<a href="my-page" target="_blank" rel="noopener noreferrer">My page</a>

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

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

因此 Navlink如今不能用了，因此須要用到 NavigationManager 組件來監聽路由切換。

在母版頁 MainLayout.razor 寫全局監聽事件。

@inherits LayoutComponentBase
@inject NavigationManager navigationManager
@inject IJSRuntime jsRuntime
<div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <img alt="image" class="rounded-circle" src="/img/profile_small.jpg" />
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="block m-t-xs font-bold">博客園IT</span>
                            <span class="text-muted text-xs block">我是麥兜<b class="caret"></b></span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a class="dropdown-item" href="profile.html">Profile</a></li>
                            <li><a class="dropdown-item" href="contacts.html">Contacts</a></li>
                            <li><a class="dropdown-item" href="mailbox.html">Mailbox</a></li>
                            <li class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="login.html">註銷</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        admin 
                    </div>
                </li>
                <li>
                    <a href="/"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span></a>
                </li>
                <li >
                    <a  href="javascript:showa(2)"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">客戶管理</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li id="li_2_1"><a href="Customer/Add">添加客戶</a></li>
                        <li id="li_2_2"><a href="Customer/List">客戶列表</a></li>
                    </ul>
                </li>
                <li >
                    <a  href="javascript:showa(3)"><i class="fa fa-apple"></i> <span class="nav-label">產品管理</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li id="li_3_1"><a href="Product/Add">添加產品</a></li>
                        <li id="li_3_2"><a href="Product/List">產品列表</a></li>
                    </ul>
                </li>

            </ul>

        </div>
    </nav>

   
        @Body
        <div class="footer">
            <div>
                <strong>Copyright</strong> Example Company &copy; 2014-2018
            </div>
        </div>
    </div>
</div>

@code{

    //頁面初始化
    protected override void OnInitialized()
    {
        //母版頁初始化完成後 註冊 路由事件
        navigationManager.LocationChanged += OnLocationChange;
    }
    private void OnLocationChange(object sender,LocationChangedEventArgs e)
    {
        string url = e.Location;//得到完整URL
        //調用全局js 函數 setMenuActive 是客戶端js函數名字，後面是參數
        jsRuntime.InvokeVoidAsync("setMenuActive",url);
    }
}

@page "/"
@namespace BlazorApp3.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp3</title>
    <base href="~/" />
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.js"></script>
    
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <script src="_framework/blazor.server.js"></script>
    <script>
        function showa(i)
        {
            console.log(i);
            $("#side-menu").find("li").removeClass("active");
            $(".nav-second-level").removeClass("in");
            $("#side-menu").children().eq(i).addClass("active").find("ul").eq(0).addClass("in");
        }
        function setMenuActive(url)
         {
            console.log(url);
            $("#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;
                }
            });
        }
    </script>
</body>
</html>

點擊一級菜單掉客戶都安用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");

這2行函數事先把以前的樣式清空。

$(".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。

至此，全部功能完成。

以下圖。