BÀI THỰC HÀNH 02: LẬP TRÌNH ỨNG DỤNG WEB

(ViewComponent trong ASP.NET CORE, Kết nối dữ liệu lên Menu)

Mục đích:

- Nhắc lại các khái niệm trong cơ sở dữ liệu

- Tạo các ViewComponent trong ASP.NET CORE phân vùng dữ liệu

- Kết nối dữ liệu lên website trong ViewComponent

Bước 1: Mở SQL SERVER, tạo cơ sở dữ liệu Startup và bảng Menu gồm các
trường như sau:

- Trong đó

+ MenuID: mã menu (tự động tăng)

+ MenuName: tên menu

+ IsActive: nếu nhận giá trị true mới cho menu hiện trên trang web

+ ControllerName: lưu thông tin controller cho mỗi mục menu

+ ActionName: lưu thông tin action cho mỗi mục menu

+ Levels: cấp của menu (1, 2, 3, …)

 + ParentID: thuộc menu cha nào (thông tin lấy từ MenuID)

+ Link: liên kết của menu

+ MenuOrder: thứ tự sắp xếp của menu trên trang web

+ Position: vị trí của menu (1- phía trên, 2 - phía dưới, …)

- Thêm dữ liệu vào bảng Menu

Bước 2: Mở Visual studio 2022 và mở project startup đã tạo ở buổi trước

Bước 3: Cài đặt gói hỗ trợ:

Microsoft.EntityFrameworkCore.SqlServer

-Vào Tools/NuGet Package Manager/Manage NuGet Packages for solution…

- Gõ tên gói Microsoft.EntityFrameworkCore.SqlServer

 Microsoft.EntityFrameworkCore.SqlServer

Chọn Install như hình trên

Bước 4: Kết nối Sql Server trong Visual Studio (copy xâu dưới cho chính xác)

- Tại Visual Studio, mở tệp appsettings.json

- Thêm dòng lệnh sau, chú ý thêm dấu phẩy sau dòng "AllowedHosts": "*",

Tên máy
Tên
Tên máy
CSDL

"ConnectionStrings": {
"DefaultConnection": "Data Source=Ten_may;Initial Catalog=Ten_CSDL;Integrated
Security=True;TrustServerCertificate=True" }

Bước 5: Thêm lớp Menu trong thư mục Models

- Nháy chuột phải vào Models/Add/Class và đặt tên Menu

- Nội dung cụ thể của lớp Menu

Bước 6: Thêm lớp DataContext trong thư mục Models

- Nháy chuột phải vào Models/Add/Class và đặt tên DataContext

- Nội dung cụ thể

Bước 7: Thêm cấu hình vào program.cs
-Thêm dòng lệnh (dòng 5-7)
Chú ý: Nếu có lỗi đưa chuột đến lỗi đến khi xuất hiện biểu tượng

Tên máy

Chọn using trong biểu tượng đó.

Bước 8: Thêm Folder Components và Class MenuViewComponent

Tên máy
-Class MenuViewComponent có nội dung

Bước 9: Tạo View để hiện thị thông tin

-Tại Views/Shared Thêm Folder Components, thêm thư mục MenuView
trong Components và Add view Default (nhấp chuột phải vào MenuView
chọn Add\View)

-Đến _Layout.cshtml thêm dòng lệnh này trên @RenderBody();

-Tiếp theo, di chuyển phần đánh dấu sang Default.cshtml

-Và thêm vào đầu trang Default.cshtml

-Sử dụng @foreach để tạo vòng lặp vào đúng vị trí như sau:
- Chạy Project
Sau khi chạy sẽ được menu mới như dưới đây