Blazor帶我重玩前端(四)

佈局

Blazor中的佈局和MVC中的佈局是類似的。

建立佈局

新建一個Razor頁面，所有新增的佈局都要繼承LayoutComponentBase，同時標識自定義內容的輸出位置，即標識Body的位置。如圖所示：

應用佈局

我們修改一下index.razor頁面中的程式碼，增加@layout MyLayout。執行後，按F12檢視網頁原始碼如下：

佈局的內容被<app></app>標籤包著，這也意味著，我們的layout並不是頁面的全部內容，而僅僅只是blazor相關的內容。

順便說一下，佈局是可以“繼承”的，也就是說，我們可以宣告一個新的佈局繼承自MainLayout.razor ，只需要指定如下程式碼即可：

@inherits LayoutComponentBase
@layout MainLayout

路由

路由定義

1. 路由模板

定義在App.razor中：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

裡面有三個重要元件：

• Found：路由機制渲染存在的頁面
• RouteView：接收路由資料和預設的佈局
• NotFound：路由機制渲染不存在的頁面，當然我們可以自己定義404內容

2. 定義路由

路由定義很簡單，只需要字首@page，然後定義你的路由名稱即可，如@page “index”。當然一個頁面可以定義多個路由。如下：

• @page “/index”
• @page “/”
• @page “/home/index”

定義與約束路由引數

這個其實和ASP.NET Core API的路由方式沒有太大區別，包括路由約束部分。

@page "/Index/{Theme}"

接收引數的方式也很簡單，需要宣告一個get;set的屬性，並且必須是public的，同時需要用Parameter特性去標識。

@{
    [Parameter]
    public string Theme{get;set;}
}

以下是路由約束，相比於MVC，這些約束也沒什麼變化。

導航元件

我們先看一個例子

<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有兩個列舉：

• NavLinkMatch.All：當匹配整個URL時，可以路由到頁面
• NavLinkMatch.Prefix：這是預設使用的，當匹配到當前URL的字首時，可以路由到頁面。如https://localhost:5001/MyComponent和 https://localhost:5001/MyComponent/AnotherSegment

接下來我們看一下如果通過程式碼方式進行頁面跳轉，那就是可以使用NavigationManager進行頁面跳轉，其例項是通過注入獲取的。

@inject NavigationManager NavigationManager

成員	描述
Uri	獲取當前的絕對URL
BaseUri	獲取根URI（末尾帶斜槓），然後以此追加相對路徑進而組合成絕對URI
NavigateTo	導航到指定的 URI（前提是設定forceLoad 為true） 使用此方式，會繞過客戶端路由，使得瀏覽器會強制重新整理頁面 如：UriHelper.NavigateTo("/DataList/" + Index, forceLoad);
LocationChanged	當導航位置更改時觸發的事件
ToAbsoluteUri	將相對 URI 轉換為絕對 URI
ToBaseRelativePath	給定一個根 URI（例如，以前由BaseUri返回的 URI），將絕對 URI 轉換為帶有根URI 字首的相對 URI

其他

Blazor雖然提供了十分豐富而又靈活的路由功能，但目前還沒有一個明確的功能讓我們使用可選引數，但是我們可以變通一下，就是設定接收的資料型別為可空型別。程式碼如下：

@page “DataList/{Index:int}”
[Parameter]
public int? Index { get; set; }
protected override void OnInitialized()
{
  base.OnInitialized();
  Index = Index?? 1;
}