Bố cục và Phần trong ASP. NET MVC Core giúp chúng tôi đảm bảo sự thống nhất giữa các trang trong toàn bộ chế độ xem của ứng dụng. Trong bài viết này chúng ta sẽ tìm hiểu cách tạo trang Bố cục và chia sẻ nó cho người xem. Chúng ta sẽ sử dụng phương thức RenderBody để tạo View. Chúng ta cũng biết cách định nghĩa các phần và sử dụng nó với RenderSection như thế nào. Cuối cùng chúng ta sẽ tìm hiểu về _ViewStart trong định nghĩa Bố cục
Bố cục của trang web
Thiết kế của hầu hết các trang web bao gồm một menu, một phần đầu trang, chân trang và thanh bên. Như bạn thấy đi từ trang này đến trang kia trong website thì chỉ có nội dung ở giữa là thay đổi. Nhưng menu, header, footer hay color sắc cục bộ vẫn giữ nguyên. Điều này giúp website có cái nhìn thống nhất.
Một ứng dụng web nhìn cơ bản sẽ như sau
Bố cục trong ASP. NET Core là gì?
Lượt xem trong ASP. NET Core được tạo ra từ tệp. cshtml được đặt trong thư mục Lượt xem. Để giữ cho công việc đồng nhất giữa các trang, chúng ta cần thêm header, footer và thanh điều hướng vào tất cả các chế độ xem. Tuy nhiên điều này thường nặng nề víu và dễ sai sót đặc biệt nếu ta có nhiều view. Bố cục trang trong ASP. NET Core giúp chúng tôi định nghĩa một giao diện có các phần tử sử dụng chung như header, footer, menu điều hướng trên trang ở một vị trí mà có thể sử dụng cho mọi nơi
Project ví dụ
Open a ASP application. NET Core, chúng ta sử dụng kiến thức ở bài Bắt đầu khởi tạo ứng dụng ASP. NET lõi
Vị trí của trang Layout
Theo quy ước của ASP. NET Core MVC thì các view được lưu trong thư mục Views. Mỗi Bộ điều khiển sẽ có một thư mục con trong thư mục Lượt xem tương ứng với tên trung với tên bộ điều khiển nhưng không có hậu tố "Trình điều khiển". Tất cả các chế độ xem được liên kết với bộ điều khiển trong thư mục này. Thư mục Lượt xem cũng có chứa thư mục tên là Shared, nơi chứa các lượt xem được chia sẻ cho nhiều lượt xem khác dùng chung. Vì thế Bố cục được đặt trong thư mục này. Lượt xem/Chia sẻ
Làm sao để tạo bố cục
Tạo một thư mục có tên là Shared bên trong thư mục Lượt xem. Chuột phải vào thư mục Shared chọn Add View. And set name View is _Layout. Chọn Mẫu trống và không chọn vào cả 2 hộp kiểm Tạo dưới dạng chế độ xem một phần và Sử dụng trang bố cục vì chính thằng này không phải chế độ xem một phần cũng không cần sử dụng một trang bố cục nào vì nó là bố cục nhất rồi. Trong tương lai vẫn có những layout là con của 1 layout khác chúng ta sẽ tìm hiểu sau
Click vào Add để tạo View. Nó sẽ tạo tệp _Layout. cshtml trong thư mục Views/Shared. Mở nó ra và dán đoạn nội dung này vào
Layout Example
Layout example in HTML
@RenderBody[]
This is Footer
Đoạn HTML này có 3 phần là header, content và footer. Nội dung là phần mà bạn muốn thêm nội dung của các lượt xem khác vào
RenderBody
RenderBody là một phương thức đặc biệt đánh dấu vị trí mà các chế độ xem sử dụng Bố cục này sẽ được đặt vào đó khi chạy. Cơ bản thì nó là một vùng định trước của các View sẽ hiển thị ở đó
@RenderBody[]
Chỉ có một RenderBody được gọi trong một bố cục trang
Chỉ ra Bố cục được sử dụng trong Chế độ xem
Thay đổi nội dung Index Action method trong HomeController as after
public IActionResult Index[]
{
return View[];
}
Open Index. cshtml ra from Views/Home and copy line
@{
Layout = "_Layout";
}
Here goes the content
Index view trở nên đơn giản hơn. Chúng ta sẽ loại bỏ các thẻ , và . Các thẻ này giờ đây chuyển sang trang layout. Dòng đầu tiên của code là khối Razor, chúng ta định nghĩa trang layout sẽ được dùng cho view này. Chạy ứng dụng và nhìn kết quả.
Giờ hãy thêm một Action method khác tên AboutUs trong HomeController
public IActionResult AboutUs[]
{
return View[];
}
Giờ hãy thêm một Chế độ xem và chọn Bố cục
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
About Us
Giờ hãy chạy ứng dụng và vào URL. /Trang chủ/Giới thiệu. Bạn sẽ thấy nội dung đã thay đổi khi đầu trang và chân trang được thêm vào từ Bố cục
Bố cục đường dẫn
Chúng ta sử dụng đầy đủ đường dẫn "~/Views/Shared/_Layout. cshtml" trong chế độ xem Giới thiệu, trong khi hành động Lập chỉ mục lại sử dụng đường dẫn là "_Layout". Khi một phần đường dẫn được cung cấp cho công cụ xem Razor tìm bố cục tệp tìm kiếm trong thư mục Lượt xem/{Bộ điều khiển} trước tiên, và theo sau đó là thư mục Đã chia sẻ. Quá trình này được gọi là tìm kiếm View
Tiết diện
ASP. NET Core cho phép bạn tạo một hoặc nhiều phần để bố trí. Phần cần một cái tên và một thuộc tính chỉ xem nó có bắt buộc phải có trong các chế độ xem con không. Phương thức RenderSection[tên chuỗi, yêu cầu bool. false] định nghĩa phần tên
@RenderSection["footer", required: false]
Add Section to Layout
Open layout ra and paste command line after into the content
@RenderSection["Test", required: false]
Chúng ta định nghĩa một phần có tên "Test" với tham số bắt buộc là sai tức là không yêu cầu bắt buộc phải có phần này trong chế độ xem con
Định nghĩa Mục trong chế độ xem
Giờ hãy vào trang View of Index và dán đoạn sau
________số 8Các mục được định nghĩa với một lệnh Razor khối là @section bằng tên của nó đi kèm. Chạy ứng dụng và kiểm tra xem các phần hiển thị sau nội dung
Tạo phần bắt buộc
Thay đổi tham số bắt buộc. đúng khi định nghĩa phần trong bố cục như dưới đây
@RenderSection["Test", required: true]
Giờ hãy chạy ứng dụng và truy cập URL /Home/AboutUs sau đó bạn nhìn thấy lỗi sau
Ngoại lệ hoạt động không hợp lệ. Trang bố cục ‘/Views/Shared/_Layout. cshtml’ không thể tìm thấy phần ‘Kiểm tra’ trong trang nội dung ‘/Views/Home/AboutUs. cshtml'
Điều này xảy ra vì chúng ta không định nghĩa phần "Thử nghiệm" khi xem Giới thiệu
_Xem Bắt đầu
Trong ví dụ trên, chúng tôi định nghĩa bố cục và sử dụng nó cho các chế độ xem. Định nghĩa bố cục trong tất cả các lượt xem thật khó để bảo trì. Cách đơn giải nhất là định nghĩa bố cục trong _ViewStart. cshtml
Mục đích của tệp này là cài đặt giá trị mặc định cho các Chế độ xem khác trong thư mục và thư mục con của nó. Giờ đến thư mục Lượt xem và tạo _ViewStart. cshtml trong thư mục Lượt xem và dán đoạn sau
@RenderBody[]
0Remove or comment đoạn code on view AboutUs. Chạy ứng dụng và kiểm tra lại
Loại bỏ bố cục từ chế độ xem
Vì chúng ta đã thêm tệp _ViewStart. cshtml vào thư mục Lượt xem nên bố cục giờ có thể áp dụng cho tất cả các lượt xem. Trong trường hợp bạn không muốn sử dụng bố cục cho xem bất kỳ bạn chỉ cần đặt giá trị Bố cục là null
@RenderBody[]
1or set value for Layout is a other Layout
@RenderBody[]
2Bạn có thể tạo một tệp _ViewStart tách biệt trong thư mục Controller, vậy là bạn có thể ghi đè tệp _ViewStart từ thư mục cha