Blazor 教程 - 生成首个应用

介绍

目标

使用 Blazor 生成第一个 Web 应用。

先决条件

无。

完成时间

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

方案

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

本地预配向导和预配代理。

若要开始生成 .NET 应用，请下载并安装 .NET SDK (软件开发工具包)。

安装 .NET 7 SDK 说明

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

安装完成后，打开新的终端并运行以下命令:

Terminal

dotnet

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

Command prompt

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: 未找到命令错误，请确保已打开新的终端窗口。如果无法解决问题，请使用“遇到问题”按钮获取解决问题的帮助。

创建应用

在终端中，运行以下命令来创建应用:

Terminal

dotnet new blazorserver -o BlazorApp --no-https -f net7.0

此命令创建新 Blazor 应用项目，并将其放置在当前位置内名为 BlazorApp 的新目录中。

导航到由上一条命令创建的新 BlazorApp 目录:

Terminal

cd BlazorApp

快速查看 BlazorApp 目录的内容。BlazorApp 目录中已经创建了多个文件，为你提供一个可以运行的简单的 Blazor 应用。

Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。
App.razor 为应用的根组件。
Pages 目录包含应用的一些示例网页。
BlazorApp.csproj 定义应用项目及其依赖项。
Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配 5000-5300 之间的端口号并将其保存在此文件上。

请记下 BlazorApp 目录路径，因为教程后面会用到。

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

运行应用

在终端中，运行以下命令:

Terminal

dotnet watch

dotnet watch 命令将生成并启动应用，然后在每次更改代码时更新应用。可以选择Ctrl+C，以随时停止应用。

等待应用显示正在侦听 http://localhost:<port number>，然后打开浏览器并导航到该地址。在此示例中，dotnet watch 显示它正在侦听 http://localhost:7178。

转到以下页面后，你已成功运行了第一个 Blazor 应用!

显示的页面由位于 Pages 目录内的 Index.razor 文件定义。其内容如下所示:

Pages/Index.razor

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

它已包含将其设置为主页并显示文本 Hello, world! 和 Welcome to your new app 的代码。它还包含一个 SurveyPrompt 组件，可呈现指向 Blazor 反馈调查的链接。

试用计数器

在正在运行的应用中，通过单击左侧边栏中的“计数器”选项卡导航到“计数器”页。然后应显示以下页面:

选择“单击我”按钮，在不刷新页面的情况下递增计数。若要在网页中递增计数器，通常需要编写 JavaScript，但对于 Blazor，你可以使用 C#。

可以在 Pages 目录内的 Counter.razor 文件处找到 Counter 组件的实现。

Pages/Counter.razor

@page "/counter"

<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 组件。

在选择的文本编辑器中打开 Index.razor 文件。Index.razor 文件已经存在，它是在你运行 dotnet new 命令时创建的。它位于之前创建的 BlazorApp 目录内的 Pages 文件夹中。

通过在 Index.razor 文件末尾添加 <Counter /> 元素，向应用主页添加 Counter。

Pages/Index.razor

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter />

保存此更改后，dotnet watch 命令会将更改应用到正在运行的应用，以便主页上显示 Counter 组件。

修改组件

组件参数使用特性或子内容指定，这允许在子组件上设置属性。在 Counter 组件上定义参数，以指定每次点击按钮时的增量:

使用 [Parameter] 属性为 IncrementAmount 添加公共属性。
将 IncrementCount 方法更改为在递增 currentCount 值时使用 IncrementAmount。

下面的代码演示了怎样实现此目的。突出显示的行显示更改。

Pages/Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle>

<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.razor 中，更新 <Counter> 元素以添加IncrementAmount 属性，该属性会将增量更改为 10，如以下代码中突出显示的行所示:

Pages/Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter IncrementAmount="10" />

Index 组件现在具有自己的计数器，每次选择“Click me”按钮时，该计数器会递增 10，如下图所示。/counter 处的 Counter 组件(Counter.razor)会继续递增 1。

后续步骤

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

继续学习

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

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

使用 .NET 进行更多 Web 开发

浏览使用 .NET 进行 Web 开发系列的 6 部分简介! 在这里，你将生成出色的项目，并了解有关 Razor Pages、最小 API、Blazor 等的所有信息。

使用 .NET 进行 Web 开发简介

Blazor 初学者

让 Jeff 全程指导你构建完整的 Blazor 应用:

你可能还会关注...

Blazor 文档

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

Blazor 发布概念

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

生成 REST API

使用 ASP.NET 创建 REST API

Blazor 教程 - 生成第一个 Blazor 应用

介绍

目标

先决条件

完成时间

方案

本地预配向导和预配代理。

已有 Visual Studio 2022?

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

遇到错误?

创建应用

运行应用

遇到错误?

试用计数器

添加组件

修改组件

后续步骤

继续学习

使用 .NET 进行更多 Web 开发

Blazor 初学者

Blazor 文档

Blazor 发布概念

生成 REST API

报告问题

提供反馈