Blazor 教程 - 生成首个应用

介绍

目标

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

先决条件

无。

完成时间

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

方案

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

下载并安装

下载 Visual Studio 2022

如果愿意，你还可以参考教程的命令行接口版本以开始使用 Blazor。

在安装过程中，应选择“ASP.NET 和 Web 开发”工作负载(上面的安装链接已预先选择该选项)。

已有 Visual Studio 2022?

如果已有 Visual Studio 2022，请确保它处于最新状态，并且已安装所需的工作负载:

选择 Windows 徽标键，键入 Visual Studio 安装程序，然后按“输入”。
如果出现提示，则请允许安装程序进行自我更新。
如果 Visual Studio 2022 的更新可用，则将显示“更新”按钮。选择它以在修改安装之前进行更新。本教程仅适用于 Visual Studio 2022 17.8 及更高版本。
找到 Visual Studio 2022 安装并选择“修改”。
如果尚未选择，请选择“ASP.NET 和 Web 开发”工作负载并选择“修改”按钮。否则，只需关闭对话框窗口。

创建应用

启动 Visual Studio 并选择“创建新项目”。
在“创建新项目”窗口中，在搜索框中键入 Blazor，然后按 Enter。
选择“Blazor Web 应用”模板并选择“下一步”。
在“配置新项目”窗口中，输入 BlazorApp 作为项目名称，然后选择“下一步”。
在“其他信息”窗口中，如果尚未选择，则在“框架”下拉列表中选择“.NET 8.0 (长期支持)”，然后单击“继续”按钮。

创建 Blazor Web 应用时，可以从各种选项中进行选择，例如是否启用身份验证、要启用的交互式呈现模式，以及要交互的应用数量。对于此应用，请确保按如下所示选择默认值:
- 身份验证类型: 无
- 交互式呈现模式: 服务器
- 交互位置: 每页/组件

你的项目是在 Visual Studio 中创建和加载的。请使用解决方案资源管理器查看项目内容。

已创建多个文件，以为你提供可运行的简单 Blazor 应用。

Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。
在 Components 目录中:
- App.razor 为应用的根组件。
- Routes.razor 配置 Blazor 路由器。
- Pages 目录包含应用的一些示例网页。
BlazorApp.csproj 定义应用项目及其依赖项，且可以通过双击解决方案资源管理器中的 BlazorApp 项目节点进行查看。
Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。

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

运行应用

单击 Visual Studio 调试工具栏中的“开始调试”按钮(绿色箭头)以运行应用。

应用运行后，可以通过单击“热重载”按钮将代码更改应用到正在运行的应用。

可通过单击顶部工具栏中的“停止”按钮随时停止应用。

首次在 Visual Studio 中运行 Web 应用时，它将设置用于通过 HTTPS 托管应用的开发证书，然后提示你信任该证书。建议同意信任该证书。证书将仅用于本地开发，如果没有证书，大多数浏览器都会对网站的安全性进行投诉。

等待应用在浏览器中启动。转到以下页面后，你已成功运行第一个 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 组件会设置当前页面的标题，使其显示在浏览器选项卡中。

遇到错误?

如果收到错误消息“你的连接不是专用的”，错误代码为 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 文件末尾添加 <Counter /> 元素，向应用主页添加 Counter。

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

单击“热重载”按钮，以将更改应用到正在运行的应用。然后 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 2022?

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

遇到错误?

创建应用

运行应用

遇到错误?

试用计数器

添加组件

修改组件

后续步骤

继续学习

Blazor 初学者

Blazor 文档

Blazor 发布概念

生成 REST API

报告问题

提供反馈