昌平黄土店至文华路路边22个雨箅子里塞满垃圾
介绍
目标
百度 除了吉利汽车外，长城汽车和北京汽车日前也纷纷曝出与国际车企巨头成立合资公司的利好消息。在 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、Visual Studio Code 和 C# 开发工具包?
.NET SDK (软件开发工具包)是使用 C# 生成和运行应用程序所需的工具和库的免费开源集合。C# 是你将在本教程中使用的面向对象的新式编程语言。
Visual Studio Code (VS Code)是全球最受欢迎的轻型、免费的开源代码编辑器。你将在此处编写 C# 代码。
C# 开发工具包是一组功能强大的 VS Code 扩展，可使 C# 开发更轻松。它可帮助你在生成应用时编写、测试和调试代码。
.NET WinGet 配置文件将为你安装 .NET 9 SDK、VS Code 和 C# 开发工具包。如果已安装某些内容，WinGet 将跳过该安装步骤。
若要使用 Visual Studio Code 构建你的第一个 .NET 应用程序，请设置环境:
-
下载并安装 .NET SDK:
下载 .NET 9 SDK x64 (Intel)
下载 .NET 9 SDK Arm64 (Apple Silicon)如果使用的是带有 Apple M1 或 M2 芯片的 Mac，则需要安装 Arm64 版本的 SDK。
-
下载和安装 VS Code:
-
打开 VS Code，并在左侧 VS Code 的活动栏中选择“扩展”按钮。在搜索栏中键入 "C#"，选择“C# 开发工具包”，然后在 C# 开发工具包扩展页上选择“安装”按钮。
![VS Code的 C# 开发工具包]()
下载并运行配置文件
单击以下链接下载 WinGet 文件：
打开下载文件夹并双击该文件以开始安装。如果要求你选择要运行该文件的应用程序，请选择 Windows 程序包管理器 客户端。
一个终端将打开，而你应该会看到 WinGet 配置文件已准备好安装 .NET 9 SDK、VS Code (如果没有)和 C# 开发工具包。
阅读许可协议并同意，方法是在终端中键入“y”，然后按 Enter。
注意: 你有责任了解要选择执行的配置设置。Microsoft 不对你创作或导入的配置文件负责。此配置可能会更改 Windows 中的设置、安装软件、更改软件设置(包括安全设置)，并代表你接受第三方程序包和服务的用户协议。运行此配置文件即表示你确认理解并同意这些资源和设置。任何安装的应用程序均由其所有者授权给你。Microsoft 既不对第三方程序包或服务负责，也不授予其许可证。
WinGet 正在安装入门所需的一切内容！安装时间将取决于计算机规格、网络速度等。可能需要 5 分钟，但最多需要 15 分钟才能完成。
某些安装步骤可能需要管理员级权限才能安装。在 Windows 任务栏 中查找闪烁的用户帐户控制 (UAC) 提示，然后单击该图标。若要继续安装，必须选择 出现提示时 是。
安装完成后，你应该在终端中看到下面的输出。
检查是否已正确安装所有内容
现在已设置环境，请转到 Windows 任务栏中的搜索，然后键入 Visual Studio 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 应用：
你可能还会关注...
