Dao cạo kết xuất chuỗi html

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

 

Dao cạo kết xuất chuỗi html

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

 

Dao cạo kết xuất chuỗi html

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


    
    
 
    
@RenderBody()

Đ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ả.

Dao cạo kết xuất chuỗi html

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

 

Dao cạo kết xuất chuỗi html

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ố 8

Cá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()
0

Remove 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()
1

or set value for Layout is a other Layout

@RenderBody()
2

Bạ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