ASP.NET - MVC - Layout View

Layout View

Một ứng dụng có thể chứa các phần chung trong giao diện người như logo, tiêu đề, menu trái , menu phải hoặc footer. ASP.NET MVC đã giới thiệu một giao diện Bố cục chứa các phần UI chung này, do đó chúng ta không phải viết cùng một mã trong mỗi trang. Giao diện bố cục giống như trang chính của ứng dụng webform ASP.NET.

Ví dụ: Giao diện người dùng ứng dụng có thể chứa Header, Thanh menu bên trái, thanh menu bên phải và phần footer vẫn giữ nguyên trong mỗi trang và chỉ phần Center thay đổi.

Layout cho phép bạn xác định một mẫu trang web chung, có thể được kế thừa trong nhiều view để cung cấp giao diện nhất quán  nhiều trang trong một ứng dụng. Layout bố trí giúp loại bỏ mã hóa trùng lặp và tăng cường tốc độ phát triển và bảo trì dễ dàng. Giao diện bố trí cho giao diện người dùng ở trên sẽ chứa phần Header, Menu bên trái, Thanh bên Right và Phần Footer. Nó chứa một placeholdernằm ở Center để dễ dàng thay đổi nội dung.

Trong Razor các layout có cùng phần mở rộng giống các view khác cshtml hoặc .vbhtml. Các layout này được chia sẻ với nhiều views vì vậy nó phải được lưu trong thư mục Shared. Ví dụ: khi chúng ta tạo ứng dụng MVC đầu tiên của mình trong phần trước, nó cũng đã tạo _Layout.cshtml trong thư mục Shared như hiển thị bên dưới.

Sau đây là _Layout.cshtml được tạo tự động.

<!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>&copy; @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 chứa html, header và body là các thẻ html bình thường, sự khác biệt duy nhất là gọi các phương thức RenderBody () và RenderSection (). RenderBody hoạt động như một trình giữ chỗ cho các views khác. Ví dụ: Index.cshtml trong thư mục home sẽ được chèn và hiển thị trong layout, trong đó phương thức RenderBody () sẽ được gọi.

Sử dụng Layout 

Bạn phải tự hỏi rằng làm thế nào để View biết nên sử dụng Layout nào?

Bạn có thể đặt layout theo nhiều cách, bằng cách sử dụng _ViewStart.cshtml hoặc thiết lập đường dẫn của layout bằng thuộc tính layout trong view riêng lẻ hoặc gọi layout trong phương thức.

_ViewStart.cshtml

Theo mặc định, ViewStart.cshtml nằm trong thư mục Views. Nó thiết lập trang layout mặc định cho tất cả các view  trong thư mục và các thư mục con  bằng thuộc tính Layout. Bạn có thể chỉ định đường dẫn hợp lệ của bất kỳ trang Layout nào cho thuộc tính Layout.

Ví dụ: Tập tin  _ViewStart.cshtml  trong thư mục Views, đặt thuộc tính Layout  thành "~/Views/Shared/_Layout.cshtml". Vì vậy, bây giờ, _layout.cshtml sẽ là layout của tất cả các view  nằm trong thư mục Views và thư mục con. Vì vậy, Các trng mặc định sẽ kế thừa từ  _ViewStart.cshtml trong thư mục Views.

Tập tin ViewStart.cshtml cũng có thể nằm trong thư mục con của thư mục View. Mặc định các trang layout cho tất cả các view chỉ nằm trong thư mục con cụ thể.

Ví dụ: Tập tin _ViewStart.cshtml trong thư mục Home, đặt thuộc tính Layout  thành _myLayoutPage.cshtml. Vì vậy, _ViewStart.cshtml  sẽ chỉ ảnh hưởng đến tất cả các views trong thư mục Home. Vì vậy, bây giờ, các Views: Index, About và Contact sẽ được hiển thị trong _myLayoutPage.cshtml thay vì _Layout.cshml mặc định.

Cài đặt thuộc tính Layout cho từng views

Bạn cũng có thể ghi đè trang layout mặc định được đặt bởi _ViewStart.cshtml bằng cách đặt thuộc tính Layout trong mỗi view .cshtml riêng lẻ. Ví dụ: view Index  sử dụng _myLayoutPage.cshtml khi đó ta đổi _ViewStart.cshtml thành _Layout.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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
    </div>
</div>

Gọi trang Layout trong phương thức ActionResult

Bạn cũng có thể chỉ định trang layout nào trong View() bằng phương thức.

Ví dụ sau trong phương thức View() hiển thị Index bằng cách sử dụng _myLayoutPage.cshtml.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View("Index", "_myLayoutPage");
    }

    public ActionResult About()
    {
        return View();
    }

    public ActionResult Contact()
    {
        return View();
    }
}

Các phương thức hiển thị 

ASP.NET MVC  hiển thị các Views sử dụng các phương thức sau:

Phương thức Giải thích
RenderBody() Hiển thị phần của view con không nằm trong phần được đặt tên. Layout 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ó bắt buộc không. RenderSection () là tùy chọn trong Layout.

Hình dưới đây 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à phương thức RenderSection (). Các phương thức RenderSection chỉ định tên của một phần như LeftSection, MiddleSection và RightSection trong hình trên. Index.cshtml định nghĩa phần được đặt tên bằng cách sử dụng @section trong đó tên của từng phần khớp với tên được chỉ định trong phương thức RenderSection của _Layout.cshtml, chẳng hạn như @Section RightSection, v.v. Vào thời gian chạy, các phần được đặt tên của Index.cshtml như LeftSection, RightSection và MiddleSection sẽ được hiển thị tại vị trí thích hợp nơi phương thức RenderSection được gọi. Phần còn lại của chế độ xem Chỉ mục, không nằm trong bất kỳ phần nào được đặt tên sẽ hiển thị nơi phương thức RenderBody () đang được gọi.

 Những điểm cần nhớ :
  1.  Layout chứa các thành phần chung của một UI. Nó giống masterpage trong ASP.NET webforms.
  2. Tập tin _ViewStart.cshtml có thể sử dụng để chỉ định đường dẫn trong trang layout, Nó được sử dụng cho tất cả các view trong cùng thư mục hoặc thư mục con.
  3. Bạn cũng có thể đặt thuộc tính Layout trong từng view, để ghi đè cài đặt trang layout mặc định là  _ViewStart.cshtml
  4. Layout sử dụng hai phương thức kết xuất: RenderBody () và RenderSection ().
  5. RenderBody chỉ có thể được sử dụng một lần trong layout, trong khi phương thức RenderSection có thể được gọi nhiều lần với tên khác nhau.
  6. Phương thức RenderBody hiển thị tất cả nội dung của view không được gói trong phần được đặt tên.
  7. Phương thức RenderSection hiển thị nội dung của chế độ xem được gói trong phần được đặt tên.
  8. RenderSection có thể được cấu hình theo yêu cầu hoặc tùy chọn. Nếu theo yêu cầu, thì tất cả các view con phải nằm trong cùng một section.