Phân trang và tìm kiếm bằng kỹ thuật Ajax bằng cách sử dụng ASP.NET MVC và jQuery

Trong chủ đề này, tôi muốn giới thiệu một phương pháp đơn giản áp dụng Ajax, Jquery trong ASP.NET MVC để phân trang và tìm kiếm.
Chúng ta sẽ theo các bước sau để hoàn thành vì dụ:

1. Tạo một lớp Person để lưu thông tin của những người mà chúng ta muốn gởi đến browser

2. Càiđặt lớp PersonRepository:

a. Lấy các Persons theo chỉ số trang

b. Tìm kiếm các Person theo chuỗi tìm kiếm (theo tên) và chỉ số trang

3. Cài đặt Controller và View

Bước 1 - Tạo lớp Person

Step 2 – Cài đặt lớp  PersonRepository

hương thức IList  Get(int page, out int total) được sử dụng để lấy dữ liệu theo trang. Nó cũng trả về tổng số bản ghi có trong dữ liệu.

Phương thức IList Get(int page, string criteria, out int total) được sử dụng để tìm kiếm và trả về kết quả dựa trên chỉ số trang và tiêu chí tìm kiếm.

Bước 3 - Cài đặt Controller và View

Chúng ta cần cài đặt action  Home/Index, action này sẽ trả về trang kết quả  khi tìm kiếm (dựa vào chỉ số trang và chuỗi tiêu chí tìm kiểm). Chỉ số trang mặc định là 1. Không chỉ cần trả về danh sách các đối tượng tìm được, chúng ta cũng nền trả về thông khác cho trình duyệt, đó là chỉ số trang đang hiển thị, tổng số bản ghi tìm được dựa trên chuỗi tìm kiếm; các thông tin này cần thiết cho chúng ta để cài đặt công cụ phân trang.

Chúng ta cũng cần phải cài action Home/GetPersons, nó sẽ trả về kết quả tìm kiếm bất đồng bộ:

Dưới đây là cài đặt của HomeController

Chúng ta đều biết rằng khi áp dụng phân trang theo kiểu ajax, chúng ta sẽ gởi các request bất đồng bộ để lấy dữ liệu và sau đó không cần phải làm tươi toàn trang,bạn chỉ cần chèn hoặc thay đổi một phần dữ liệu trong trang web bằng dữ liệu bạn lấy về. Trong trường hợp của ví dụ này, phần chúng ta cần lấy về chính là đoạn mã html dùng để hiển thị kết quả tìm kiếm được phân trang và điều khiển phân trang có tên là _PersonList.cshtml (mã dưới đây)

Ở phần hiển thị phân trang của trang view kể trên, chúng ta có các links Prev và Next để xem các trang kết quả tìm kiếm có chỉ số trang nhỏ hơn một hoặc lớn hơn một so với trang hiện tại . we have Prev and Next link to request the previous page or the next page of persons by call javascript bằng cách gọi phương thức javascript  OnCriteria(pageIndex, newCriteriaIncluded). Tham số criteriaIncluded báo cho phương thức biết rằng cần phải tìm kiếm thông tin theo nội dung của ô có id là  #criteria, người lại thì sẽ tìm kiếm theo thông tin tìm kiếm cũ lưu ở hidden input có id là #lastedCriteria .Phương thức này sẽ được cái đặt trong Index.cshmtl.

Trong phương thức OnCriteria, chúng ta sẽ sử dụng phương thức $.ajax() của jQuery để gởi các request bất đồng bộ lên server và trả kết quả trả về vào trong div  #PersonContainer.

Trang index.cshmtl được cài đặt như sau:

Voila, c’est fini! Bạn sẽ chạy chương trình và xem kết quả phân trang của mình. (Lưu ý bạn nhớ tham chiếu đến thư viện jQuery ở trang layout hoặc master page.)