ASP.NET MVC3 và những sức mạnh mà bạn chưa biết đến

Partial View là một đoạn (fragment) có thể tái sử dụng gồm nội dung và mã lệnh được nhúng vào trong một View và cải thiện khả năng sử dụng của một trang web đồng thời giảm bớt khả năng trùng viết mã trùng lặp hay phải viết lại mã lệnh đã có trước

Lưu ý : Partial View trong ASP.NET MVC tương tự như điều khiển UserControl trong ASP.NET WebForm và được thể hiện qua lớp ViewUserControl mà xuất phát là từ lớp UserControl ASP.NET

Để hiểu rõ hơn về cách sử dụng Partial View trong trang website, tôi giả sử một ứng dụng web thương mại điện tử có các phần như : danh sách mặt hàng, giỏ hàng, chọn mặt hàng, thanh toán,….Để giảm bớt khả năng phức tạp của cách sử dụng View, bạn có thể dùng mỗi phần như thế là một Partial View riêng biệt, và sau đó sử dụng tất cả Partial View vào trong một View duy nhất cho ứng dụng web. Hoặc một cách hiểu khác cho Partial View là sử dụng nó cho việc hiển thị đánh dấu nhiều phần khác nhau trong ứng dụng web.

So sánh giữa View và Partial View

Một View là thể hiện của một trang HTML đầy đủ, trong khi Partial View là một đoạn của HTML, và không xác định vị trí trong giao diện (layout) website.

Dưới đây, tôi sẽ ví dụ một Partial View cho ứng dụng.

Bước 1: Vào Visual Studio 2010, tạo mới Project MVC3 Application và sử dụng mã Razor, xem hình bên dưới

Bước 2: Tạo một ADO.NET Data Entity Model để ánh xạ toàn bộ dữ liệu từ SQL Server lên Visual Studio bằng cách nhấn chuột phải vào Models/Add New Item/, chọn Tab Data. như hình bên dưới

 

Tiếp theo chỉ là việc chọn Nguồn dữ liệu có sẵn từ SQL Server cho đặt tên cho Entities Model này. Đến đây là tôi đã có được một cơ sở dữ liệu dùng cho việc hiển thị lên Partial trong ứng dụng

Bước 3: Tạo một View có tên PartialView trong View/Home/ để viết mã lệnh HTML cho việc sẵn sàng hiển thị dữ liệu

Bước 4: Tại View PartialView, tôi viết các mã lệnh cho việc hiển thị như sau:

Bước 5: Tôi vào View/Home/Index.cshtml, tôi sử dụng PartialView vừa tạo ở trên để hiển thị dữ liệu, cú pháp như sau:

@Html.Partial("PartialView")

Bước 6: Chạy ứng dụng bằng cách nhấn F5 để kiểm tra, và đây là kết quả: