學習ASP.NET Core Blazor編程系列十——路由（上）
一、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頁面，我們瀏覽器的地址欄中輸//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請求傳輸到後台，經過服務器處理之後，再傳輸到前面進行渲染，而是直接在前端將頁面渲染出來。
