Hướng dẫn truyền dữ liệu từ PageModel (Backend by C#) Dịch vụ điện

Kết nối Backend C# và giao diện HTML trong Razor Pages

Bạn đang muốn Kết nối C# với html đơn giản dễ hiểu?. Trong phát triển web với ASP.NET Core Razor Pages, một trang web luôn được chia làm hai phần tách biệt nhưng gắn kết chặt chẽ:

Backend (PageModel – file .cshtml.cs): Nơi xử lý logic và dữ liệu bằng ngôn ngữ C#.
Frontend (Razor Page – file .cshtml): Nơi hiển thị giao diện người dùng bằng HTML.

Để hiển thị một dòng chữ từ code C# lên trình duyệt, bạn cần thực hiện cơ chế “truyền dữ liệu” thông qua thuộc tính Model. Hướng dẫn này sẽ giúp bạn nắm vững quy trình từ khâu khai báo biến ở Backend đến việc định dạng hiển thị màu sắc ở Frontend chỉ với vài bước đơn giản.

1. Khởi tạo dự án ASP.NET Core Web App (Razor Pages)

Để bắt đầu, chúng ta cần mở Visual Studio và chọn template ASP.NET Core Web App (Razor Pages). Đây là một framework mạnh mẽ giúp tách biệt rõ ràng giữa logic xử lý dữ liệu và giao diện hiển thị.

Lưu ý: Đảm bảo bạn đã cài đặt các SDK mới nhất (như .NET 8 hoặc .NET 6) để dự án hoạt động ổn định.

2. Cấu trúc Solution Explorer và cơ chế hoạt động

Trong ASP.NET Core Razor Pages, mỗi trang web thường gồm hai file đi kèm với nhau:

Index.cshtml (Frontend): Nơi chứa mã HTML và các thẻ Razor để hiển thị giao diện.
Index.cshtml.cs (Backend/Code-behind): Nơi viết code C# để xử lý logic, truy vấn cơ sở dữ liệu hoặc tính toán.

Việc hiểu rõ mối quan hệ này là chìa khóa để bạn làm chủ luồng dữ liệu của ứng dụng.

3. Cách viết Comment trong Razor Pages và C#

Việc chú thích code (comment) rất quan trọng để quản lý dự án lâu dài:

Trong file .cshtml (Frontend): Sử dụng cặp thẻ @* Nội dung comment *@.
Trong file .cshtml.cs (Backend): Sử dụng /* Nội dung comment */ cho nhiều dòng hoặc // cho một dòng duy nhất.

4. Khai báo biến và gán dữ liệu tại Backend (PageModel)

Trong file Index.cshtml.cs, chúng ta khai báo một thuộc tính public để “hứng” dữ liệu. Tại phương thức OnGet(), chúng ta sẽ gán giá trị cho biến này:

public string? Message { get; set; }

public void OnGet()
{
    Message = "Chao ban hoc cung C# cung vohau.ipr";
}

5. Hiển thị và định dạng dữ liệu tại Frontend

Sau khi dữ liệu đã được gán ở Backend, chúng ta quay trở lại file Index.cshtml để gọi dữ liệu ra màn hình. Để nội dung nổi bật với màu đỏ, chúng ta kết hợp thuộc tính style của HTML:

HTML

<h1 style="color: red;">@Model.Message</h1>

Cú pháp @Model.Message chính là cầu nối để đưa giá trị từ C# hiển thị lên trình duyệt.

6. Build Solution và kiểm tra kết quả

Cuối cùng, thực hiện các bước sau để chạy ứng dụng:

Vào menu Build > chọn Build Solution (hoặc nhấn Ctrl + Shift + B) để trình biên dịch kiểm tra lỗi.
Vào menu Debug > chọn Start Debugging (hoặc nhấn F5).

Kết quả: Sau khi Kết nối C# với html, Trình duyệt sẽ khởi động và hiển thị dòng chữ “Chao ban hoc cung C# cung vohau.ipr” với màu đỏ rực rỡ đúng như mong muốn.

Hướng dẫn truyền dữ liệu từ PageModel (Backend by C#) sang Razor Page (FrontEnd by HTML) trong ASP.NET Core (Chi tiết từ A-Z)