ASP.NET Core Blazor Webassembly 之 路由

ASP.NET Core Blazor Webassembly 之 路由

web最精妙的設計就是通過url把多個頁面串聯起來，并且可以互相跳轉。我們開發系統的時候總是需要使用路由來實作頁面間的跳轉。傳統的web開發主要是使用a标簽或者是服務端redirect來跳轉。那今天來看看Blazor是如何進行路由的。

使用@page指定元件的路由path

我們可以在Blazor裡給每個元件指定一個path，當路由比對的時候會顯示這個元件。

@page "/page/a"

PAGE A           

@code {

}

通路/page/a 看到Page A頁面被渲染出來了。

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

使用a标簽進行頁面跳轉

a标簽作為超連結是我們web開發最常用的跳轉方式，blazor同樣支援。

建立Page B

@page "/page/b"

PAGE B           

在Page A頁面添加一個a标簽進行跳轉：

PAGE A           

<a href="/page/b">Page B</a>           

運作一下試試：

注意：使用a連接配接在頁面間進行跳轉不會發生http請求到背景，頁面是直接在前端渲染出來的。

通過路由傳參

通過http的url進行頁面間傳參是我們web開發的正常操作。下面我們示範下如何從Page A傳遞一個參數到Page B。我們預設Page A裡面有個UserName需要傳遞到Page B，并且顯示出來。

通過path傳參

通過url傳參一般有兩種方式，一種是直接把參數組合在path裡，比如“/page/b/小明”這樣。

修改Page A：

PAGE A           

<a href="/page/b/@userName">Page B</a>           

private string userName = "小明";           

通過把userName組合到path上傳遞給Page B。

修改Page B：

@page "/page/b/{userName}"

PAGE B           

userName: @userName           

[Parameter]
public string userName { get; set; }           

Page B 使用一個“/page/b/{userName}” pattern來比對userName,并且userName需要标記[Parameter]并且設定為public。

通過QueryString傳參

除了把參數直接拼接在path裡，我們還習慣通過QueryString方式傳遞，比如“/page/b?username=小明”。

PAGE A           

<a href="/page/b?username=@userName">Page B</a>           

private string userName = "小明";           

首先安裝一個工具庫：

Install-Package Microsoft.AspNetCore.WebUtilities -Version 2.2.0

PAGE B           

userName: @UserName           

@using Microsoft.AspNetCore.WebUtilities;

@inject NavigationManager NavigationManager;

[Parameter]
public string UserName { get; set; }
           

protected override void OnInitialized()
{
    var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
    QueryHelpers.ParseQuery(uri.Query).TryGetValue("username", out Microsoft.Extensions.Primitives.StringValues userName);
    Console.WriteLine(NavigationManager.Uri);
    UserName = userName.ToString();
    Console.WriteLine(UserName);

    base.OnInitialized();
}           

頁面擷取QueryString的傳參比較麻煩，Blazor并沒有進行封裝。是以我們需要通過QueryHelpers.ParseQuery方法手工把QueryString格式化成字典形式，然後擷取對應的參數。QueryHelpers類存在Microsoft.AspNetCore.WebUtilities這個庫裡，需要通過nuget安裝。

NavLink

NavLink是個導航元件，它其實就是封裝了a标簽。當選中的時候，也就是目前的url跟它的href一緻的時候，會自動在class上加上active類，是以可以用來控制選中的樣式。預設的3個導航菜單就是用的NavLink。

比如導航到counter的NavLink：

<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>           

最後翻譯成html：

counter

<span class="oi oi-plus" aria-hidden="true"></span> Counter           

NavigationManager

有的時候我們可能需要在代碼裡進行導航，如果是JavaScript我們會用window.location來切換頁面，Blazor為我們提供了相應的封裝：NavigationManager。使用NavigationManager可以通過代碼直接進行頁面間的跳轉。我們在Page A頁面放個按鈕然後通過按鈕的點選事件進行跳轉：

PAGE A           

go to B           

@inject NavigationManager NavigationManager

private void GoToB()
{
    NavigationManager.NavigateTo("/page/b?username=小貓");
}
           

修改Page A的代碼，注入NavigationManager對象，通過NavigationManager.NavigateTo方法進行跳轉。

擴張Back方法

Blazor封裝的NavigationManager咋一看以為跟WPF的NavigationService一樣，我想當然的覺得裡面肯定有個Back方法可以進行後退。但是查了一番發現還真的沒有，這就比較尴尬了，沒辦法隻能使用JavaScript來實作了。

為了友善我們給NavigationManager直接寫個擴充方法吧。

首先修改Program把IServiceCollection暴露出來：

public class Program
{
    public static IServiceCollection Services;

    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
        Services = builder.Services;

        await builder.Build().RunAsync();
    }
}           

擴充類：

public static class Ext

{
    public static void Back(this NavigationManager navigation)
    {
        var jsruntime = Program.Services.BuildServiceProvider().GetService<IJSRuntime>();
        jsruntime.InvokeVoidAsync("history.back");
    }
}           

這個擴充方法很簡單，從DI容器裡擷取IJSRuntime的執行個體對象，通過它去調用JavaScript的history.back方法。

PAGE B           

userName: @UserName           

<button @onclick="GoBack">
    Go back
</button>           

[Parameter]
public string UserName { get; set; }
           

protected override void OnInitialized()
{
    var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
    QueryHelpers.ParseQuery(uri.Query).TryGetValue("username", out Microsoft.Extensions.Primitives.StringValues userName);
    Console.WriteLine(NavigationManager.Uri);
    UserName = userName.ToString();
    Console.WriteLine(UserName);

    base.OnInitialized();
}

private void GoBack()
{
    NavigationManager.Back();
}           

在Page B頁面上添加一個按鈕，點選調用NavigationManager.Back方法就能回到上一頁。

總結

到此Blazor路由的内容學習的差不多了，整體上沒有什麼特别的，就是NavigationManager隻有前進方法沒有後退是比較讓我震驚的。

作者：Agile.Zhou(kklldog)

出處：

http://www.cnblogs.com/kklldog/