入门

ASP.NET Core Blazor 入门

作者:Daniel RothLuke Latham

重要

Blazor WebAssembly 为预览版状态

ASP.NET Core 3.0 支持 Blazor Server 。 Blazor WebAssembly 在 ASP.NET Core 3.1 中为预览版。

Blazor 入门:

  1. 安装.Net Core 3.1 SDK

  2. (可选)安装Blazor WebAssembly模板:

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1
    
  3. 按照所选工具的指导进行操作:


边栏中的选项卡上提供了多个页面:

  • 主页
  • 计数器
  • 提取数据

在“计数器”页上,选择“单击我”按钮,在不刷新页面的情况下增加计数器值。 在网页中递增计数器通常需要编写 JavaScript,但 Blazor 可以使用C#。

Pages/Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @_currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int _currentCount = 0;

    private void IncrementCount()
    {
        _currentCount++;
    }
}

浏览器中 /counter 的请求由顶部的 @page 指令指定,导致 Counter 组件呈现其内容。 组件呈现为呈现树的内存中表示形式,然后可以使用它以一种灵活而高效的方式更新 UI。

每次选择 "单击我" 按钮时:

  • 引发 onclick 事件。
  • 调用 IncrementCount 方法。
  • currentCount 递增。
  • 再次呈现该组件。

运行时将新内容与以前的内容进行比较,并仅将更改的内容应用到文档对象模型(DOM)。

使用 HTML 语法将组件添加到其他组件。 例如,通过向 Index 组件添加 <Counter /> 元素,将 Counter 组件添加到应用的主页。

Pages/Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

运行应用程序。 主页有由 Counter 组件提供的自己的计数器。

使用特性或子内容指定组件参数,这些参数允许你设置子组件的属性。 若要将参数添加到 Counter 组件,请更新组件的 @code 块:

  • 使用 [Parameter] 属性为 IncrementAmount 添加公共属性。
  • 增加 currentCount 的值时,更改 IncrementCount 方法以使用 IncrementAmount

Pages/Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @_currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int _currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        _currentCount += IncrementAmount;
    }
}

使用特性指定 Index 组件的 <Counter> 元素中的 IncrementAmount

Pages/Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

运行应用程序。 每次选择 "单击我" 按钮时,Index 组件都有其自己的计数器,每次增加10个。 /counterCounter 组件(Counter)继续递增1。

后续步骤

生成首个 Blazor 应用

其他资源