ASP.NET Core Blazor 基础

• ASP.NET Core Blazor 基础
  • 项目实践
    • 项目环境
    • 创建项目
    • 前端@符号的变量
    • 文件讲解
    • NavLink讲解
    • 创建Razor文件
    • 事件挂载
    • 查询字符串喝分析参数

项目实践

项目环境

创建项目

前端@符号的变量

文件讲解

NavLink讲解

创建导航链接时，请使用 NavLink 组件代替 HTML 超链接元素 (<a>)。 NavLink 组件的行为方式类似于 <a> 元素，但它根据其 href 是否与当前 URL 匹配来切换 active CSS 类。 active 类可帮助用户了解所显示导航链接中的哪个页面是活动页面。

<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
    <span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>

创建Razor文件

Authors.razor

@page "/authors"
@inject NavigationManager NavigationManager
<h3>Authors</h3>
<hr />
<a href="/authors/authordetail">Bob He</a>
<br />
<button class="btn btn-primary" @onclick="Navigate">Bob He</button>
@code {
    void Navigate()
    {
        //可以通过 NavigateTo 方法命令注入的对象。该方法采用 URL 作为参数
        NavigationManager.NavigateTo("/authors/authordetail/22");
    }
}

NavigationManager对象参数

AuthorDetail.razor

@page "/authors/authordetail/{authorId:int}"
@page "/authors/authordetail"
@page "/author"
<h3>AuthorDetail</h3>
<hr />
<p>@AuthorId Bob He path "/authors/authordetail"</p>
@code {
    [Parameter]
    public int AuthorId { get; set; }
}

传参类型

运行结果

事件挂载

@implements IDisposable
@page "/authors"
@inject NavigationManager NavigationManager
<h3>Authors</h3>
<hr />
<a href="/authors/authordetail">Bob He</a>
<br />
<button class="btn btn-primary" @onclick="Navigate">Bob He</button>
@code {
    protected override void OnInitialized()
    {
        Console.WriteLine("Add HandleLocationChanged");
        NavigationManager.LocationChanged += HandleLocationChanged;
    }
    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        Console.WriteLine("HandleLocationChanged Sent");
    }
    public void Dispose()
    {
        Console.WriteLine("Remove HandleLocationChanged");
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
    void Navigate()
    {
        //跳转
        NavigationManager.NavigateTo("/authors/authordetail/22");
    }
}

跳转到该页面时加载 HandleLocationChanged 事件，当我们点击按钮进行跳转的时候，执行顺序如下：

LocationChangedEventArgs 可提供以下有关该事件的信息：

查询字符串喝分析参数

接下来我们修改 AuthorDetail.razor 页面

@using Microsoft.AspNetCore.WebUtilities
@using Swifter;
@using Swifter.Json;
@page "/authors/authordetail/{authorId:int}"
@page "/authors/authordetail"
@page "/author"
@inject NavigationManager NavigationManager
<h3>AuthorDetail</h3>
<hr />
<p>@AuthorId Bob He path "/authors/authordetail"</p>
<p>关于参数: @queryValue</p>
@code {
    [Parameter]
    public int AuthorId { get; set; }
    private string queryValue = "Not set";
    protected override void OnInitialized()
    {
        var query = new Uri(NavigationManager.Uri).Query;
        if (!string.IsNullOrEmpty(query))
        {
            queryValue = JsonFormatter.SerializeObject(QueryHelpers.ParseQuery(query));
        }
    }
}

更多请参考：https://docs.microsoft.com/zh-cn/aspnet/core/blazor/routing?view=aspnetcore-3.1