Blazor: Get Current Page at MainLayout

Blazor, 經由 @Body 取得 Current Page。Get current page at main-layout. 實作麵包屑breadcrumbs。

目的

在 main layout 取得現在的 Razor page 的屬性，用於顯示現在執行狀態或實作「麵包屑 bread-crumbs」。

程式碼紀錄

一 、自訂 Page Attributes。

PageAttribute.cs

using System;

namespace BlazorServerApp
{
    public class PageAttribute : Attribute
    {
        public PageAttribute(string id, string name)
        {
            FuncId = id;
            FuncName = name;
        }

        public string FuncId { get; }
        public string FuncName { get; }
    }
}

二、在 @page 加入自訂 Page Attributes。

Pages\FooPage.razor

@page "/foo-page"
@attribute [Page("FID0001","你的功能作業名稱")] /// 加入@page屬性
@inject NavigationManager nav

<div>
  ...
</div>

@code{
    ...
}

三、在MainLaout.razor 元件取得 Current Page

Shared\MainLayout.razor

@inherits LayoutComponentBase
@inject NavigationManager navMan

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    <div class="main">
        <div class="banner">
            @* 顯示現在 Page 或實作『麵包屑』 *@
            <p>Page Type: @pageType?.FullName</p>
            <p>Page Attribute:@pageAttr?.FuncId @pageAttr?.FuncName</p>
        </div>
        <div class="content">
            @Body
        </div>
    </div>
</div>

@code{
    Type pageType = null;
    PageAttribute pageAttr = null;

    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        /// 經由 @Body 取得 Current Page, 
        /// 取得現在功能作業 Page 與 PageAttribute
        pageType = (this.Body.Target as RouteView)?.RouteData.PageType;
        pageAttr = pageType?.GetCustomAttributes(false).FirstOrDefault(c => c is PageAttribute) as PageAttribute;
    }
}