🔒

Đăng ký để xem nội dung này

Tạo tài khoản miễn phí và đăng ký gói học để truy cập toàn bộ bài học, video và tài liệu độc quyền.

Đăng ký ngay — Miễn phí Đã có tài khoản? Đăng nhập

Áp dụng template layout cho phân vùng admin

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.