Thứ sáu, ngày 15 tháng 12 năm 2017

Phân trang và tìm kiếm với Ajax bằng cách sử dụng jQuery

Ngày đăng: 2/10/2012, 10:48:42AM | Lượt xem: 9,373
Hot!

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
namespace AjaxPaging.Models
{
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}  
Step 2 – Cài đặt lớp  PersonRepository
using System;
using System.Collections.Generic;
using System.Linq;

namespace AjaxPaging.Models
{
    public class PersonRepository
    {
        private static readonly IList<Person> Persons = new List<Person>();

        public PersonRepository()
        {
            if (Persons.Count == 0)
            {
                for (var i = 1; i < 1000; i++)
                {
                    var p = new Person() { Id = i, Name = Guid.NewGuid().ToString() };
                    Persons.Add(p);
                }
            }
        }

        public IList<Person> Get(int page, out int total)
        {
            var persons = (from p in Persons select p).Skip((page - 1) * 10).Take(10);
            var totalPerson = (from p in Persons select p).Count();
            total = totalPerson / 10 + (totalPerson % 10 > 0 ? 1 : 0);
            return persons.ToList();
        }

        public IList<Person> Get(int page, string criteria, out int total)
        {
            var persons = (from p in Persons where p.Name.StartsWith(criteria) select p).Skip((page - 1) * 10).Take(10);
            var totalPerson = (from p in Persons select p).Count();
            total = totalPerson / 10 + (totalPerson % 10 > 0 ? 1 : 0);
            return persons.ToList();

        }

    }
} 
 
phương thức IList<Person>  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<Person> 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
using System.Web.Mvc;
using AjaxPaging.Models;

namespace AjaxPaging.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        private readonly PersonRepository _personRepository = new PersonRepository();
        public ActionResult Index(string criteria, int page = 1 )
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            int total;
            var persons = string.IsNullOrEmpty(criteria) 
                                ? _personRepository.Get(page, out total) 
                                : _personRepository.Get(page, criteria, out total);

            ViewData["page"] = page;
            ViewData["total"] = total;
            ViewData["criteria"] = criteria;

            return View(persons);
        }

        public ActionResult GetPersons(string criteria, int page)
        {
            int total;

            var persons = string.IsNullOrEmpty(criteria) 
                                ? _personRepository.Get(page, out total) 
                                : _personRepository.Get(page, criteria, out total);

            ViewData["page"] = page;
            ViewData["total"] = total;
            ViewData["criteria"] = criteria;

            return View("_PersonList", persons);
        }
    }
} 
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)
@model IEnumerable<AjaxPaging.Models.Person>
@{
    var page = (int)ViewData["page"];
    var total = (int)ViewData["total"]; 
}
Criteria:
<input id="criteria" type="text" value="@ViewData["criteria"]" onblur="javascript:OnCriteria(1, true);" />
<input id="lastedCriteria" type="hidden"  value="@ViewData["criteria"]" />
<div style="margin: 1.5em;">
    <table border="1" cellspacing="3" cellpadding="5">
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.Id
                </td>
                <td>
                    @item.Name
                </td>
            </tr>
        }
    </table>
</div>
<div style="margin: 1.5em;">
    @if (page > 1)
    {
        <a href="#" onclick="javascript:OnCriteria(@(page - 1), false);">Previous</a>
    }
    &nbsp;@ViewData["page"]
    of
    @total
    pages&nbsp;
    @if (page < total)
    {
        <a href="#" onclick="javascript:OnCriteria(@(page + 1), false);">Next</a>
    }
</div>
Ở 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:
@model IEnumerable<AjaxPaging.Models.Person>
@{
    ViewBag.Title = "Index";
}
<h2>
    Person List</h2>
<div id="PersonContainer">
    @Html.Partial("_PersonList", Model)
</div>
<script type="text/javascript">
    function OnCriteria(page, includeNewCriteria) {
        
        var crit;
        
        if (includeNewCriteria) {
            crit = ($('#criteria'))[0].value;
        } else {
            crit = ($('#lastedCriteria'))[0].value;
        }

        $.ajax(
          {
              type: "GET",
              url: "/Home/GetPersons?criteria=" + crit + "&page=" + page,
        
              success: function (result) {
                  $("#PersonContainer").html(result.toString());
              },

              error: function () {
                  alert("Searching failed!");
              }
          });
    }
</script> 
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.)
http://d.jou.vn
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.