Blazor帶我重玩前端(四)
- 2020 年 7 月 22 日
- 筆記
- .NET Core, Blazor, H::技術潮流之不拘一格
布局
Blazor中的布局和MVC中的布局是類似的。
創建布局
新建一個Razor頁面，所有新增的布局都要繼承LayoutComponentBase，同時標識自定義內容的輸出位置，即標識Body的位置。如圖所示：
應用布局
我們修改一下index.razor頁面中的程式碼，增加@layout MyLayout。運行後，按F12查看網頁源程式碼如下：
布局的內容被<app></app>標籤包著，這也意味著，我們的layout並不是頁面的全部內容，而僅僅只是blazor相關的內容。
順便說一下，布局是可以「繼承」的，也就是說，我們可以聲明一個新的布局繼承自MainLayout.razor ，只需要指定如下程式碼即可：
1: @inherits LayoutComponentBase
2: @layout MainLayout
路由
路由定義
1. 路由模板
定義在App.razor中：
1: <Router AppAssembly="@typeof(Program).Assembly">
2: <Found Context="routeData">
3: <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4: </Found>
5: <NotFound>
6: <LayoutView Layout="@typeof(MainLayout)">
7: <p>Sorry, there's nothing at this address.</p>
8: </LayoutView>
9: </NotFound>
10: </Router>
裡面有三個重要組件：
- Found：路由機制渲染存在的頁面
- RouteView：接收路由數據和默認的布局
- NotFound：路由機制渲染不存在的頁面，當然我們可以自己定義404內容
2. 定義路由
路由定義很簡單，只需要前綴@page，然後定義你的路由名稱即可，如@page 「index」。當然一個頁面可以定義多個路由。如下：
- @page 「/index」
- @page 「/」
- @page 「/home/index」
定義與約束路由參數
這個其實和ASP.NET Core API的路由方式沒有太大區別，包括路由約束部分。
1: @page "/Index/{Theme}"
接收參數的方式也很簡單，需要聲明一個get;set的屬性，並且必須是public的，同時需要用Parameter特性去標識。
1: @{
2: [Parameter]
3: public string Theme{get;set;}
4: }
以下是路由約束，相比於MVC，這些約束也沒什麼變化。
導航組件
我們先看一個例子
1: <div class="@NavMenuCssClass" @onclick="@ToggleNavMenu">
2: <ul class="nav flex-column">
3: <li class="nav-item px-3">
4: <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
5: <span class="oi oi-home" aria-hidden="true"></span> Home
6: </NavLink>
7: </li>
8: <li class="nav-item px-3">
9: <NavLink class="nav-link" href="MyComponent" Match="NavLinkMatch.Prefix">
10: <span class="oi oi-plus" aria-hidden="true"></span> My Component
11: </NavLink>
12: </li>
13: </ul>
14: </div>
NavLinkMatch有兩個枚舉：
- NavLinkMatch.All：當匹配整個URL時，可以路由到頁面
- NavLinkMatch.Prefix：這是默認使用的，當匹配到當前URL的前綴時，可以路由到頁面。如//localhost:5001/MyComponent和 //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雖然提供了十分豐富而又靈活的路由功能，但目前還沒有一個明確的功能讓我們使用可選參數，但是我們可以變通一下，就是設置接收的數據類型為可空類型。程式碼如下：
1: @page 「DataList/{Index:int}」
2: [Parameter]
3: public int? Index { get; set; }
4: protected override void OnInitialized()
5: {
6: base.OnInitialized();
7: Index = Index?? 1;
8: }
