介绍
目标
在 Visual Studio Code 中使用 Blazor 构建第一个包含 ASP.NET Core 的 Web 应用。
先决条件
完成时间
10-15 分钟 + 下载/安装时间
方案
创建、使用和修改简单的计数器组件。
更喜欢 Visual Studio 还是 CLI?
如果愿意，你还可以通过 Visual Studio 或命令行接口开始使用 Blazor。
下载并安装
若要生成第一个 .NET 应用程序，需要安装 .NET SDK、Visual Studio Code 和 C# 开发工具包。
什么是 .NET SDK、Visual Studio Code 和 C# 开发工具包?
.NET SDK (软件开发工具包)是使用 C# 生成和运行应用程序所需的工具和库的免费开源集合。C# 是你将在本教程中使用的面向对象的新式编程语言。
Visual Studio Code (VS Code)是全球最受欢迎的轻型、免费的开源代码编辑器。你将在此处编写 C# 代码。
C# 开发工具包是一组功能强大的 VS Code 扩展，可使 C# 开发更轻松。它可帮助你在生成应用时编写、测试和调试代码。
.NET WinGet 配置文件将为你安装 .NET 9 SDK、VS Code 和 C# 开发工具包。如果已安装某些内容，WinGet 将跳过该安装步骤。
若要使用 Visual Studio Code 构建你的第一个 .NET 应用程序，请设置环境:
-
下载并安装 .NET SDK:
-
下载和安装 VS Code:
下载 VS Code
-
打开 VS Code，并在左侧 VS Code 的活动栏中选择“扩展”按钮。在搜索栏中键入 "C#"，选择“C# 开发工具包”，然后在 C# 开发工具包扩展页上选择“安装”按钮。
![VS Code的 C# 开发工具包]()
下载并运行配置文件
单击以下链接下载 WinGet 文件：
打开下载文件夹并双击该文件以开始安装。如果要求你选择要运行该文件的应用程序，请选择 Windows 程序包管理器 客户端。
![下载文件夹中的 Dotnet 配置文件]()
一个终端将打开，而你应该会看到 WinGet 配置文件已准备好安装 .NET 9 SDK、VS Code (如果没有)和 C# 开发工具包。
![Dotnet sdk、vscode 和 csharp 开发工具包安装]()
阅读许可协议并同意，方法是在终端中键入“y”，然后按 Enter。
注意: 你有责任了解要选择执行的配置设置。Microsoft 不对你创作或导入的配置文件负责。此配置可能会更改 Windows 中的设置、安装软件、更改软件设置(包括安全设置)，并代表你接受第三方程序包和服务的用户协议。运行此配置文件即表示你确认理解并同意这些资源和设置。任何安装的应用程序均由其所有者授权给你。Microsoft 既不对第三方程序包或服务负责，也不授予其许可证。
![许可协议屏幕]()
WinGet 正在安装入门所需的一切内容！安装时间将取决于计算机规格、网络速度等。可能需要 5 分钟，但最多需要 15 分钟才能完成。
某些安装步骤可能需要管理员级权限才能安装。在 Windows 任务栏 中查找闪烁的用户帐户控制 (UAC) 提示，然后单击该图标。若要继续安装，必须选择 出现提示时 是。
![显示 UAC 图标的 Windows 任务栏屏幕截图]()
安装完成后，你应该在终端中看到下面的输出。
![Dotnet sdk、vscode 和 csharp 开发工具包安装完成]()
检查是否已正确安装所有内容
现在已设置环境，请转到 Windows 任务栏中的搜索，然后键入 Visual Studio Code。单击应用程序以打开 VS Code。
设置环境后，打开新的 VS Code 终端。在工具栏中，选择“终端”，然后选择“新终端”。
![在 Windows 搜索栏中查找 VSCode]()
注意： 如果通过终端打开VS Code，则需要启用 工作区信任。
现在，通过转到工具栏并选择终端，然后选择新终端来打开新终端。
![VS Code 新终端]()
在终端中，运行以下命令来检查安装。
如果安装成功，则应该会看到类似于以下内容的输出:
Terminal
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.
如果一切正常，请选择下面的 继续 按钮以转到下一步。
遇到错误?
如果收到“未将 "dotnet" 识别为内部或外部命令”错误，请确保已打开新的 VS Code 终端。如果重启 VS Code 或重启计算机没有解决问题，请使用“我遇到了问题”按钮以获取解决问题的帮助。
创建应用
- 按 CTRL+SHIFT+P，在 VS Code 中打开命令面板。
- 按 CMD+SHIFT+P，在 VS Code 中打开命令面板。
- 键入 ".NET: " 来查看可使用 C# 开发工具包运行的命令!
- 查找“.NET: 新建项目”，并将其选中来创建新的 .NET 项目。
- 向下滚动并选择“Blazor Web 应用”。
- 选择要保存项目的文件夹位置。
- 出现提示时，在命令面板中命名项目
BlazorApp。按 Enter 进行确认。
选中复选框并选择是，我信任作者以启用工作区信任。
![工作区信任对话框]()
如果你有 Visual Studio 订阅，请登录你的帐户。如果没有看到弹出提示，请单击窗口右下角 VS Code 状态栏中的 C# 图标。
![使用 VS 订阅登录]()
在边栏中，确保 VS Code 资源管理器已打开。此处将显示 BlazorApp 文件夹和解决方案资源管理器。按照以下视频进行操作: 折叠 BlazorApp 文件夹，打开解决方案资源管理器，打开 BlazorApp 项目，然后将解决方案资源管理器拖放到更高的位置。
- 折叠 VS Code 资源管理器中的
BlazorApp 文件夹。
- 单击解决方案资源管理器左侧的 V 形图标可将其展开。
- 单击“解决方案资源管理器”中
BlazorApp 项目的左侧的 V 形图标可将其展开。
- 将“解决方案资源管理器”拖放到 BlazorApp下。
已在 Visual Studio Code 中创建并加载你的项目。使用“解决方案资源管理器”查看项目内容。
![解决方案资源管理器包含为项目创建的文件夹和文件的列表]()
已创建多个文件，以为你提供可运行的简单 Blazor 应用。
Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。-
在 Components 目录中:
App.razor 为应用的根组件。Routes.razor 配置 Blazor 路由器。Pages 目录包含应用的一些示例网页。
BlazorApp.csproj 定义应用项目及其依赖项，且可以通过双击解决方案资源管理器中的 BlazorApp 项目节点进行查看。Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。
如果一切正常，请选择下面的 继续 按钮以转到下一步。
运行应用
选择工作区左侧的“活动栏”中的“运行和调试”图标。
![使用 VS Code 运行按钮运行应用程序]()
选择蓝色的“运行和调试”按钮。
Visual Studio Code 将打开启动配置的菜单。选择C#: BlazorApp [默认配置]。
![使用 VS Code 运行按钮运行应用程序]()
然后，你需要选择调试程序。选择 C#。
![使用 VS Code 运行按钮运行应用程序]()
等待应用在浏览器中启动。转到以下页面后，你已成功运行第一个 Blazor 应用!
![站点主页包含一些文本，并在左侧显示了多个选项卡，供你点击和浏览。]()
可通过单击顶部工具栏中的停止按钮随时停止应用。
![使用 VS Code 运行按钮运行应用程序]()
若要重新运行应用程序，请选择右上角的“运行”按钮右侧的下拉菜单，然后选择“运行与此文件关联的项目”。
![使用 VS Code 运行按钮运行应用程序]()
显示的页面由位于 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 组件会设置当前页面的标题，使其显示在浏览器选项卡中。
遇到错误?
如果收到错误消息“你的连接不是专用的”，错误代码为 NET::ERR_CERT_INVALID，请尝试重新启动所有浏览器窗口，以便浏览器可以选取新证书，然后再次运行应用程序。
如果无法解决遇到的问题，请选择下面的“我遇到了问题”按钮，以获取解决问题的帮助。
试用计数器
在正在运行的应用中，通过单击左侧边栏中的“计数器”选项卡导航到“计数器”页。然后应显示以下页面:
![“计数器”页提供“单击我”按钮，用于增加页面上显示的计数。]()
选择“单击我”按钮，在不刷新页面的情况下递增计数。若要在网页中递增计数器，通常需要编写 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 组件呈现其内容。@rendermode 指令为组件启用交互式服务器呈现，以便它可以处理来自浏览器的用户界面事件。
每次选中“单击我”按钮时:
- 已触发
onclick 事件。
- 调用
IncrementCount 方法。
currentCount 为递增。- 呈现该组件以显示更新的计数。
添加组件
每个 razor 文件都会定义一个可重复使用的 UI 组件。
在 Visual Studio 中打开 Home.razor 文件。Home.razor 文件已存在，并且是在创建项目时创建的。它位于之前创建的 BlazorApp 目录内的 Components/Pages 文件夹中。
在选择的文本编辑器中打开 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 />
重新运行应用以查看更改。然后，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 递增。
Home 组件现在具有自己的计数器，每次选择“单击我”按钮时，该计数器会递增 10，如下图所示。/counter 处的 Counter 组件(Counter.razor)将继续按 1 递增。
![当前，主页包含以 10 递增的计数器，显示计数器为 40。]()
后续步骤
恭喜你已生成并运行首个 Blazor 应用!
继续学习
现在，你已掌握基础知识，请继续使用 Microsoft Learn 上的 Blazor 自助学习模块构建第一个 Blazor 应用，你将在其中生成一个待办事项列表应用。
Microsoft Learn: 生成 Blazor 待办事项列表应用
Blazor 初学者
了解如何从头到尾生成完整的 Blazor 应用：
你可能还会关注...
