Partial Page, Partial View

Trong các View khái niệm Partial Page (hoặc Partial View) được sử dụng khi bạn chia nhỏ các trang Razor Page, hay các View ra thành từng phần nhỏ.

Lợi ích của việc chia nhỏ này đó là:

• Một View (Razor Page) phức tạp, khó bảo trì được chia thành nhiều phần nhỏ, dễ kiểm soát, dễ làm việc nhóm
• Sử dụng lại được những phần chung cho các trang

Tạo Partial Page, Partial View

Partial Page chính là các file .cshtml - chỉ có có điều loại file này không được routing tới (không được gọi trức tiếp), nên tên của nó sẽ bắt đầu bằng ký tự _

Chèn Partial Page, Partial View, chuyển dữ liệu đến Partial

Để chèn một Partial Page vào View, Razor Page bạn có thể sử dụng Partial Tag Helper

 <partial name="_NamePartial" />

Hoặc bạn có thể sử dụng phương thức Partial trong thuộc tính HTML

 @Html.Partial("_NamePartial") // Hoặc dùng PartialAsync, RenderPartial, RenderPartialAsync

Truyền ViewData sang Partial

Mặc định Partial Page nhận một bản copy thuộc tính ViewData (kiểu ViewDataDictionary ) của Page nạp nó. Bạn Bạn có thể tạo ra một đối tượng ViewDataDictionary và thiết lập ViewData cho Partial thay cho mặc định

 @{
    var products = new string[] {"Sản phẩm 1", "Sản phẩm 2" };
 }
 @await Html.PartialAsync("_NamePartial", new ViewDataDictionary(ViewData) { {"product", products}})
 

Lúc này trong Partial có thể đọc được dữ liệu:

  @{
      String[] products = ViewData["products"] as String[];
  }
  @foreach (var item in products)
  {
     <p>@item</p>
  }
 

Truyền Model sang Partial

 @{
    var products = new string[] {"Sản phẩm 1", "Sản phẩm 2" };
 }
 @await Html.PartialAsync("_NamePartial", products)
 

Lúc này trong Partial có thể đọc được dữ liệu Model:

 @model String[]
  @foreach (var item in Model)
  {
     <p>@item</p>
  }
 

Thư mục chứa Partial Page, Partial View

Razor tìm các Partial Page ở các thư mục theo thứ tự:

• Thư mục gọi file Razor
• Thư mục cha gọi file Razor
• Shared
• Pages/Shared
• Views/Shared

Trong MVC thì theo thứ tự các thư mục:

• /Areas/<Area-Name>/Views/<Controller-Name>
• /Areas/<Area-Name>/Views/Shared
• /Views/Shared
• /Pages/Shared

Nguồn tin: Xuanthulab