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: SỬ DỤNG LAYOUT TRONG ASP.NET CORE 8 MVC

🎯 Mục tiêu học

  • Biết khái niệm Layout và vai trò của nó trong MVC.

  • Biết cách tạo và sử dụng layout trong ASP.NET Core 8.

  • Biết cách tách Header/Footer, tái sử dụng partial views.

  • Hiểu cách truyền dữ liệu từ controller vào layout.

1️⃣ Khái niệm Layout

  • Layout là khung trang HTML chung cho nhiều view.

  • Thay vì lặp lại header, menu, footer trong từng view → ta định nghĩa 1 file layout chứa sẵn, view chỉ cần chèn nội dung riêng vào.

  • Tương tự “Master Page” trong ASP.NET WebForm hoặc “Template” trong PHP.

2️⃣ Cấu trúc thư mục lưu layout

Controllers/
    HomeController.cs
Views/
    Shared/
        _Layout.cshtml
        _ValidationScriptsPartial.cshtml
    Home/
        Index.cshtml
wwwroot/
    css/
    js/

3️⃣ File Layout mặc định

Trong Views/Shared/ đã có sẵn _Layout.cshtml.

Ví dụ rút gọn:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"] - MvcLayoutDemo</title>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a asp-controller="Home" asp-action="Index">Trang chủ</a> |
            <a asp-controller="Home" asp-action="About">Giới thiệu</a>
        </nav>
    </header>

    <main role="main" class="container">
        @RenderBody()
    </main>

    <footer>
        <p>&copy; @DateTime.Now.Year - MvcLayoutDemo</p>
    </footer>

    @RenderSection("Scripts", required: false)
</body>
</html>

📌 Các lệnh quan trọng:

  • @RenderBody(): nơi chèn nội dung của view con.

  • @RenderSection("Scripts"): chỗ dành cho script riêng từng view.

4️⃣ Sử dụng Layout trong View

Mở Views/Home/Index.cshtml:

@{
    ViewBag.Title = "Trang chủ";
    Layout = "_Layout"; // dùng layout mặc định , có thể gán luôn đường dẫn layout
}

<h2>Xin chào ASP.NET Core 8!</h2>
<p>Đây là nội dung Index.cshtml.</p>

@section Scripts {
    <script>
        console.log("Script riêng cho Index");
    </script>
}

👉 Kết quả: Layout sẽ bọc quanh view này.

5️⃣ Cấu hình Layout mặc định

Thay vì viết Layout = "_Layout" trong từng view, bạn có thể cấu hình mặc định tại file _ViewStart.cshtml.

Views/_ViewStart.cshtml

@{
    Layout = "_Layout";
}

👉 Từ giờ, toàn bộ view sẽ tự dùng _Layout.cshtml trừ khi bạn override.

6️⃣ Tách Header / Footer bằng Partial

Tạo file:

  • Views/Shared/_Header.cshtml

  • Views/Shared/_Footer.cshtml

Ví dụ _Header.cshtml:

<header>
    <h1>My Website</h1>
    <nav>
        <a asp-controller="Home" asp-action="Index">Trang chủ</a> |
        <a asp-controller="Home" asp-action="About">Giới thiệu</a>
    </nav>
</header>

Ví dụ _Footer.cshtml:

<footer>
    <p>&copy; @DateTime.Now.Year - MvcLayoutDemo</p>
</footer>

👉 Gọi trong _Layout.cshtml:

<body>
    @Html.Partial("_Header")

    <main>
        @RenderBody()
    </main>

    @Html.Partial("_Footer") 
</body>

7️⃣ Truyền dữ liệu từ Controller vào Layout

Giả sử bạn muốn hiển thị tên người dùng đăng nhập trên layout.

Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewBag.UserName = "Nguyễn Văn A"; // Truyền dữ liệu
        return View();
    }
}

Layout

Trong _Layout.cshtml, lấy ra:

<div class="user-info">
    Xin chào, @ViewBag.UserName
</div>

Bài tập số 7: WebDaoTao

Yêu cầu:

  • Thực hành lại với layout đã được học. 

  • Sử dụng RenderSection để hiển thị title, CSS và JavaScript theo từng trang.

Nộp bài:

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