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 入门：
（可选）安装Blazor WebAssembly模板：
- 安装.Net Core 3.1 或更高版本（预览版） SDK。
- 在命令行界面中运行以下命令。 AspNetCore包具有预览版本，而 Blazor WebAssembly 处于预览阶段。
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1
按照所选工具的指导进行操作：
-
Visual Studio
1 \。 安装Visual Studio 2019 版本16.4 或更高版本以及 ASP.NET 和 web 开发工作负荷。
2。 创建新项目。
3。 选择Blazor 应用。 选择“下一步”。
4 \。 在“项目名称”字段提供项目名称，或接受默认项目名称。 确认位置项正确或提供项目的位置。 选择“创建”。
5 \。 对于 "Blazor WebAssembly 体验"，请选择 " Blazor WebAssembly 应用" 模板。 对于 Blazor 服务器体验，请选择Blazor 服务器应用程序模板。 选择“创建”。 有关这两个 Blazor 托管模型、 Blazor 服务器和Blazor WebAssembly的信息，请参阅 ASP.NET Core Blazor 宿主模型。
6 \。 按 Ctrl+F5 运行应用。
备注
如果安装了 Blazor Visual Studio extension for the ASP.NET Core Blazor （预览版6或更早版本）的先前预览版本，则可以卸载该扩展。 现在，在命令外壳中安装 Blazor 模板足以在 Visual Studio 中显示模板。
-
Visual Studio Code
1 \。 安装 Visual Studio Code。
2。 安装 C# Visual Studio Code 扩展的最新版本。
3。 对于 Blazor WebAssembly 体验，请在命令行界面中执行以下命令：
dotnet new blazorwasm -o WebApplication1
对于 Blazor 服务器体验，请在命令行界面中执行以下命令：
dotnet new blazorserver -o WebApplication1
有关这两个 Blazor 托管模型、 Blazor 服务器和Blazor WebAssembly的信息，请参阅 ASP.NET Core Blazor 宿主模型。
4 \。 在 Visual Studio Code 中打开 " WebApplication1 " 文件夹。
5 \。 对于 Blazor 服务器项目，IDE 请求你添加资产以生成和调试项目。 选择 “是” 。
6 \。 如果使用的是 Blazor 服务器应用，请使用 Visual Studio Code 调试程序运行该应用程序。 如果使用 Blazor WebAssembly 应用，请从应用的项目文件夹执行
dotnet run。7 \。 在浏览器中导航到
https://localhost:5001。 -
Visual Studio for Mac
1 \。 安装Visual Studio for Mac。
2。 选择 "文件" > "新建解决方案" 或创建一个新项目。
3。 在边栏中，选择 " .Net Core > 应用"。
4 \。 选择Blazor 服务器应用程序模板。 目前 Visual Studio for Mac 仅提供了 Blazor 服务器模板。 对于 Blazor WebAssembly 体验，请按照 .NET Core CLI选项卡上的说明进行操作。选择 Blazor 服务器模板后，选择 "下一步"。 有关这两个 Blazor 托管模型、 Blazor 服务器和Blazor WebAssembly的信息，请参阅 ASP.NET Core Blazor 宿主模型。
5 \。 将目标框架设置为 .net Core 3.1 ，然后选择 "下一步"。
6 \。 在 "项目名称" 字段中，将应用命名为
WebApplication1。 选择“创建”。7 \。 选择 "运行" > "运行但不调试 " 以在没有调试器的情况下运行应用。 通过 "启动调试" 运行应用程序，以通过调试器运行该应用程序。
如果出现了信任开发证书的提示，请信任证书并继续。
-
.NET Core CLI
对于 Blazor WebAssembly 体验，请在命令行界面中执行以下命令：
dotnet new blazorwasm -o WebApplication1 cd WebApplication1 dotnet run
对于 Blazor 服务器体验，请在命令行界面中执行以下命令：
dotnet new blazorserver -o WebApplication1 cd WebApplication1 dotnet run
有关这两个 Blazor 托管模型、 Blazor 服务器和Blazor WebAssembly的信息，请参阅 ASP.NET Core Blazor 宿主模型。
在浏览器中导航到
https://localhost:5001。
-
Visual Studio
边栏中的选项卡上提供了多个页面：
- 主页
- 计数器
- 提取数据
在“计数器”页上，选择“单击我”按钮，在不刷新页面的情况下增加计数器值。 在网页中递增计数器通常需要编写 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。
