Trong bài tập này, bạn bắt đầu tạo một ứng dụng Blazing Pizza mới cho công ty giao bánh pizza. Công ty đã cung cấp CSS, hình ảnh và HTML hiện tại từ trang web cũ của mình để làm việc.
Tạo mới ứng dụng Blazor
Bây giờ bạn sẽ sao chép các tệp dự án ứng dụng Blazor hiện có của nhóm từ GitHub repository
https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps
sau khi tải về thì giải nén và đặt trên folder là BlazingPizza
chạy thử web và bạn sẽ thấy UI như sau
Tạo thêm 1 vài pizza
Index.razor component cho phép khách hàng chọn và định cấu hình các loại pizza mà họ muốn đặt. Component phản hồi với URL gốc của ứng dụng.
Nhóm cũng đã tạo các lớp để đại diện cho các models trong ứng dụng. Xem lại PizzaSpecial models hiện tại.
1.trong Visual Studio studio, trong explorer solution, mở Model folder. Sau đó chọn PizzaSpecial.cs.
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”);
}
}
Lưu ý rằng đơn đặt hàng pizza có Tên, Giá cơ sở, Mô tả và URL hình ảnh.
2.trong explorer solution, mở Page folder. Sau đó chọn Index.razor
@page “/”
<h1>Blazing Pizzas</h1>
3. thêm đoạn code sau hướng thẻ H1
@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” }
});
}
}
Khối @code tạo ra một mảng để chứa các phần đặc biệt của pizza. Khi trang được khởi tạo, nó sẽ thêm sáu chiếc bánh pizza vào mảng.
4.trong file index.razor thay thế <h1> tag bằng đoạn code bên dưới:
<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>
Mã này kết hợp HTML thuần túy cùng với các lệnh lặp và truy cập thành viên. Vòng lặp @foreach tạo thẻ <li> cho mỗi bánh pizza trong mảng đặc biệt.
Bên trong vòng lặp, mỗi chiếc bánh pizza đặc biệt hiển thị tên, mô tả, giá cả và hình ảnh của nó cùng với các chỉ thị dành cho thành viên.
5. Run web app và xem kết quả
Như vậy chúng ta vừa hoàn thành việc tạo giao diện người dùng với Blazor components. Bây giờ bạn có một pizza component để cho phép khách hàng đặt bánh pizza. , bạn sẽ cải thiện thành phần này trong các bài tập sau.