练习 - 使用 Blazor 组件创建用户界面
在本练习中,你将开始为披萨派送公司创建一个新的 Blazing Pizza 应用。 公司从使用的旧站点提供了当前的 CSS、图像和 HTML。
备注
本模块使用 .NET CLI 和 Visual Studio Code 进行本地开发。 完成本模块后,你可以使用 Visual Studio (Windows) 或 Visual Studio for Mac (macOS) 来应用此概念。 可以使用适用于 Windows、Linux 和 macOS 的 Visual Studio Code 继续开发。
如果之前尚未创建 Blazor 应用,请按照 Blazor 设置说明安装正确版本的 .NET,并检查计算机是否设置正确。 停止“创建应用”步骤。
创建新的 Blazor 应用
此模块使用 .NET 6.0 SDK。 通过在首选终端中运行以下命令,确保你已安装 .NET 6.0:
dotnet --list-sdks
将显示类似于下面的输出:
3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]
确保列出了以 6
开头的版本。 如果未列出任何版本或未找到命令,请安装最新的 .NET 6.0 SDK。
借助 .NET,可以使用任何版本的 Visual Studio 或终端命令创建新项目。 以下练习将演示使用终端和 Visual Studio Code 的步骤。
打开 Visual Studio Code。
选择“视图”,以便从 Visual Studio Code 中打开集成终端。 然后在主菜单上选择“终端”。
在终端中,转到要创建项目的位置。
运行 dotnet 终端命令:
dotnet new blazorserver -o BlazingPizza --no-https true -f net6.0
此命令在名为 BlazingPizza 的文件夹中创建一个新的 Blazor 服务器项目。 它还告知项目禁用 HTTPS。
选择“文件”>“打开文件夹”。
在“打开”对话框中,转到 BlazingPizza 文件夹,然后选择“选择文件夹”。
Visual Studio Code 会提示你添加生成和调试项目所需的资产。 请选择“是”。
Visual Studio Code 将在项目的 .vscode 文件夹中添加 launch.json 和 tasks.json。
这些文件使你能够使用 Visual Studio Code 的调试工具运行和调试 Blazor 应用。
测试设置
你可以选择使用终端或 Visual Studio Code 来运行应用。
在终端窗口中,通过以下命令启动 Blazor 应用:
dotnet watch
此命令会生成并启动应用。 watch 命令告知 dotnet 监视所有项目文件。 对项目文件所做的任何更改都会自动触发重新生成,然后重启应用。
计算机默认浏览器应在
http://localhost:5000
打开一个新页面。若要停止应用,请在终端窗口中选择 Ctrl + C。
还可以通过 Visual Studio Code 运行和调试项目。
在 Visual Studio Code 中,选择 F5。 在“运行”菜单上,选择“开始调试”。
此时应会生成应用,并打开一个新的浏览器页面。
Visual Studio Code 还将切换到“运行和调试”窗口,使你能够重启或停止应用。
选择 Shift + F5 以停止应用。
下载 Blazing Pizza 资产和初学者文件
现在,你将从 GitHub 存储库克隆团队现有的 Blazor 应用项目文件。
使用文件资源管理器或在 Visual Studio Code 中删除 BlazingPizza 文件夹。
在终端中,将当前工作文件克隆到新的 BlazingPizza 文件夹中。
git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza
运行应用的当前版本。 按 F5 。
做一些披萨
使用 Pages/Index.razor 组件,客户可以选择和配置他们想要订购的披萨。 该组件响应应用的根 URL。
团队还创建了用于表示应用中的模型的类。 查看当前的 PizzaSpecial
模型。
在 Visual Studio Code 的文件资源管理器中,展开“Model”文件夹。 然后选择“PizzaSpecial”。
namespace BlazingPizza; /// <summary> /// Represents a pre-configured template for a pizza a user can order /// </summary> public class PizzaSpecial { public int Id { get; set; } public string Name { get; set; } public decimal BasePrice { get; set; } public string Description { get; set; } public string ImageUrl { get; set; } public string GetFormattedBasePrice() => BasePrice.ToString("0.00"); }
请注意,披萨订单包含
Name
、BasePrice
、Description
和ImageUrl
。在文件资源管理器中,展开“页面”,然后选择“Index.razor”。
@page "/" <h1>Blazing Pizzas</h1>
目前,标题只有一个 H1 标记。 你将添加代码来创建披萨特价商品。
在
<h1>
标记下,添加以下 C# 代码:@code { List<PizzaSpecial> specials = new(); protected override void OnInitialized() { specials.AddRange(new List<PizzaSpecial> { new PizzaSpecial { Name = "The Baconatorizor", BasePrice = 11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"}, new PizzaSpecial { Name = "Buffalo chicken", BasePrice = 12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"}, new PizzaSpecial { Name = "Veggie Delight", BasePrice = 11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"}, new PizzaSpecial { Name = "Margherita", BasePrice = 9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"}, new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice = 11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"}, new PizzaSpecial { Name = "Classic pepperoni", BasePrice = 10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" } }); } }
@code
块会创建一个用于保存披萨特价商品的数组。 初始化页面时,它会将六个披萨添加到该数组。选择 F5 或“运行”。 然后选择“开始调试”。
应用应会编译和运行,你将看到,没有更改任何内容。 客户端 HTML 中的任何内容都未使用此代码。 让我们来解决这个问题。
按 Shift + F5,或选择“停止调试”。
在 Index.razor 中,将
<h1>Blazing Pizzas</h1>
替换为以下代码:<div class="main"> <h1>Blazing Pizzas</h1> <ul class="pizza-cards"> @if (specials != null) { @foreach (var special in specials) { <li style="background-image: url('@special.ImageUrl')"> <div class="pizza-info"> <span class="title">@special.Name</span> @special.Description <span class="price">@special.GetFormattedBasePrice()</span> </div> </li> } } </ul> </div>
此代码将普通 HTML 与循环和成员访问指令结合在一起。
@foreach
循环为specials
数组中的每个披萨创建了一个<li>
标记。在循环内,每个特价披萨都显示了其名称、说明、价格以及带有成员指令的图像。
选择 F5 或“运行”。 然后选择“开始调试”。
现在,你有了一个让客户能够订购披萨的披萨基础组件。 在以下练习中,你将对此组件进行改进。