🔒

Đă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

Thiết kế layout chung cho toàn ứng dụng

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.