Hướng dẫn: Khởi tạo và Tùy chỉnh ASP.NET Core Razor Pages

Bước 1: Khởi tạo dự án trong Visual Studio

Mở Visual Studio và chọn Create a new project.
Trong ô tìm kiếm, gõ “C#” hoặc “Web App”.
Chọn template ASP.NET Core Web App (Razor Pages). Lưu ý chọn đúng biểu tượng có chữ C# và nhãn Web (như hình 1.1).
Nhấn Next.

Bước 2: Cấu hình tên và nơi lưu trữ

Project name: Đặt tên cho dự án của bạn (ví dụ trong hình là CodeC#byVohauipr).
Location: Chọn đường dẫn lưu project trên máy tính.
Nhấn Next (như hình 1.2).

Bước 3: Chọn phiên bản Framework

Tại mục Framework, chọn phiên bản mới nhất (ví dụ: .NET 10.0).
Các tùy chọn khác như Authentication type để là None và đảm bảo tích chọn Configure for HTTPS.
Nhấn Create để khởi tạo (như hình 1.3).

Bước 4: Chỉnh sửa nội dung trang chủ (Frontend)

Trong cửa sổ Solution Explorer, tìm đến thư mục Pages và mở file Index.cshtml.
Tại đây, bạn có thể thay đổi nội dung hiển thị trong thẻ <h1>.
- Ví dụ: Đổi thành <h1>Xin Chao ban den voi Vohauipr.com</h1> (như hình 2).

Bước 5: Tìm hiểu cấu trúc Header và Footer (Layout)

Mở file _Layout.cshtml trong thư mục Pages/Shared.
Footer: Tìm đến thẻ <footer> ở cuối file để chỉnh sửa thông tin bản quyền hoặc các liên kết (như hình 3).
Header/Navbar: Tìm thẻ <nav> để thay đổi tên thương hiệu hoặc các mục menu như Home, Privacy (như hình 4).

Bước 6: Xử lý Logic tại Backend

Để viết code C# xử lý cho trang chủ, hãy mở file Index.cshtml.cs.
Bạn sẽ thấy hàm OnGet(). Đây là nơi bạn thực hiện các logic tính toán hoặc lấy dữ liệu trước khi hiển thị ra giao diện (như hình 5).

Bước 7: Tùy chỉnh giao diện bằng CSS và Inline Style

Sửa file CSS: Mở file site.css (thường nằm trong thư mục wwwroot/css). Bạn có thể đổi màu sắc cho các nút (btn-primary) hoặc các thành phần khác (như hình 6.2).
Sử dụng Debug: Sau khi sửa xong, nhấn F5 hoặc nút Start Debugging để xem thay đổi trên trình duyệt (như hình 6.3).
Sửa trực tiếp bằng Style: Bạn cũng có thể thêm thuộc tính style="color:blue" trực tiếp vào các thẻ HTML trong file .cshtml để đổi màu nhanh cho văn bản (như hình 6.4).

Bước 1: Quản lý và Sao lưu Project

Trước khi thực hiện các thay đổi lớn, bạn nên sao lưu project để tránh mất dữ liệu.

Vào thư mục chứa project (thường trong repos).
Chuột phải vào thư mục project (CodeC#byVohauipr) và chọn Copy.
Dán vào một thư mục mới (ví dụ: ngoài Desktop) để lưu trữ phiên bản an toàn.
Mở Visual Studio, chọn Open a project or solution và dẫn đến file .sln trong thư mục mới để tiếp tục làm việc.

Bước 2: Tùy chỉnh màu sắc Footer (Inline Style)

Bạn có thể thay đổi trực tiếp màu chữ hoặc màu nền của Footer trong file _Layout.cshtml.

Đổi màu chữ: Thêm thuộc tính style="color:blue" vào thẻ div bên trong footer.
Đổi màu nền: Thêm thuộc tính style="background-color:red" vào thẻ div.Lưu ý: Visual Studio sẽ hỗ trợ bảng màu (Color Picker) khi bạn gõ tên màu, giúp bạn chọn mã màu chính xác.

Bước 3: Tùy chỉnh màu sắc qua file CSS hệ thống (`site.css`)

Để quản lý màu sắc chuyên nghiệp hơn và áp dụng cho toàn bộ các trang, hãy sử dụng file site.css trong thư mục wwwroot/css.

Mở file site.css.
Định nghĩa class (ví dụ .display-4) và thêm thuộc tính màu sắc:CSS.display-4 { color: #1b6ec2 !important; /* Sử dụng !important để ưu tiên đè màu mặc định */ }

Bước 4: Thiết kế Front-end cho trang Nhập liệu (`Index.cshtml`)

Tại file Index.cshtml, bạn tạo giao diện để người dùng nhập thông tin.

Sử dụng cặp thẻ @* ... *@ để comment (ẩn) những đoạn mã cũ không dùng tới.
Tạo Form với phương thức method="post":
- Input Name: Dùng để nhận tên người dùng (name="UserName").
- Input Age: Dùng để nhận tuổi (name="UserAge").
- Nút gửi: Thẻ <button type="submit">.
Thêm đoạn mã hiển thị thông báo kết quả:Razor CSHTML@if (!string.IsNullOrEmpty(Model.Message)) { <div class="alert alert-success"> <h3>@Model.Message</h3> </div> }

@page
@model IndexModel
@{
    ViewData["Title"] = "Trang nhập liệu";
}

<div class="text-center">
    <h1 class="display-4">Bài tập Biến C#</h1>

    <form method="post">
        <div class="mb-3">
            <label>Nhập tên của bạn:</label>
            <input type="text" name="UserName" class="form-control" />
        </div>
        <div class="mb-3">
            <label>Nhập tuổi của bạn:</label>
            <input type="number" name="UserAge" class="form-control" />
        </div>
        <button type="submit" class="btn btn-primary">Gửi thông tin</button>
    </form>

    <hr />

    @if (!string.IsNullOrEmpty(Model.Message))
    {
        <div class="alert alert-success">
            <h3>@Model.Message</h3>
        </div>
    }
</div>

Bước 5: Xử lý Logic tại Back-end (`Index.cshtml.cs`)

Khi bạn chạy project ở Bước 4, bạn sẽ gặp lỗi CS1061 vì Front-end gọi biến Message nhưng Back-end chưa có. Bạn cần cấu hình file code-behind:

Mở file Index.cshtml.cs.
Khai báo biến để chứa thông tin hiển thị:C#public string Message { get; set; }
Viết hàm OnPost để xử lý khi người dùng nhấn nút Gửi:C#public void OnPost(string UserName, int UserAge) { Message = $"Xin chào {UserName}, bạn {UserAge} tuổi."; }

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CodeC_byVohauipr.Pages
{
    public class IndexModel : PageModel
    {
        // Khai báo biến để chứa thông tin hiển thị ra màn hình
        public string Message { get; set; }

        public void OnGet()
        {
            // Chạy khi lần đầu mở trang
        }

        // Chạy khi người dùng nhấn nút "Gửi thông tin" (Post)
        public void OnPost(string UserName, int UserAge)
        {
            // Đây chính là logic của bạn:
            // UserName tương đương 'name' (string)
            // UserAge tương đương 'age' (int)
            
            Message = $"Xin chào {UserName}, bạn {UserAge} tuổi.";
        }
    }
}

Bước 6: Kiểm tra và Chạy chương trình

Nhấn F5 hoặc nút Start để biên dịch code.
Nếu xuất hiện lỗi trong bảng Error List, hãy kiểm tra lại tên biến giữa file .cshtml và .cshtml.cs xem đã khớp nhau chưa (ví dụ: Message phải viết hoa chữ cái đầu ở cả hai nơi).
Nhập thông tin vào Form trên trình duyệt và kiểm tra xem dòng chữ “Xin chào…” có hiển thị đúng như logic đã viết hay không.