nuget打包靜態資源的問題前段時間做了個區劃包, 爬了點數據生成了一個 region-tree.json 文件, 存放了全國一直到街道級的區劃數據然後又寫了點代碼解析處理這個文件當時的 csproj 中對這個資源是這樣引用的 <ItemGroup> <None Include="region ...

學習ASP.NET Core Blazor編程系列一——綜述學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（上）學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（中）

學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（下）

學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（完）學習ASP.NET Core Blazor編程系列三——實體學習ASP.NET Core Blazor編程系列四——遷移學習ASP.NET Core Blazor編程系列五——列表頁面學習ASP.NET Core Blazor編程系列六——初始化數據學習ASP.NET Core Blazor編程系列七——新增圖書學習ASP.NET Core Blazor編程系列八——數據校驗學習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頁面，我們瀏覽器的地址欄中輸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值。如下圖。