View Components

1. ViewComponent là gì?

ViewComponent là một tính năng mạnh mẽ trong ASP.NET Core MVC, có vai trò tương tự như Partial View nhưng được thiết kế độc lập và mạnh mẽ hơn.

Thay vì phụ thuộc vào Controller hiện tại (như Partial View), ViewComponent bao gồm cả phần Logic (C# class) và phần Giao diện (HTML/Razor View). Nó tự xử lý dữ liệu của riêng mình mà không cần Controller truyền dữ liệu (Model) vào cho nó.

So sánh nhanh với Partial View:

• Partial View: Tốt cho việc chia nhỏ giao diện (ví dụ: chia nhỏ một form dài). Nó dùng chung dữ liệu của View cha.

• ViewComponent: Tốt cho việc tạo ra các thành phần giao diện động cần logic xử lý riêng (không liên quan đến Controller của trang hiện tại).

2. Khi nào nên sử dụng ViewComponent?

Bạn nên dùng ViewComponent khi có một phần giao diện xuất hiện ở nhiều trang khác nhau và cần truy xuất cơ sở dữ liệu hoặc có logic tính toán phức tạp. Các ví dụ điển hình bao gồm:

• Menu điều hướng động (Dynamic Navigation Menus).

• Giỏ hàng mini (Shopping Cart) hiển thị số lượng sản phẩm.

• Khu vực hiển thị thông tin người dùng đang đăng nhập (User Login Panel).

• Danh sách bài viết mới nhất / sản phẩm nổi bật ở Sidebar.

3. Cấu trúc của một ViewComponent

Một ViewComponent luôn bao gồm 2 phần chính:

1. Lớp C# (Component Class): * Thường được đặt trong thư mục ViewComponents.

   • Kế thừa từ lớp cơ sở ViewComponent.

   • Chứa phương thức Invoke() hoặc InvokeAsync() để thực thi logic và trả về giao diện.

2. Giao diện (View file): * Thường có tên là Default.cshtml.

   • Phải được đặt đúng theo quy tắc đường dẫn: Views/Shared/Components/{Tên_Component}/Default.cshtml.

4. Các bước tạo và sử dụng ViewComponent (Ví dụ thực tế)

Dưới đây là 3 bước cơ bản để tạo một ViewComponent hiển thị "Số lượng sản phẩm trong giỏ hàng".

Bước 1: Tạo Lớp ViewComponent (Phần Logic)

Tạo thư mục ViewComponents ở thư mục gốc của dự án và thêm file CartCountViewComponent.cs:

using Microsoft.AspNetCore.Mvc;

using System.Threading.Tasks;

namespace MyApp.ViewComponents

{

    // Đặt tên class có hậu tố "ViewComponent"

    public class CartCountViewComponent : ViewComponent

    {

        // Khởi tạo các service cần thiết (Dependency Injection)

        // private readonly ICartService _cartService;

        public async Task<IViewComponentResult> InvokeAsync()

        {

            // Logic lấy số lượng từ database hoặc session

            int itemCount = 5; // Giả sử lấy được 5 sản phẩm

            // Trả về view kèm theo dữ liệu

            return View(itemCount); 

        }

    }

}

Bước 2: Tạo View cho Component (Phần Giao diện)

Tạo cấu trúc thư mục chính xác như sau: Views/Shared/Components/CartCount/Default.cshtml

Bên trong file Default.cshtml, viết code Razor để hiển thị:

@model int

<div class="cart-icon">

    <i class="fas fa-shopping-cart"></i>

    <span class="badge">Giỏ hàng: @Model sản phẩm</span>

</div>

Bước 3: Gọi ViewComponent trong View chính

Để hiển thị Component này ở bất kỳ đâu (thường là trong file layout chính _Layout.cshtml), bạn sử dụng cú pháp Component.InvokeAsync:

<div>

    @await Component.InvokeAsync("CartCount")

</div>

5. Tổng kết

• Độc lập: ViewComponent là những mảnh ghép giao diện có chứa logic C# riêng biệt.

• Dễ bảo trì: Giúp code trong Controller gọn gàng hơn vì Controller không cần chuẩn bị dữ liệu cho các thành phần dùng chung (như menu, giỏ hàng).

• Quy ước khắt khe: Phải tuân thủ đúng quy tắc đặt tên thư mục (Views/Shared/Components/...) thì ứng dụng mới tìm thấy View.

ViewComponent có kết nối với Database (Entity Framework Core) : đang cập nhật