介绍
目标
使用 Blazor 利用 ASP.NET Core 生成第一个 Web 应用。
先决条件
完成时间
10-15 分钟
方案
创建、使用和修改简单的计数器组件。
更喜欢使用 Visual Studio?
可以改为试用我们的 Visual Studio 教程。
下载并安装
若要开始生成 .NET 应用，请下载并安装 .NET SDK。
检查是否已正确安装所有内容
Command prompt
dotnet --version
如果安装成功，应会看到输出版本 8.0.100 或更高版本:
如果一切正常，请选择下面的 继续 按钮以转到下一步。
遇到错误?
如果收到“未将‘dotnet’识别为内部或外部命令”错误，请确保已打开新的命令提示符。如果快速重启计算机没有解决问题，请使用“我遇到了问题”按钮以获取解决问题的帮助。
创建应用
在命令提示符下，运行以下命令以创建应用:
Command prompt
dotnet new blazor -o BlazorApp
此命令创建新 Blazor Web 应用项目，并将其放置在当前位置内名为 BlazorApp 的新目录中。
导航到由上一条命令创建的新 BlazorApp 目录:
Command prompt
cd BlazorApp
快速查看 BlazorApp 目录的内容。
BlazorApp 目录中已经创建了多个文件，为你提供一个可以运行的简单的 Blazor 应用。
Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。-
在 Components 目录中:
App.razor 为应用的根组件。Routes.razor 配置 Blazor 路由器。Pages 目录包含应用的一些示例网页。
BlazorApp.csproj 定义应用项目及其依赖项。Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。
请记下 BlazorApp 目录路径，因为教程后面会用到。
如果一切正常，请选择下面的 继续 按钮以转到下一步。
遇到错误?
如果你收到类似于“无法创建模版 "Blazor Web 应用"。对路径 "C:\Windows\System32\BlazorApp" 的访问被拒绝”的消息，请将当前目录更改为有权在其中新建文件夹的目录，然后尝试再次运行该命令。
如果在尝试创建项目时 Windows 找不到 SDK，且你确定已安装 SDK，则计算机可能存在 PATH 环境变量问题。请参阅此 Stack Overflow 帖子，获取如何诊断并解决此问题的说明。
如果无法解决遇到的问题，请选择下面的“我遇到了问题”按钮，以获取解决问题的帮助。
运行应用
Command prompt
dotnet watch
dotnet watch 命令将生成并启动应用，然后在每次更改代码时更新应用。可以选择Ctrl+C，以随时停止应用。
等待应用显示正在侦听 http://localhost:<port number> 并等待浏览器在该地址启动。
转到以下页面后，你已成功运行了第一个 Blazor 应用!
![站点主页包含一些文本，并在左侧显示了多个选项卡，供你点击和浏览。]()
显示的页面由位于 Components/Pages 目录内的 Home.razor 文件定义。其内容如下所示:
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
它已包含将它设置为主页的代码，并显示文本Hello, world! 和 Welcome to your new app。PageTitle 组件会设置当前页面的标题，使其显示在浏览器选项卡中。
遇到错误?
如果无法解决遇到的问题，请选择下面的“我遇到了问题”按钮，以获取解决问题的帮助。
试用计数器
在正在运行的应用中，通过单击左侧边栏中的“计数器”选项卡导航到“计数器”页。然后应显示以下页面:
![“计数器”页提供“单击我”按钮，用于增加页面上显示的计数。]()
选择“单击我”按钮，在不刷新页面的情况下递增计数。若要在网页中递增计数器，通常需要编写 JavaScript，但对于 Blazor，你可以使用 C#。
可以在 Components/Pages 目录内的 Counter.razor 文件处找到 Counter 组件的实现。
Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">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 组件呈现其内容。
每次选中“单击我”按钮时:
- 已触发
onclick 事件。
- 调用
IncrementCount 方法。
currentCount 为递增。- 呈现该组件以显示更新的计数。
添加组件
每个 razor 文件都会定义一个可重复使用的 UI 组件。
在选择的文本编辑器中打开 Home.razor 文件。Home.razor 文件已经存在，它是在你运行 dotnet new 命令时创建的。它位于之前创建的 BlazorApp 目录内的 Components/Pages 文件夹中。
通过在 Home.razor 文件末尾添加 <Counter /> 元素，向应用主页添加 Counter。
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
保存此更改后，dotnet watch 命令会将更改应用到正在运行的应用，以便主页上显示 Counter 组件。
![现在，主页包含显示计数和按钮的“计数器”。]()
修改组件
组件参数使用特性或子内容指定，这允许在子组件上设置属性。在 Counter 组件上定义参数，以指定每次点击按钮时的增量:
- 使用
[Parameter] 属性为 IncrementAmount 添加公共属性。
- 将
IncrementCount 方法更改为在递增 currentCount 值时使用 IncrementAmount。
下面的代码演示了怎样实现此目的。突出显示的行显示更改。
Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">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;
}
}
在 Home.razor 中，更新 <Counter> 元素以添加 IncrementAmount 属性，该属性会将增量更改为 10，如以下代码中突出显示的行所示:
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />
Home 组件现在具有自己的计数器，每次选择“单击我”按钮时，该计数器会递增 10，如下图所示。/counter 处的 Counter 组件(Counter.razor)将继续按 1 递增。
![当前，主页包含以 10 递增的计数器，显示计数器为 40。]()
后续步骤
恭喜你已生成并运行首个 Blazor 应用!
继续学习
现在，你已掌握基础知识，请继续使用 Microsoft Learn 上的 Blazor 自助学习模块构建第一个 Blazor 应用，你将在其中生成一个待办事项列表应用。
Microsoft Learn: 生成 Blazor 待办事项列表应用
Blazor 初学者
了解如何从头到尾生成完整的 Blazor 应用：
你可能还会关注...
