使用 Blazor 利用 ASP.NET Core 生成第一个 Web 应用
介绍
目标
在 Visual Studio Code 中使用 Blazor 构建第一个包含 ASP.NET Core 的 Web 应用。
先决条件
无。
macOS 12.0 或更高版本。
完成时间
10-15 分钟 + 下载/安装时间
方案
创建、使用和修改简单的计数器组件。
更喜欢 Visual Studio 还是 CLI?
如果愿意,你还可以通过 Visual Studio 或命令行接口开始使用 Blazor。
下载并安装
若要生成第一个 .NET 应用程序,需要安装 .NET SDK、Visual Studio Code 和 C# 开发工具包。
.NET SDK (软件开发工具包)是使用 C# 生成和运行应用程序所需的工具和库的免费开源集合。C# 是你将在本教程中使用的面向对象的新式编程语言。
Visual Studio Code (VS Code)是全球最受欢迎的轻型、免费的开源代码编辑器。你将在此处编写 C# 代码。
C# 开发工具包是一组功能强大的 VS Code 扩展,可使 C# 开发更轻松。它可帮助你在生成应用时编写、测试和调试代码。
.NET Winget 配置文件将为你安装 .NET 8 SDK、VS Code 和 C# 开发工具包。如果已安装某些内容,Winget 将跳过该安装步骤。
若要使用 Visual Studio Code 构建你的第一个 .NET 应用程序,请设置环境:
-
下载并安装 .NET SDK:
下载 .NET 8 SDK x64 (Intel)
下载 .NET 8 SDK Arm64 (Apple Silicon)如果使用的是带有 Apple M1 或 M2 芯片的 Mac,则需要安装 Arm64 版本的 SDK。
-
下载和安装 VS Code:
-
打开 VS Code,并在左侧 VS Code 的活动栏中选择“扩展”按钮。在搜索栏中键入 "C#",选择“C# 开发工具包”,然后在 C# 开发工具包扩展页上选择“安装”按钮。
单击下面的链接可下载文件。
打开下载文件夹,然后双击该文件以开始安装。
选择终端或开发人员主页安装说明
双击该文件后,将打开一个终端,你将看到 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 分钟,完成后,会在窗口中看到下面的输出。
检查是否已正确安装所有内容
现在已设置环境,请转到 Windows 任务栏中的搜索,然后键入 Visual Studio Code。单击应用程序以打开 VS Code。
设置环境后,打开新的 VS Code 终端。在工具栏中,选择“终端”,然后选择“新终端”。
注意: 请注意,如果通过终端打开 VS Code,则需要启用工作区信任。
现在,通过转到工具栏并选择终端,然后选择新终端来打开新终端。
在终端中,运行以下命令来检查安装。
dotnet
如果安装成功,则应该会看到类似于以下内容的输出:
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
文件定义。其内容如下所示:
@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
组件的实现。
@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
。
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
重新运行应用以查看更改。然后,Counter
组件将显示在主页上。
保存此更改后,dotnet watch
命令会将更改应用到正在运行的应用,以便主页上显示 Counter
组件。
修改组件
组件参数使用特性或子内容指定,这允许在子组件上设置属性。在 Counter
组件上定义参数,以指定每次点击按钮时的增量:
- 使用
[Parameter]
属性为IncrementAmount
添加公共属性。 - 将
IncrementCount
方法更改为在递增currentCount
值时使用IncrementAmount
。
下面的代码演示了怎样实现此目的。突出显示的行显示更改。
@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,如以下代码中突出显示的行所示:
@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 递增。
后续步骤
恭喜你已生成并运行首个 Blazor 应用!
继续学习
现在,你已掌握基础知识,请继续使用 Microsoft Learn 上的 Blazor 自助学习模块构建第一个 Blazor 应用,你将在其中生成一个待办事项列表应用。
Microsoft Learn: 生成 Blazor 待办事项列表应用
Blazor 初学者
了解如何从头到尾生成完整的 Blazor 应用:
你可能还会关注...