Trong bài này mình sẽ tạo một thư mục Shared chứa Layout Razor bên cạnh đó mình còn tạo _ViewStart.cshtml, để cấu hình bố cục giao diện cho website
+ Views/Shared: là nơi để hiển thị các chế độ xem(View) trong nhiều bộ điều khiển Controller(multiple Controller), nó là bố cục của website, giúp ta giảm được code lập đi lập lại trong nhiều file.
Giờ ta tạo một layout bằng cách như hình sau, sau đó bạn vào Views/Shared/_LayoutPage1.cshtml sẽ có đoạn code sau:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Tại @RenderBody(): tại đây dùng để hiển thị các bộ điều khiển của ta ra, có nghĩa là hiển thị nội dung mà bạn muốn, ví dụ bạn muốn fix header và footer cố định trang cho mỗi giao diện của website
bạn cần chỉnh sửa lại layout như sau:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div class="header">
<!--code header fixed-->
</div>
<div>
@RenderBody()
</div>
<div class="footer">
<!--code footer fixed-->
</div>
</body>
</html>
Như vậy bạn đã cố định header/footer. Nếu làm cách trên bạn có thể hiển thị nội dung tùy thích bên trong
Okay, tiếp theo để sử dụng được _LayoutPage1.html bạn cần thay đổi code trong file Index.cshtml trong thư mục Views/Home/Index.cshtml như sau
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}
Vậy là xong vấn đề tạo Layout Razor, nhưng các bạn cần chú ý điểm này, hồi mình cũng phải xóa cái đoạn code trong Index.cshtml đi thôi, bởi vì mình tiếp tục tạo _ViewStart.cshtml cho bố cục toàn trang. Bạn yên tâm không có file _ViewStart.cshtml bạn dẫn chạy được website nhé, không sao cả.
+ _ViewStart.cshtml: dùng để định nghĩa layout cho cả website, bạn có thể thiết lập tùy biến sài layout cũng được, giống như Admin thì sài layout này, còn user thì thì sai layout kia.
Okay, sau khi tạo _ViewStart.html ta cần thiết lập code như bên dưới cho file, ta sẽ gọi _LayoutPage1.cshtml bên trong. Chính vì như thế bạn cần phải mở file Index.cshtml trong Views/Home/Index.cshtml lên và xóa đi đoạn code ban đầu mình gắn, bởi vì trong _ViewStart.cshtml ta đã gọi layout rồi, nên trong Index.cshtml không cần gọi và kế thừa nó nửa.
//Views/ViewStart.cshtml
@{
Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}
Tuy biến _ViewStart.cshtml như sau bạn có thể sửa lại
@{
string CurrentName = Convert.ToString(HttpContext.Current.Request.RequestContext.RouteData.Values["Controller"]);
string clayout = "";
switch (CurrentName)
{
case "Home":
clayout = "~/Views/Shared/_LayoutHome.cshtml";
break;
default:
//Admin layout
clayout = "~/Views/Shared/_LayoutAdmin.cshtml";
break;
}
Layout = clayout;
}
Nhìn đoạn code bên trên các bạn thấy mình lấy tên Controller để so sánh xem, nếu người dùng đang dùng HomeController thì mình dùng layout Views/Shared/_LayoutUser.cshtml ngược lại dùng Views/Shared/_LayoutAdmin.cshtml
Bạn có thể test gõ: http://localhost:49763/Admin/Index hoặc http://localhost:49763/Home/Index
