Blazor 教程 - 生成首个应用

介绍

目标

在 Visual Studio Code 中使用 Blazor 构建第一个包含 ASP.NET Core 的 Web 应用。

先决条件

无。

完成时间

10-15 分钟 + 下载/安装时间

方案

创建、使用和修改简单的计数器组件。

更喜欢 Visual Studio 还是 CLI?

如果愿意，你还可以通过 Visual Studio 或命令行接口开始使用 Blazor。

下载并安装

若要使用 Visual Studio Code 构建你的第一个 .NET 应用程序，请设置环境:

下载并安装 .NET SDK:

安装 .NET 8 SDK 说明

下载 .NET 8 SDK x64 (Intel)
下载 .NET 8 SDK Arm64 (Apple Silicon)

如果使用的是带有 Apple M1 或 M2 芯片的 Mac，则需要安装 Arm64 版本的 SDK。
下载和安装 VS Code:

下载 VS Code
打开 VS Code，并在左侧 VS Code 的活动栏中选择“扩展”按钮。在搜索栏中键入 "C#"，选择“C# 开发工具包”，然后在 C# 开发工具包扩展页上选择“安装”按钮。

单击下面的链接可下载文件。

.NET Winget 配置文件

打开下载文件夹，然后双击该文件以开始安装。

双击该文件后，将打开一个终端，你将看到 Winget 配置文件已准备好安装 .NET 8 SDK、VS Code (如果没有)和 C# 开发工具包。

阅读许可协议并同意，方法是在终端中键入“y”，然后按 Enter。

注意: 你有责任了解要选择执行的配置设置。Microsoft 不对你创作或导入的配置文件负责。此配置可能会更改 Windows 中的设置、安装软件、更改软件设置(包括安全设置)，并代表你接受第三方程序包和服务的用户协议。运行此配置文件即表示你确认理解并同意这些资源和设置。任何安装的应用程序均由其所有者授权给你。NuGet 既不对第三方程序包或服务负责，也不授予其许可证。

Winget 现在正在安装入门所需的一切内容!完成大约需要 5 分钟，完成后，会在终端中看到下面的输出。

双击该文件后，将打开一个开发人员主页，你将看到 Winget 配置文件已准备好安装 .NET 8 SDK、VS Code (如果没有)和 C# 开发工具包。

阅读许可协议并同意，方法是单击左下角的“我同意并想要继续”，然后单击右下角的“设置为管理员”。在系统询问是否要允许开发人员主页对设备进行更改时，选择“是”。

注意: 你有责任了解要选择执行的配置设置。Microsoft 不对你创作或导入的配置文件负责。此配置可能会更改 Windows 中的设置、安装软件、更改软件设置(包括安全设置)，并代表你接受第三方程序包和服务的用户协议。运行此配置文件即表示你确认理解并同意这些资源和设置。任何安装的应用程序均由其所有者授权给你。NuGet 既不对第三方程序包或服务负责，也不授予其许可证。

开发人员主页现在正在安装入门所需的一切内容!完成大约需要 5 分钟，完成后，会在窗口中看到下面的输出。

检查是否已正确安装所有内容

设置环境后，打开新的 VS Code 终端。在工具栏中，选择“终端”，然后选择“新终端”。

在终端中，运行以下命令来检查安装。

Terminal

dotnet

如果安装成功，则应该会看到类似于以下内容的输出:

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 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 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。

如果一切正常，请选择下面的继续按钮以转到下一步。

运行应用

选择工作区左侧的“活动栏”中的“运行和调试”图标。

选择蓝色的“运行和调试”按钮。

Visual Studio Code 将打开启动配置的菜单。选择C#: BlazorApp [默认配置]。

然后，你需要选择调试程序。选择 C#。

等待应用在浏览器中启动。转到以下页面后，你已成功运行第一个 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 组件呈现其内容。@rendermode 指令为组件启用交互式服务器呈现，以便它可以处理来自浏览器的用户界面事件。

每次选中“单击我”按钮时:

已触发 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 递增。

后续步骤

恭喜你已生成并运行首个 Blazor 应用!

继续学习

现在，你已掌握基础知识，请继续使用 Microsoft Learn 上的 Blazor 自助学习模块构建第一个 Blazor 应用，你将在其中生成一个待办事项列表应用。

Microsoft Learn: 生成 Blazor 待办事项列表应用

Blazor 初学者

了解如何从头到尾生成完整的 Blazor 应用：

你可能还会关注...

Blazor 文档

浏览我们在 Blazor 上的文档，以了解如何生成出色的 Web 应用。

Blazor 发布概念

请遵循 Microsoft Learn，了解如何使用 Azure Static Web Apps 发布 Blazor 应用和 .NET API。

生成 REST API

使用 ASP.NET 创建 REST API

使用 Blazor 利用 ASP.NET Core 生成第一个 Web 应用

介绍

目标

先决条件

完成时间

方案

更喜欢 Visual Studio 还是 CLI?

下载并安装

选择终端或开发人员主页安装说明

检查是否已正确安装所有内容

遇到错误?

创建应用

运行应用

遇到错误?

试用计数器

添加组件

修改组件

后续步骤

继续学习

Blazor 初学者

Blazor 文档

Blazor 发布概念

生成 REST API

报告问题

提供反馈