Bài 1: Giới thiệu về Trình quản lý quảng cáo

Bài trước Bài tiếp theo

📝 Bài giảng: Thêm layout cho phân vùng Admin trong ASP.NET Core MVC

1. Khái niệm & mục tiêu

Trong một dự án web ASP.NET Core MVC, bạn có thể cần nhiều khu vực (Area) khác nhau, ví dụ:

  • Frontend (User site): giao diện cho người dùng.

  • Admin: giao diện quản trị hệ thống.

👉 Việc tách layout giúp dễ quản lý: Admin sẽ có giao diện riêng biệt, sử dụng template (ở đây là Atlantis-Lite-master).

2. Tạo Area Admin

Trong ASP.NET Core MVC, Area được dùng để phân vùng ứng dụng.

📌 Thực hiện:

  1. Chuột phải vào project → Add → New Folder → đặt tên Areas.

  2. Trong Areas, tạo thư mục con Admin.

  3. Bên trong Admin, tạo cấu trúc chuẩn:

    Areas
└── Admin
    ├── Controllers
    ├── Views
    │   └── Shared
    └── Admin.csproj (không cần nếu là trong project chính)

  4. Tạo controller mẫu:

    using Microsoft.AspNetCore.Mvc;

namespace YourProject.Areas.Admin.Controllers
{
    [Area("Admin")]
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

3. Cấu hình route cho Area

Mở Program.cs (hoặc Startup.cs tuỳ project):

app.MapControllerRoute(
    name: "areas",
    pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}"
);

→ Bây giờ, đường dẫn /Admin/Home/Index sẽ load trang admin.

4. Thêm Atlantis-Lite-master vào dự án

  1. Copy toàn bộ thư mục Atlantis-Lite-master/assets vào wwwroot/admin-assets/.
    (nên đặt thư mục riêng để không lẫn với frontend).

    wwwroot
└── admin-assets
    ├── css
    ├── js
    ├── img

  2. Copy file HTML gốc Atlantis-Lite-master/index.html để làm Layout.

5. Tạo _LayoutAdmin.cshtml

Trong Areas/Admin/Views/Shared/, tạo file _LayoutAdmin.cshtml.

Dán nội dung HTML của Atlantis, ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>@ViewData["Title"] - Admin</title>
    <link rel="stylesheet" href="~/admin-assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/admin-assets/css/atlantis.css" />
</head>
<body>
    <div class="wrapper">
        <!-- Sidebar -->
        @Html.Partial("_Sidebar")

        <div class="main-panel">
            <!-- Header -->
            @Html.Partial("_Header")

            <div class="content">
                <div class="container-fluid">
                    @RenderBody()
                </div>
            </div>

            <!-- Footer -->
            @Html.Partial("_Footer")
        </div>
    </div>

    <script src="~/admin-assets/js/core/jquery.3.2.1.min.js"></script>
    <script src="~/admin-assets/js/core/bootstrap.min.js"></script>
    <script src="~/admin-assets/js/atlantis.min.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

6. Tạo các Partial View (nếu cần)  

Trong Areas/Admin/Views/Shared/:

  • _Sidebar.cshtml

  • _Header.cshtml

  • _Footer.cshtml

Copy từ file template Atlantis (index.html) phần sidebar, header, footer để tái sử dụng.

7. Sử dụng Layout trong View

Mở Areas/Admin/Views/Home/Index.cshtml:

@{
    Layout = "~/Areas/Admin/Views/Shared/_LayoutAdmin.cshtml";
    ViewData["Title"] = "Trang quản trị";
}
<h2>Dashboard</h2>
<p>Chào mừng bạn đến trang quản trị</p>

8. Tuỳ chỉnh & mở rộng

  • Truyền dữ liệu vào Layout:
    Dùng ViewBag hoặc ViewData từ Controller để hiển thị thông tin (VD: tên admin, avatar).

  • Section Scripts:
    Trong view con, bạn có thể thêm script riêng:

    @section Scripts {
    <script>
        console.log("Trang Index đã load!");
    </script>
}

9. Kết quả

Khi chạy /Admin/Home/Index, bạn sẽ thấy:

  • Giao diện lấy từ Atlantis-Lite-master.

  • Các view admin sử dụng layout riêng.

  • Tách biệt hoàn toàn với layout của frontend.

Bài tập 20: Áp dụng template layout cho phân vùng admin

Yêu cầu: 

1. Sử dụng template được cung cấp, hãy cắt layout chung cho trang admin

2. Áp dụng template phần danh sách Video

3. Áp dụng template phần Tài khoản

Nộp bài:

  • Nén project đã làm và nộp file.