一、ASP.NET Core Blazor之路由

Web應用程式的可以通過URL將多個頁面串聯起來，達成一個元件功能，並且可以互相跳轉。我們開發系統的時候總是需要使用路由來實現頁面之間的跳轉。ASP.NET Core MVC或是ASP.NET WebForm主要是使用a標籤或者是伺服器端redirect來跳轉。例如在ASP.NET Core MVC中我們使用如下程式碼進行跳轉：

     <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a>

那麼Blazor是如何進行頁面之間跳轉的呢？接下來我們來學習頁面之間的跳轉。

二、使用@page指定元件的路由路徑進行跳轉

我們在建立Blazor應用程式時，微軟已經給我們內建了一個預設的路由，這個是由Blazor的路由元件(Router)實現的。

通過 Router 元件可在 Blazor 應用中路由到 Razor 元件。 Router 元件在 Blazor 應用的 App 元件中使用。在Visual Studio 2022的解決方案管理器中找到App.razor，雙擊開啟，你可以看到如下程式碼：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

我們在建立Blazor元件的時候，須在元件的第一行寫上@page 開頭的程式碼， @page 「url路徑」來表示路由地址，比如/ BookIndex，那麼該頁面的請求地址就是域名:埠號/ BookIndex。程式碼範例如下：

@page "/BookIndex"

Visual Studio 2022編譯器在編譯帶有 @page 指令的 Razor 元件 (.razor) 時，將為元件類提供一個 RouteAttribute 來指定元件的路由。

當應用程式啟動時，應用程式將掃描由Router元件中AppAssembly屬性指定的程式集，收集程式集中具有 RouteAttribute 的Blazor元件的路由資訊。

在應用程式執行時，RouteView 元件：

從 Router 接收 RouteData 以及所有路由引數。
使用指定的元件的佈局來呈現該元件，包括任何後續巢狀佈局。

對於沒有使用 @layout 指令指定佈局的元件，可使用RouteView中DefaultLayout 引數來指定一個預設的佈局，NET 6框架中的 Blazor專案模板預設指定 MainLayout 元件 (Shared/MainLayout.razor) 作為應用的預設佈局。

  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

存取/BookIndex 看到BookIndex 頁面被渲染出來了。如下圖。

Router 不與查詢字串值互動。

三、在找不到內容時提供自定義內容

在Blazor裡給每個元件指定一個路徑（URL），當路由匹配的時候，會在<Found></Found>節點裡面渲染出來，如果沒有的話會在<NotFound></NotFound>節點裡面渲染，當然你也可以自定義一個404的頁面。在Visual Studio 2022的解決方案資源管理器中，找到 App.razor 元件，使用滑鼠左鍵雙擊，在文字編輯器中開啟，找到Router元件的 NotFound 模板，NotFound 模板中設定自定義內容。例如如下範例程式碼：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />

    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <h1>頁面走失！請確認輸入的URL是否正確！</h1>

            <p role="alert">Sorry, there's nothing at this address.</p>

        </LayoutView>
    </NotFound>
</Router>

任意項都可用作 <NotFound> 標記的內容，例如其他互動式元件。

在Visual Studio 2022的選單欄上，找到「偵錯-->開始偵錯」或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，並在瀏覽器中開啟Home頁面，我們瀏覽器的位址列中輸https://localhost:7110/BookEdit。由於我們的應用程式中沒有BookEdit這個元件或是頁面，我們將會看到我們剛才定義的404頁面，這個頁面被渲染出來了。如下圖。

注意：如果是在瀏覽器裡敲入url按回車切換頁面，會發生一次http請求，然後重新渲染blazor應用。

四、使用a標籤進行頁面跳轉

<A>標籤作為超連結是我們在進行Web應用程式開發中最常用的一種頁面跳轉方式，blazor同樣支援。
在Visual Studio 2022的解決方案資源管理器中，找到 BookIndex.razor 元件，使用滑鼠左鍵雙擊，在文字編輯器中開啟，然後修改程式碼如下：

@page "/BookIndex"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore
 

@inject IDbContextFactory<BookContext> dbFactory
 
<PageTitle>圖書列表</PageTitle>

<h3>圖書列表</h3>
<table class="table-responsive" width="90%"> 
    <tr><td>Name</td>
    <td>Author</td>
    <td>Price</td>
    <td>ReleaseDate</td>
    <td>StockQty</td>
    <td>Qty</td>
    <td>操作</td>


    </tr>
    @foreach (var item in books)
    {
        <tr> 
        <td>@item.Name</td>
        <td>@item.Author</td>
        <td>@item.Price</td>
        <td>@item.ReleaseDate</td>
        <td>@item.StockQty</td>
        <td>@item.Qty</td>
            <td><a href="/AddBook">編輯</a></td>
   </tr>
 
    }
</table>

@code {
    private   static BookContext _context;
    private List<Book> books = new List<Book>();
   protected override async Task OnInitializedAsync()
    {
        _context = dbFactory.CreateDbContext();
        books=_context.Book.ToList();
        await base.OnInitializedAsync();

    }

}

在Visual Studio 2022的選單欄上，找到「偵錯-->開始偵錯」或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，並在瀏覽器中開啟Home頁面，我們我們使用滑鼠左鍵點選左邊選單上的「圖書列表」選單項，瀏覽器會顯示我們修改過的圖書列表頁面，在這個頁面中多了一個「編輯」的按鈕，將滑鼠指標懸停在「編輯」連結上可以檢視，連結背後的URL值。如下圖。

使用滑鼠左鍵，點選「編輯」，頁面將會從圖書列表頁面中跳轉到AddBook頁面，但是沒有任何我們想要的資料，這個問題留到下一步給出解決方案。如下圖。

注意：使用標籤<a>在頁面之間進行跳轉不會發生http請求傳輸到後臺，經過伺服器處理之後，再傳輸到前面進行渲染，而是直接在前端將頁面渲染出來。

學習ASP.NET Core Blazor程式設計系列十——路由（上）

一、ASP.NET Core Blazor之 路由

二、 使用@page指定元件的路由路徑進行跳轉

三、在找不到內容時提供自定義內容

四、使用a標籤進行頁面跳轉

一、ASP.NET Core Blazor之路由

二、使用@page指定元件的路由路徑進行跳轉