入门

ASP.NET Core Blazor 入门

作者：Daniel Roth 和 Luke 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个。 /counter 的 Counter 组件（Counter）继续递增1。

后续步骤

生成首个 Blazor 应用

其他资源

目录
入门