Asp Net MVC

Layout View trong ASP.NET MVC

Posted on by ComdyVN

Layout View trong ASP.NET MVC

Trong hướng dẫn này, bạn sẽ tìm hiểu về Layout View trong ASP.NET MVC.

Một ứng dụng có thể chứa một phần giao diện người dùng cụ thể được giữ nguyên trong toàn bộ ứng dụng, chẳng hạn như phần đầu trang (header), thanh điều hướng bên trái (left navigation bar), thanh bên phải (right bar) hoặc phần chân trang (footer).

ASP.NET MVC đã giới thiệu Layout View chứa các phần giao diện người dùng phổ biến này để chúng ta không phải viết mã giống nhau trong mọi trang. Layout View giống như master page của ứng dụng ASP.NET Web Form.

Ví dụ: giao diện người dùng ứng dụng có thể chứa phần đầu trang, thanh menu bên trái, thanh bên phải và phần chân trang vẫn giữ nguyên trên mọi trang. Chỉ phần trung tâm thay đổi động, như hình dưới đây.

Layout View trong ASP.NET MVC

Layout View cho phép bạn xác định một mẫu trang web chung, mẫu này có thể được kế thừa trong nhiều view để cung cấp giao diện nhất quán trong nhiều trang của một ứng dụng.

Layout View loại bỏ mã hóa trùng lặp và nâng cao tốc độ phát triển và dễ dàng bảo trì. Layout View cho giao diện người dùng mẫu ở trên sẽ chứa các phần đầu trang, menu bên trái, thanh bên phải và chân trang. Nó có một trình giữ chỗ (placeholder) cho phần trung tâm thay đổi động, như được hiển thị bên dưới.

Layout View trong ASP.NET MVC

Layout View có phần mở rộng giống như các view khác là .cshtml hoặc .vbhtml. Layout View được chia sẻ với nhiều view khác, vì vậy nó phải được lưu trữ trong thư mục Shared. Theo mặc định, Layout View _Layout.cshtml được tạo khi bạn Tạo ứng dụng ASP.NET MVC bằng Visual Studio, như được hiển thị bên dưới.

Layout View _Layout.cshtml được tạo khi bạn Tạo ứng dụng ASP.NET MVC bằng Visual Studio

Sau đây là mã mặc định của _Layout.cshtml.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Như bạn có thể thấy, Layout View chứa các thẻ HTML Doctype, head và body. Sự khác biệt duy nhất là các cuộc gọi đến phương thức RenderBody() và RenderSection(). Các view con sẽ hiển thị ở nơi phương thức RenderBody() được gọi.

Sử dụng Layout View

Các view sẽ được hiển thị trong trình giữ chỗ RenderBody() được gọi là view con. Có nhiều cách để chỉ định Layout View nào sẽ được sử dụng với view con nào. Bạn có thể chỉ định nó trong tập tin _ViewStart.cshtml, trong view con hoặc trong một phương thức hành động (action method).

Chỉ định Layout View trong ViewStart

Mặc định _ViewStart.cshtml được bao gồm trong thư mục Views. Nó cũng có thể được tạo trong tất cả các thư mục con trong thư mục Views. Nó được sử dụng để chỉ định các cài đặt chung cho tất cả các view trong một thư mục và các thư mục con nơi nó được tạo.

Thiết lập thuộc tính Layout thành một Layout View cụ thể sẽ được áp dụng cho tất cả các view con trong thư mục đó và các thư mục con của nó.

Ví dụ: tập tin _ViewStart.cshtml mặc định trong thư mục Views thiết lập thuộc tính Layout thành "~/Views/Shared/_Layout.cshtml". Vì vậy, _layout.cshtml sẽ là Layout View của tất cả các view nằm trong thư mục Views và các thư mục con của nó.

Cấu hình Layout View bằng ViewStart trong ASP.NET MVC

_ViewStart.cshtml cũng có thể được tạo trong các thư mục con của thư mục View để thiết lập Layout View mặc định cho tất cả các view có trong thư mục con cụ thể đó.

Ví dụ: tập tin _ViewStart.cshtml trong thư mục Home thiết lập thuộc tính Layout thành _myLayoutPage.cshtml. Vì vậy, bây giờ các view Index.cshtml, About.cshtml và Contact.cshtml trong thư mục Home sẽ sử dụng _myLayoutPage.cshtml làm Layout View thay vì _Layout.cshml mặc định.

Cấu hình Layout View bằng ViewStart trong ASP.NET MVC

Chỉ định Layout View trong View con

Bạn cũng có thể ghi đè thiết lập Layout View mặc định của _ViewStart.cshtml bằng cách thiết lập thuộc tính Layout trong mỗi view con.

Ví dụ: View Index.cshtml sau sử dụng Layout View _myLayoutPage.cshtml thay vì _Layout.cshtml được cấu hình trong _ViewStart.cshtml.

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

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
    </div>
</div>

Chỉ định Layout View trong phương thức hành động

Chỉ định tên Layout View làm tham số thứ hai trong phương thức View(), như được hiển thị bên dưới. Theo mặc định, Layout View sẽ được tìm kiếm trong thư mục Shared.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View("Index", "_myLayoutPage"); //set "_myLayoutView" as layout view
    }
}

Phương thức kết xuất

Layout View trong ASP.NET MVC hiển thị các view con bằng cách sử dụng các phương thức sau.

Phương thức Mô tả
RenderBody() Hiển thị phần của view con không nằm trong phần được đặt tên. Layout view phải có phương thức RenderBody().
RenderSection(string name) Hiển thị nội dung của phần được đặt tên và chỉ định xem phần đó có được yêu cầu hay không.

Hình sau minh họa việc sử dụng các phương thức RenderBody() và RenderSection().

Như bạn có thể thấy trong hình trên, _Layout.cshtml bao gồm phương thức RenderBody() và RenderSection(). Ở trên, Index.cshtml chứa các phần được đặt tên bằng cách sử dụng @section của mỗi phần khớp với tên được chỉ định trong phương thức RenderSection() của layout view _Layout.cshtml, ví dụ @Section RightSection.

Khi thực thi, các tên phần của Index.cshtml, chẳng hạn như LeftSection, RightSection và MiddleSection sẽ được hiển thị vào vị trí thích hợp nơi phương thức RenderSection() được gọi. Phần còn lại của view Index.cshtml, không nằm trong bất kỳ phần nào được đặt tên, sẽ được hiển thị tại ví trí phương thức RenderBody() được gọi.

Tạo Layout View trong ASP.NET MVC

Ở phần này bạn sẽ học cách tạo layout view bằng Visual Studio.

Bạn có thể tạo layout view trong bất kỳ thư mục nào trong thư mục Views. Tuy nhiên, bạn nên tạo tất cả các layout view trong thư mục Shared để dễ bảo trì.

Để tạo một layout view mới trong Visual Studio, nhấp chuột phải vào thư mục Shared -> chọn Add -> click vào New Item ... Thao tác này sẽ mở cửa sổ Add New Item lên, như được hiển thị bên dưới.

Tạo Layout View trong ASP.NET MVC

Trong hộp thoại Add New Item, hãy chọn mẫu MVC 5 Layout Page (Razor), và chỉ định tên là _myLayoutPage.cshtml và bấm Add để tạo layout view như được hiển thị bên dưới. Tên layout view bắt đầu dấu gạch dưới _ là một quy ước đặt tên phổ biến trong ASP.NET MVC.

<!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ờ, hãy thêm phương thức RenderSection("footer",true) vào trong thẻ <footer>, như được hiển thị bên dưới. Xin lưu ý rằng chúng tôi đã tạo phần này là bắt buộc. Nó có nghĩa là bất kỳ view nào sử dụng _myLayoutPage làm layout view của nó phải có phần footer.

<!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ờ, tạo một view con mới và chọn _myLayoutPage.cshtml làm layout view, như được hiển thị bên dưới.

Tạo Layout View trong ASP.NET MVC

Điều này sẽ tạo ra một view Index.cshtml mới như hình dưới đây.

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

<h2>Index</h2>

Bây giờ, hãy thêm phần footer vào view Index.cshtml vì _myLayoutPage.cshtml chứa phần footer bắt buộc, như hình dưới đây.

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

@section footer{
    <p class="lead">
        This is footer section.
    </p>
}

<h2>Index</h2>
<div class="row">
    <div class="col-md-4">
        <p>This is body.</p>
    </div>
</div>

Bây giờ, hãy chạy ứng dụng và bạn sẽ thấy rằng view Index sẽ được hiển thị tại vị trí phương thức RenderBody() được gọi, và phần footer sẽ được hiển thị trong RenderSection("footer", true), như hình dưới đây.

Tạo Layout View trong ASP.NET MVC

Như vậy, bạn có thể tạo một layout view mới với body và các phần khác nhau.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *