Chương 3: Partial View trong ASP.
NET MVC
1. Định nghĩa
Partial View:
o Partial View là một phần của view, cho phép tái sử dụng đoạn mã HTML trong nhiều
view khác nhau. Bạn không thể truy cập trực tiếp Partial View thông qua URL; nó phải
được gọi từ một view cha hoặc layout.
o Ví dụ: Giả sử bạn có một thanh điều hướng mà bạn muốn sử dụng trên nhiều trang. Bạn
có thể tạo một Partial View cho thanh điều hướng đó.
html
Copy
<!-- _HeaderNavBar.cshtml -->
<div class="navbar">
<ul>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
RefreshNew tab
Share
Console
Close console
2. Lý do nên sử dụng Partial View
Tái sử dụng mã:
o Partial View cho phép bạn viết một đoạn mã HTML một lần và sử dụng lại ở nhiều nơi,
giúp giảm thiểu sự trùng lặp mã.
Dễ bảo trì:
o Khi có sự thay đổi trong giao diện, bạn chỉ cần cập nhật trong một Partial View. Điều này
tiết kiệm thời gian và giảm nguy cơ lỗi do không đồng nhất.
Tổ chức mã rõ ràng:
o Sử dụng Partial View giúp cấu trúc mã nguồn trở nên rõ ràng và dễ hiểu hơn, giúp lập
trình viên dễ dàng quản lý và phát triển ứng dụng.
Cải thiện hiệu suất:
o Partial View cho phép cập nhật một phần giao diện mà không cần tải lại toàn bộ trang,
giúp cải thiện tốc độ tải và trải nghiệm người dùng.
3. Nếu không ứng dụng Partial View thì dự án sẽ như thế nào?
1. Trùng lặp mã:
o Nếu không sử dụng Partial View, bạn sẽ phải sao chép mã HTML giống nhau vào nhiều
view khác nhau, dẫn đến mã nguồn nặng nề và khó quản lý.
2. Khó khăn trong bảo trì:
o Khi có sự thay đổi trong giao diện, bạn sẽ phải tìm và sửa tất cả các bản sao của mã
HTML, tốn thời gian và dễ gây ra lỗi.
3. Cấu trúc mã kém:
o Mã nguồn sẽ trở nên lộn xộn và khó đọc, gây khó khăn cho lập trình viên khác trong việc
hiểu cấu trúc ứng dụng.
4. Giảm hiệu suất:
o Việc tải lại toàn bộ trang thay vì chỉ cập nhật một phần sẽ làm chậm ứng dụng, ảnh
hưởng đến trải nghiệm người dùng.
5. Khó khăn trong kiểm thử:
o Việc kiểm thử các phần giao diện sẽ trở nên khó khăn hơn khi không có cách nào để tách
biệt mã thành các phần nhỏ hơn.
4. Tại sao không dùng RenderBody mà phải dùng Partial View
1. Khác biệt về mục đích sử dụng
RenderBody:
o Chỉ định vị trí để chèn nội dung của view con vào layout. Nó không tái sử dụng mã và chỉ
hoạt động trong ngữ cảnh của layout.
Partial View:
o Được thiết kế để tái sử dụng đoạn mã HTML trong nhiều view khác nhau. Partial View có
thể chứa các thành phần giao diện phức tạp và có thể được gọi từ bất kỳ view nào.
2. Trường hợp bắt buộc phải dùng Partial View
1. Khi cần tái sử dụng một phần giao diện:
o Ví dụ: Thanh điều hướng cần hiển thị trên nhiều trang.
<!-- Gọi Partial View trong một view khác -->
@Html.Partial("_HeaderNavBar")
2. Khi cần chia nhỏ giao diện:
o Nếu bạn có một giao diện phức tạp với nhiều phần khác nhau, sử dụng Partial View giúp
tổ chức mã tốt hơn.
3. Khi có logic riêng cho một phần giao diện:
o Nếu cần xử lý logic riêng cho một phần giao diện, bạn nên sử dụng Partial View.
// Controller để lấy dữ liệu cho Partial View
public ActionResult GetData()
{
var data = // Lấy dữ liệu từ cơ sở dữ liệu
return PartialView("_DataPartial", data);
}
4. Khi cần sử dụng AJAX:
o Nếu bạn muốn cập nhật một phần của trang mà không cần tải lại toàn bộ trang.
javascript
Copy
// AJAX request để lấy Partial View
$.get('/Controller/GetData', function(data) {
$('#dataContainer').html(data);
});
5. Khi cần tập trung vào một phần giao diện cụ thể:
o Nếu bạn muốn một phần cụ thể của giao diện có thể được quản lý độc lập, Partial View
cho phép bạn làm điều đó.
5. Kết luận
Việc sử dụng Partial View là rất quan trọng để đảm bảo tính tái sử dụng và tổ chức mã hiệu quả.
RenderBody chỉ là một công cụ để chèn nội dung và không đủ linh hoạt để xử lý các tình huống
phức tạp mà Partial View có thể giải quyết.
Các loại Partial View và cách sử dụng trong ASP.NET MVC
Trong ASP.NET MVC, có nhiều cách để sử dụng Partial View, tùy thuộc vào nhu cầu của ứng
dụng. Dưới đây là một số loại Partial View phổ biến và cách sử dụng chúng:
1. Standard Partial View
Định nghĩa: Đây là loại Partial View cơ bản, thường được sử dụng để tái sử dụng một đoạn mã
HTML trong nhiều view khác nhau.
Cách sử dụng:
Tạo Partial View:
Tạo một file _ExamplePartial.cshtml trong thư mục Views/Shared.
<!-- _ExamplePartial.cshtml -->
<div class="example-partial">
<h2>This is a Partial View</h2>
<p>Content shared across different views.</p>
</div>
Gọi Partial View trong một View:
@Html.Partial("_ExamplePartial")
2. Action Partial View
Định nghĩa: Đây là Partial View mà dữ liệu được nạp thông qua một hành động trong
Controller. Thường dùng khi cần lấy dữ liệu từ cơ sở dữ liệu.
Cách sử dụng:
Tạo Controller Action:
public ActionResult ExampleAction()
{
var model = GetData(); // Lấy dữ liệu từ nguồn
return PartialView("_ExamplePartial", model);
}
Gọi Action Partial View trong View:
@Html.Action("ExampleAction", "ExampleController")
3. AJAX Partial View
Định nghĩa: Partial View này được gọi thông qua AJAX, cho phép cập nhật một phần của trang
mà không cần tải lại toàn bộ.
Cách sử dụng:
Tạo Action để trả về Partial View:
public ActionResult GetPartialData()
{
var data = GetData(); // Lấy dữ liệu
return PartialView("_DataPartial", data);
}
Gọi Partial View bằng AJAX:
$.get('/Example/GetPartialData', function(data) {
$('#partialContainer').html(data);
});
HTML để chứa Partial View:
<div id="partialContainer"></div>
4. View Component
Định nghĩa: View Component là một phần mở rộng của Partial View, có thể chứa logic và
không cần phải phụ thuộc vào một Controller Action cụ thể.
Cách sử dụng:
Tạo View Component:
public class ExampleViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
var data = GetData(); // Lấy dữ liệu
return View("_ExampleViewComponent", data);
}
}
Gọi View Component trong View:
@await Component.InvokeAsync("ExampleViewComponent")
Kết luận
Các loại Partial View trong ASP.NET MVC rất đa dạng, từ Standard Partial View đơn giản cho
đến Action Partial View và AJAX Partial View phức tạp hơn. Mỗi loại có ứng dụng và cách sử
dụng riêng, giúp bạn phát triển ứng dụng một cách linh hoạt và hiệu quả.
