Note
此版本不是本文的最新版本。 要查看当前版本，请参阅本文的.NET 9 版本。
Warning
此版本的 ASP.NET Core 不再受支持。 有关详细信息，请参阅 .NET 和 .NET Core 支持策略。 要查看当前版本，请参阅本文的.NET 9 版本。
Important
此信息与预发布产品相关，相应产品在商业发布之前可能会进行重大修改。 Microsoft对此处提供的信息不作任何明示或暗示的保证。
要查看当前版本，请参阅本文的.NET 9 版本。
本教程演示如何使用 .NET CLI 创建、运行和修改 ASP.NET Core Blazor Web App 。 Blazor 是一个 .NET 前端 Web 框架，支持在单个编程模型中同时支持服务器端呈现和客户端交互性。
你将了解如何：
创建 Blazor Web App。 运行应用。 更改应用。 关闭应用。 Prerequisites在 下载 .NET 时获取并安装最新的 .NET SDK。
创建 Blazor Web App将命令 shell 打开到示例应用的合适位置，并使用以下命令创建命令 Blazor Web App。 该 -o|--output 选项为项目创建文件夹并命名项目 BlazorSample：
dotnet new blazor -o BlazorSample 运行应用使用以下命令将目录更改为 BlazorSample 文件夹：
cd BlazorSample该 dotnet watch 命令运行应用，并将默认浏览器打开到应用的登陆页面：
dotnet watch
使用应用的边栏导航，访问“计数器”页，可在其中选择 Click me 按钮来递增计数器。
更改应用
使浏览器保持打开状态，并加载“计数器”页。 通过使用 dotnet watch 命令来运行应用，你可以对应用的标记和代码进行更改，而无需重新生成应用以反映浏览器中的更改。
Counter Razor呈现计数器网页的组件位于Components/Pages/Counter.razor项目中。 Razor 是一种语法，用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。
在文本编辑器中打开 Counter.razor 文件，记录下几行有意思的代码，这些代码用于渲染内容并使组件的计数器功能正常工作。
Components/Pages/Counter.razor:
@page "/counter" Counter CounterCurrent count: @currentCount
Click me @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }该文件以一行开头，指示组件的相对路径（/counter）：
@page "/counter"页面的标题由 标记设置：
Counter显示 H1 标题：
Counter一个段落元素（
）显示当前的计数，该计数存储在一个名为currentCount的变量中：
Current count: @currentCount
按钮（）允许用户增加计数器，此操作在单击按钮时会执行一个名为 IncrementCount 的 C# 方法。
Click me该 @code 块包含组件执行的 C# 代码：
计数器变量 currentCount 是用初始值为零建立的。 定义 IncrementCount 方法。 每次调用该方法时，方法中的代码都会递增 currentCount 变量。 private int currentCount = 0; private void IncrementCount() { currentCount++; }让我们更改 IncrementCount 方法中计数器的增量。
更改行，以便每次调用 currentCount 时，IncrementCount 都会递增 10：
- currentCount++; + currentCount += 10;保存文件。
保存文件后，正在运行的应用就会自动更新，因为你使用了 dotnet watch 该命令。 返回到浏览器中的应用，然后选择“计数器”页面中的 Click me 按钮。 见证计数器现在如何从其现有值为 1 到 11 的值递增。 每次选择按钮时，值都会递增 10。
关闭应用
执行以下步骤：
关闭浏览器窗口。 若要关闭应用，请在命令行界面中按 Ctrl+C 。Congratulations! 你已成功完成本教程。
Next steps在本教程中，你将学习到如何：
创建 Blazor Web App。 运行应用。 更改应用。 关闭应用。本教程介绍如何使用 .NET CLI 创建并运行 ASP.NET Core Web 应用。
有关 Blazor 教程，请参阅 ASP.NET Core Blazor 教程。
你将了解如何：
创建 Razor Pages 应用。 运行应用。 更改应用。 关闭应用。 Prerequisites在 下载 .NET 时获取并安装最新的 .NET SDK。
创建 Razor Pages 应用将命令 shell 打开到示例应用的合适位置，并使用以下命令创建 Razor Pages 应用。 该 -o|--output 选项为项目创建文件夹并命名项目 RazorPagesSample：
dotnet new webapp -o RazorPagesSample 运行应用使用以下命令将目录更改为 RazorPagesSample 文件夹：
cd RazorPagesSample该 dotnet watch 命令运行应用，并将默认浏览器打开到应用的登陆页面：
dotnet watch更改应用
在文本编辑器中打开 Pages/Index.cshtml 文件。
使用“Welcome”问候语的行后，添加以下行以显示本地系统日期和时间：
The time on the server is @DateTime.Now
保存更改。
保存文件后，正在运行的应用就会自动更新，因为你使用了 dotnet watch 该命令。
刷新浏览器中的页面以查看结果：
关闭应用
若要关闭应用，请执行以下作：
关闭浏览器窗口。 在命令行界面中按 Ctrl+C 。Congratulations! 你已成功完成本教程。
Next steps在本教程中，你将学习到如何：
创建 Razor Pages 应用。 运行应用。 更改应用。 关闭应用。若要了解有关 ASP.NET Core 基础知识的详细信息，请参阅以下内容：
ASP.NET Core 基础知识概述
Additional tutorials App type Scenario Tutorials Web app 新的服务器和客户端 Web 开发 Blazor 生成 Blazor 待办事项列表应用 并 生成 Blazor 电影数据库应用（概述） Web API 使用最少 API 处理基于服务器的数据处理 教程：使用 ASP.NET Core 创建最小 API 远程过程调用 （RPC） 应用 使用协议缓冲区的协定优先服务 在 ASP.NET Core 中创建 .NET gRPC 客户端和服务器 Real-time app 服务器/客户端双向通信 ASP.NET Core 入门 SignalR App type Scenario Tutorials Web app 新的服务器和客户端 Web 开发 Blazor 生成 Blazor 待办事项列表应用 并 生成 Blazor 电影数据库应用（概述） Web API 基于服务器的数据处理 教程：使用 ASP.NET Core 创建基于控制器的 Web API 远程过程调用 （RPC） 应用 使用协议缓冲区的协定优先服务 在 ASP.NET Core 中创建 .NET gRPC 客户端和服务器 Real-time app 服务器/客户端双向通信 ASP.NET Core 入门 SignalR Additional resources .NET 简介 Visual Studio Visual Studio Code .NET 开发者社区 .NET Live TV