ASP.NET - MVC - Cách tạo Layout View

Cách tạo Layout View trong MVC

Để tạo một layout mới trong Visual Studio, click phải chuột trên thư mục shared --> Add --> New Item..

Trong hộp thoại Add New, chọn MVC 5 Layout Page (Razor) và đặt tên layout là  "_myLayoutPage.cshtml", click Add.

Bạn sẽ thấy _myLayoutPage.cshtml như hình bên dưới.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Bây giờ, thêm thẻ <footer> với phương thức RenderSection ("footer", true) cùng với css như dưới đây. Xin lưu ý rằng chúng ta đã thực hiện bắt buộc phần này. Điều này có nghĩa là bất kỳ view  nào sử dụng _myLayoutPage làm layout phải có mục footer này.

Ví dụ thêm RenderSection

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div>
        @RenderBody()
    </div>
    <footer class="panel-footer">
        @RenderSection("footer", true)
    </footer>
</body>
</html>

Bây giờ, hãy sử dụng _myLayoutPage.cshtml này với View Index của HomeController.

Bạn có thể thêm view Index rỗng bằng cách nhấp chuột phải vào phương Index của HomeController và chọn Add View. Select Empty trong  scaffolding template và _myLayoutPage.cshtml. click Add

Tập tin Index.cshtml như hiển thị bên dưới.

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}

<h2>Index</h2>

Chúng ta đã tạo một view Index sử dụng _myLayoutPage.cshtml làm view layout. Bây giờ chúng ta sẽ thêm footer có css bởi vì _myLayoutPage yêu cầu footer.

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}

<div class="jumbotron">
    <h2>Index</h2>
</div>
<div class="row">
    <div class="col-md-4">
        <p>This is body.</p>
    </div>
    @section footer{
        <p class="lead">
            This is footer section.
        </p>
    }
</div>

Bây giờ, hãy chạy ứng dụng và bạn sẽ thấy view  Index sẽ chứa boddy và footer như hình bên dưới.