Partial Views

Một cách để chia trang thành các phần nhỏ hơn là sử dụng phần Xem tổng thể – tất cả thông tin được trả về cho khách hàng đều nằm trong phần Xem này. Tuy nhiên, có nhiều cách khác nhau để chia trang thành nhiều phần nhỏ hơn, điều này rất hữu ích vì nhiều lý do, đặc biệt là khả năng tái sử dụng các phần khác nhau.

Trong phần này, chúng ta sẽ tìm hiểu về giao diện tổng thể, là một phần chung nằm trong các phần Xem, đây cũng là một trong những nội dung của các chương tiếp theo. Tuy nhiên, ngay bây giờ chúng ta sẽ nói về phần xem thông tin. Như tên gọi, phần xem thông tin cho phép bạn chia phần Xem ra thành nhiều tệp khác nhau. Tại sao bạn muốn làm điều đó?

Một lý do rõ ràng là bạn có thể lấy một phần Xem và chia thành phần xem thông tin, điều này cho phép bạn tái sử dụng phần nào đó của giao diện nếu cần. Ví dụ, nếu bạn có một giao diện đăng nhập, bạn có thể biến nó thành phần xem thông tin và sử dụng trên nhiều trang. Hơn nữa, bạn có thể làm cho phần Xem ít phức tạp hơn bằng cách chia nhỏ các thành phần.

Có Thể Bạn Quan Tâm :   L-Glutathione Là chất gì?

Bây giờ bạn đã hiểu về phần Xem thông tin, hãy cùng xem cách tạo và sử dụng nó trong dự án.

Tạo phần xem thông tin

Phần xem thông tin trong ASP.NET MVC thường được tạo theo cách sau:

  • Chúng nằm trong cùng thư mục mà một hoặc nhiều phần Xem sử dụng, vì vậy chúng được đặt trong thư mục Chia sẻ trong thư mục Xem
  • Tên của chúng bắt đầu bằng dấu gạch dưới, chỉ đơn giản là biểu thị rằng chúng không phải là phần Xem thông thường

Hãy thêm phần Xem thông tin. Chúng ta thêm chúng vào thư mục Chia sẻ để đảm bảo rằng toàn bộ phần Xem có thể truy cập dễ dàng:

Phần Xem thông tin

Trong hộp thoại, hãy đảm bảo bạn chọn mục “Tạo thành phần xem thông tin”:

Phần Xem thông tin

Visual Studio sẽ tạo một phần Xem mới trống, ở đây bạn có thể xây dựng markup và mã Razor giống phần Xem thông thường. Ví dụ, tôi sẽ xây dựng phần Xem thông tin như sau:

<div>Xin chào, thế giới!</div><div>Hôm nay là @DateTime.Now.ToString()</div>

Bây giờ chúng ta hãy sử dụng một phần Xem trong các phần Xem của chúng ta, ví dụ bạn muốn tạo một phần Xem khi chúng ta đang nói về phần Xem như trong bài giảng trước. Chúng ta sẽ sử dụng một trong các phương thức của đối tượng HtmlHelper trong MVC framework gọi là PartialAsync():

Có Thể Bạn Quan Tâm :   Desktop.ini trên Windows là gì? có phải virus không? xóa được không?

@{ ViewData[“Title”] = “Index”;}<h2>Index</h2>@await Html.PartialAsync(“_Greeting”)<span>Thêm thông tin ở đây….</span>

Chúng ta không cần quan tâm đến await – đó là tính bất đồng bộ của phương thức PartialAsync()

Khi phần Xem được thực hiện, nội dung của phần Xem thông tin sẽ được tự động chèn vào qua phương thức PartialAsync(), kết hợp với phần còn lại của phần Xem. Lưu ý rằng, chúng ta không cần chỉ định tên tệp hoàn chỉnh và đường dẫn của phần Xem thông tin – thư mục Chia sẻ sẽ tự động được tìm kiếm trong quá trình khám phá Xem. Tuy nhiên, nếu bạn đặt phần Xem thông tin trong một vị trí khác hoàn toàn, bạn có thể phải chỉ định đường dẫn như sau:

@await Html.PartialAsync(“/Views/SomeFolder/SomeSubFolder/_Greeting.cshtml”)

Truyền dữ liệu vào phần Xem thông tin

Phần Xem thông tin cơ bản là một phần Xem, vì vậy bạn có thể truy cập vào dữ liệu trong phần Xem thông tin nếu cần. Bạn có thể sử dụng kiểu Model (ví dụ: cùng Model trong phần Xem cha) hoặc có dữ liệu tùy chỉnh thông qua ViewDataDictionary hoặc kết hợp cả hai. Vì sự tương tự như vậy, tôi sẽ không đi vào chi tiết, nhưng sẽ đi sâu hơn vào chủ đề truyền dữ liệu vào phần Xem thông tin.

Có Thể Bạn Quan Tâm :   Thị trường chứng khoán (Stock Market) là gì? Chức năng và phân loại

Tôi sẽ cho bạn một ví dụ rất thú vị về cách sử dụng phương thức PartialAsync. Điều này dựa trên một tình huống phổ biến, phần Xem thông tin chứa markup cần trả về một đối tượng nhiều lần trong phần Xem. Chúng ta có thể làm điều này bằng cách gọi PartialAsync() trong vòng lặp và sử dụng ViewDataDictionary để truyền thông tin vòng lặp:

@for (int i = 0; i < 3; i++){ @await Html.PartialAsync(“_Greeting”, Model, new ViewDataDictionary(ViewData) { { “index”, i } })}

Trong phần Xem thông tin, chúng ta có thể truy cập vào dữ liệu vòng lặp:

<span>Số lần lặp @ViewData[“index”]</span>

Mặc định, bạn có thể truy cập vào cùng ViewData trong phần Xem thông tin như trong phần Xem cha, nhưng như mô tả trong ví dụ trên, bạn cũng có thể truyền dữ liệu mới.

Kết luận

Phần Xem thông tin cho phép bạn chia phần Xem thành các phần nhỏ hơn, có thể tái sử dụng và làm cho phần Xem trở nên đơn giản hơn.

Back to top button