Lab01 - Làm QUEN với ASP.NET CORE MVC

Bài 1: Cài Đặt Môi Trường Phát Triển

Mục tiêu:

• Hướng dẫn sinh viên cài đặt Visual Studio và .NET SDK để chuẩn bị cho các bài lab tiếp theo.

Thực hiện:

• Bước 1: Tải và cài đặt Visual Studio 2022/2026 (phiên bản Community) từ trang web của Microsoft.

• Bước 2: Trong quá trình cài đặt Visual Studio, chọn ASP.NET and web development trong mục Workloads như hình dưới.

• Bước 3 [optional]: Cài đặt .NET SDK từ trang chủ .NET (https://dotnet.microsoft.com/).

• Bước 4: Xác minh cài đặt thành công bằng cách chạy lệnh dotnet --version trong Command Prompt hoặc PowerShell.

• Kết quả mong đợi:

  • Sinh viên có thể mở Visual Studio và sẵn sàng cho các bài tập ASP.NET Core

Bài 2: Tạo Dự Án ASP.NET Core Đầu Tiên

Mục tiêu:

• Giúp sinh viên làm quen với việc tạo dự án ASP.NET Core cơ bản trong Visual Studio.

Thực hiện:

• Bước 1: Mở Visual Studio và chọn Create a new project.

• Bước 2: Chọn mẫu  ASP.NET Core Web App (Model-View-Controller) và đặt tên cho dự án là "MyFirstAspNetApp".

• Bước 3: Trong phần Additional information, chọn .NET 8.0/10.0 và Chọn Authentication Type: None

• Bước 4: Bấm Create để tạo dự án.

• Bước 5: Chạy dự án bằng cách nhấn Ctrl + F5 và quan sát kết quả trên trình duyệt.

• Kết quả mong đợi:

  • Sinh viên có thể chạy ứng dụng ASP.NET Core và thấy trang mặc định của ứng dụng trên trình duyệt

Khi chạy dự án web lần đầu tiên, Visual Studio sẽ hỏi có trust SSL tự tạo trên máy hay không. Vui lòng trả lời YES 2 lần như 2 màn hình dưới.

Bài 3: Cấu Trúc Dự Án ASP.NET Core

Mục tiêu:

• Giúp sinh viên hiểu cấu trúc thư mục và các tệp cấu hình trong dự án ASP.NET Core.

Thực hiện:

• Bước 1: Khám phá các thư mục wwwroot, Controllers, Views, Models trong dự án "MyFirstAspNetApp".

• Bước 2: Mở và xem nội dung các tệp Program.cs và appsettings.json.

• Bước 3: Giải thích vai trò của từng thư mục và tệp.

• Bước 4: Thực hiện một số thay đổi nhỏ trong appsettings.json để thay đổi nội dung cấu hình và kiểm tra ảnh hưởng trên ứng dụng.

• Kết quả mong đợi:

  • Sinh viên hiểu rõ cấu trúc và chức năng của từng phần trong dự án ASP.NET Core

Bài 4: Tạo Controller và Action Method Đơn Giản

Mục tiêu:

• Sinh viên sẽ tạo controller và action method để xử lý yêu cầu HTTP đơn giản.

Thực hiện:

• Bước 1: Tạo một controller mới trong thư mục Controllers với tên HelloWorldController.

public string Index()

{

   return "Hello, ASP.NET Core!";

}

• Bước 3: Chạy ứng dụng và truy cập vào địa chỉ https://localhost:{PORT}/HelloWorld/Index để kiểm tra kết quả.

• Kết quả mong đợi:

  • Sinh viên có thể thấy thông điệp "Hello, ASP.NET Core!" được hiển thị trên trình duyệt khi truy cập vào đường dẫn trên.

• Tương tự tạo controller DemoController và các action đơn giản như Hello(), LuckyNumber() như sau:

public string Hello(string name = "Tèo")

{

   return $"Hello {name}!";

}

public int LuckyNumber()

{

   return new Random().Next(1, 1000);

}

• Chạy thử nghiệm ứng dụng các trường hợp sau:

  • https://localhost:{PORT}/Demo/Hello?name=David

  • https://localhost:{PORT}/Demo/Hello

  • https://localhost:{PORT}/Demo/LuckyNumber

Bài 5: Sử Dụng View trong ASP.NET Core

Mục tiêu:

• Hướng dẫn sinh viên tạo một View và kết hợp với Controller để hiển thị giao diện người dùng.

Thực hiện:

• Bước 1: Trong HelloWorldController, thêm một action method Welcome trả về một View:

public IActionResult Welcome()

{

   return View();

}

• Bước 2: Tạo thư mục HelloWorld trong thư mục Views và thêm một tệp Welcome.cshtml với nội dung:

<h1>Welcome to ASP.NET Core!</h1>

<p>This is the Welcome page.</p>

• Bước 3: Chạy ứng dụng và truy cập vào https://localhost:{PORT}/HelloWorld/Welcome để kiểm tra giao diện.

• Kết quả mong đợi:

  • Sinh viên có thể thấy nội dung "Welcome to ASP.NET Core!" hiển thị trên trang web.

Bài 6: Thêm Tham Số vào Action Method

Mục tiêu:

• Hướng dẫn sinh viên sử dụng tham số trong action method và truyền dữ liệu từ URL.

Thực hiện:

• Bước 1: Trong HelloWorldController, sửa đổi method Welcome để nhận tham số name và numTimes:

public IActionResult Welcome(string name, int numTimes = 1)

{

   ViewData["Message"] = "Hello " + name;

   ViewData["NumTimes"] = numTimes;

   return View();

}

• Bước 2: Trong Welcome.cshtml, thêm đoạn mã để hiển thị thông điệp:

<h1>@ViewData["Message"]</h1>

<p>This message will be repeated @ViewData["NumTimes"] times.</p>

• Bước 3: Chạy ứng dụng và truy cập vào https://localhost:{PORT}/HelloWorld/Welcome?name=John&numTimes=3 để kiểm tra kết quả.

• Kết quả mong đợi:

  • Sinh viên có thể thấy thông điệp "Hello John" hiển thị 3 lần trên trang web.