Thứ ba, ngày 21 tháng 11 năm 2017

Phân trang bằng AJAX và jquery.template plugin mvc3

Ngày đăng: 2/10/2012, 11:10:49PM | Lượt xem: 3,095
Hot!

 bài viết này vẫn tiếp tục một chủ đề rất cũ nhưng theo một cách khác hơn với các cách thông thường, đó là nhận dữ liệu JSON từ server và phân trang ở client bằng JavaScipt.

C ách làm của chúng ta như sau,  chúng ta có một trang trắng, khi tải trang đó về client, mã javascript được gọi đễ lấy dữ liệu về, sau đó chúng ta dùng mã javascript để hiển thị dữ liệu được lấy về và tạo các liên kết để phân trang. Cách làm này giúp chúng ta tiết kiệm được nhiều băng thông do mỗi lần chúng ta chuyển trang, chỉ có dữ liệu JSON được lấy về chứ không phải là cả trang web. Nếu bạn thích cách phân trang Ajax kiểu truyền thống, bạn có thể tham khảo bài viết  Phân trang và tìm kiếm với Ajax bằng cách sử dụng jQuery

 
Chúng  ta sẽ xây dựng một ví dụ nhằm lấy danh sách các ghi chú ở CSDL về và phân trang để giảm lưu lượng tải về cùng một lần. Mỗi trang như vậy có 10 ghi chú.
 
Đầu tiên bạn hãy mở Visual Studio và tạo một ứng dụng ASP.NET MVC 3 với tên gọi là JQueryTemplateEx. Sau đó bạn hãy tạo một Controller có tên là NoteController. Note Controller này sẽ có một action là Index(). Action Index không trả về bất kỳ dữ liệu nào, nó chỉ trả về một trang HTML trống.
namespace JQueryTemplateEx.Controllers
{
    public class NoteController : Controller
    {
        //
        // GET: /Note/
 
        public ActionResult Index()
        {
            return View();
        }
    }
}
 
Bạn cần quản lý các ghi chú, do đó bạn cần một class Note để lưu trữ thông tin ghi chú:
 
namespace JQueryTemplateEx.Models
{
    public class Note
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Content { get; set; }
    }
}
 
Để giả lập một cho một Repository chúng ta sẽ tạo lớp NoteRepository trong đó có thuộc tính Notes lưu trữ 100 Notes chúng ta tạo ra và phương thức GetNotes trả về kết quả là danh sách các ghi chú lấy theo tham số là pageId ( trang thứ mấy) và pageSize (kích thước trang). Kết quả trả về của lớp GetNotes là một đối tượng PageInfo<Note>, lớp PageInfo được cài đặt như sau:
 
namespace JQueryTemplateEx.Models
{
    public class PagingInfo<T>
    {
        public int PageId { get; set; }
        public int ItemCount { get; set; }
        public IList<T> Items { get; set; }
        public int PageSize { get; set; }
    }
}
Các bạn nào còn thấy lạ lẫm với <T> thì tìm hiểu về .NET Generics nhé.
 
Toàn bộ lớp Note Repository được cài đặt như sau:
namespace JQueryTemplateEx.Models
{
    public class NoteRepository
    {
        private static readonly IList<Note> Notes = new List<Note>(); 
 
        static NoteRepository()
        {
            for (var i = 0; i < 100; i++)
            {
                var note = new Note() {Id = i, Title = "Note " + i, Content = "Note content " + i};
                Notes.Add(note);
            }
        }
        public PagingInfo<Note> GetNotes(int pageId, int pageSize)
        {
            var itemCount = Notes.Count;
            var items = (from n in Notes orderby n.Id select n)
                .Skip((pageId - 1)*pageSize).Take(pageSize).ToList();
 
            var result = new PagingInfo<Note>()
                             {
                                 ItemCount = itemCount,
                                 Items = items,
                                 PageId = pageId,
                                 PageSize = pageSize
                             };
 
            return result;
        }
 
    }
}
 
 
Như vậy chúng ta đã NoteRepository để phục vụ cho các tác vụ của NoteController. Chúng ta cần xem qua view Index.cshtml tương ứng với action Index của NoteController:
 
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Note Management</title>
    <style type="text/css">
        td
        {
            border-top: solid 1px darkgreen;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
</head>
<body>
    <h2>
        Note management</h2>
    <div>
        <table>
            <thead>
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        Title
                    </th>
                    <th>
                        Content
                    </th>
                    <th>
                        Tasks
                    </th>
                </tr>
            </thead>
            <tbody id="noteContainer">
            </tbody>
        </table>
    </div>
    <div id="pagingContainer">
    </div>
</body>
</html>
 
Trang HTML không có gì đặc biệt ngoại trừ một <table> được sử dụng để hiển thị danh sách các ghi chú, và nhìn vào code thì bạn có thể đoán được, các ghi chú sẽ được lưu trong thẻ <tbody> có id là “noteContainer” và các link phân trang sẽ được lưu trong thẻ <div> có id là “pagingContainer”.
 
Để hiện thực hóa được việc lấy dữ liệu JSON là các ghi chú từ server về , chúng ta cần cài đặt phương thức GetNotes của NoteController với tham số đầu vào là pageId và pageSize và kết quả trả về là chuỗi JSON chứa thông tin trang và danh sách các ghi chú thuộc trang. Phương thức GetNotes được cài đặt như sau:
 
[HttpPost]
        public JsonResult GetNotes(int pageId, int pageSize)
        {
            var result = _noteRepository.GetNotes(pageId, pageSize);
            return Json(result);
        }
 
        public NoteController()
        {
            _noteRepository = new NoteRepository();
        }
 
        private readonly NoteRepository _noteRepository;
 
 
Action GetNotes trả về kết quả là đối tượng thuộc lớp JsonResult, và bạn cần dùng phương thức Json() của Controller để kết xuất đối tượng PagingInfo<Note> về dữ liệu kiểu Json để trả về cho Client.
 
Trở lại với view có tên là Index, chúng ta cần khai báo các thư viện chúng ta cần sử dụng gồm:
 
jQuery: đã có sẵn trong project
json2: nhằm chuyển các đối tượng trong JavaScript thành dữ liệu json (Tham khảo: https://github.com/douglascrockford/JSON-js)
jQuery.template()
Hướng dẫn sử dụng có ở: http://api.jquery.com/jQuery.template/
Khai báo sử dụng các thư viện JavaScript được khai báo ở header của Index.cshtml như sau:
 
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
    <script src="../../Scripts/json2.js" type="text/javascript"></script>
 
 
Sau khi đã tham chiếu đến các thư viện như trên, chúng ta cần phải cài đặt phương thức GetNotes bằng JavaScript nhằm thức hiện các việc:
 
Triệu gọi action GetNotes của NoteController bằng cách truyền lên tham số pageId và pageSize
Chờ đợi và nhận dữ liệu trả về, và chuyển nó từ json sang đối tượng javascript
Sau đó điền các ghi chú vào thẻ <tbody> có id là “noteContainer”
Ở đây chúng ta sử dụng jQuery template để định nghĩa template và kết hợp với dữ liệu trả về, chúng ta sẽ sinh ra các dòng chứa dữ liệu về ghi chú và điền vào thẻ <tbody>
Tiếp theo là sinh ra các liên kết giúp chuyển trang (ví dụ như trang trước, trang cuối…)
Kết quả JSON mà chúng ta nhận về có dạng:
 
Rõ ràng lấy dữ liệu về như thế này sẽ giúp chúng ta giảm bớt băng thông sử dụng và nó cũng đồng nghĩa với việc giúp cho ứng dụng chạy nhanh hơn.
 
Chúng ta cùng xem cách jquery templates thực hiện:
 
var result = $.parseJSON(jsonResult);
                    //Show Note
                    var markup = "<tr><td>${Id}</td><td>${Title}</td><td>${Content}</td><td><a href='#'>Edit</a>&nbsp;<a href='#'>Delete</a></td></tr>";
                    $.template("noteTemplate", markup);
                    $("#noteContainer").empty();
                    $.tmpl("noteTemplate", result.Items).appendTo("#noteContainer");
 
 
Đầu tiên chúng ta định nghĩa chuỗi mẫu và lưu bằng biến markup. Tiếp theo chúng ta cần gọi phương thức $.template() để lưu lại template có tên là noteTemplate. Và sau đó chúng ta sẽ nối dữ liệu Json được gởi về với template và sau đó điền vào <tbody> có id là “noteContainer”. Rõ ràng việc sử dụng template sẽ giúp chúng ta dễ dàng hơn khi thay đổi giao diện của trang web, đặc biệt khi là khi chúng ta để template ra khỏi code logic.
 
Tiếp theo chúng ta sẽ sinh các link và điền nó vào thẻ <div> có id là pagingContainer:
var temp = (result.ItemCount % result.PageSize) > 0 ? 1 : 0;
                    var pageCount = (result.ItemCount - result.ItemCount % result.PageSize) / result.PageSize + temp;
 
                    var firstCommand = result.PageId > 1 ? 'onclick="GetNotes(1, ' + result.PageSize + ');"' : '';
                    var prevCommand = result.PageId > 1 ? 'onclick="GetNotes(' + (result.PageId - 1) + ', ' + result.PageSize + ');"' : '';
                    var lastCommand = result.PageId < pageCount ? 'onclick="GetNotes(' + pageCount + ', ' + result.PageSize + ');"' : '';
                    var nextCommand = result.PageId < pageCount ? 'onclick="GetNotes(' + (result.PageId + 1) + ', ' + result.PageSize + ');"' : '';
 
                    $('#pagingContainer').empty();
                    $('#pagingContainer').append('<a href="#" ' + firstCommand + '>First</a> | ');
                    $('#pagingContainer').append('<a href="#" ' + prevCommand + '>Prev</a> | ');
                    $('#pagingContainer').append('<a href="#" ' + nextCommand + '>Next</a> | ');
                    $('#pagingContainer').append('<a href="#" ' + lastCommand + '>Last</a> ');
 
 
Toàn bộ mã cài đặt của phương thức javascript GetNotes và lời triệu gọi GetNotes để lấy về trang dữ liệu đầu tiên:
$(document).ready(function () {
            GetNotes(1, 10);
        });
        function GetNotes(pageId, pageSize) {
            var params = {
                "pageId": pageId,
                "pageSize": pageSize
            };
            var jsonParams = JSON.stringify(params);
            $.ajax({
                type: "POST",
                data: jsonParams,
                url: '/Note/GetNotes',
                dataType: "html",
                contentType: "application/json",
                success: function (jsonResult) {
                    var result = $.parseJSON(jsonResult);
                    //Show Note
                    var markup = "<tr><td>${Id}</td><td>${Title}</td><td>${Content}</td><td><a href='#'>Edit</a>&nbsp;<a href='#'>Delete</a></td></tr>";
                    $.template("noteTemplate", markup);
                    $("#noteContainer").empty();
                    $.tmpl("noteTemplate", result.Items).appendTo("#noteContainer");
                    //Show Paging
                    var temp = (result.ItemCount % result.PageSize) > 0 ? 1 : 0;
                    var pageCount = (result.ItemCount - result.ItemCount % result.PageSize) / result.PageSize + temp;
 
                    var firstCommand = result.PageId > 1 ? 'onclick="GetNotes(1, ' + result.PageSize + ');"' : '';
                    var prevCommand = result.PageId > 1 ? 'onclick="GetNotes(' + (result.PageId - 1) + ', ' + result.PageSize + ');"' : '';
                    var lastCommand = result.PageId < pageCount ? 'onclick="GetNotes(' + pageCount + ', ' + result.PageSize + ');"' : '';
                    var nextCommand = result.PageId < pageCount ? 'onclick="GetNotes(' + (result.PageId + 1) + ', ' + result.PageSize + ');"' : '';
 
                    $('#pagingContainer').empty();
                    $('#pagingContainer').append('<a href="#" ' + firstCommand + '>First</a> | ');
                    $('#pagingContainer').append('<a href="#" ' + prevCommand + '>Prev</a> | ');
                    $('#pagingContainer').append('<a href="#" ' + nextCommand + '>Next</a> | ');
                    $('#pagingContainer').append('<a href="#" ' + lastCommand + '>Last</a> ');
 
                },
                error: function () {
                    alert("Cann't get authors!");
                }
            });
        };
 
 
Kết quả cuối cùng khi khởi chạy ứng dụng:
Và bạn hãy nhìn kích thước tải về cho mỗi request, bạn sẽ cảm thấy rất hài lòng vì mình đã sử dụng Ajax và JSON để tăng tốc cho ứng dụng:
 
Mỗi lượt lấy về một trang các ghi chú thì chỉ hao tổn 612 byte đường truyền, so với việc lấy về một trang Index (chưa có dữ liệu) không thôi cũng đã mất 3.7KB. Tuy nhiên tôi cũng có lưu ý nhỏ, đó là chỉ nên áp dụng ajax đối với thông tin mà bạn không cần phải áp dụng SEO, ví dụ như trong phần quản trị, các phần tương tác của người dùng. Nếu bạn sử dụng AJAX toàn bộ thì có lẽ nó sẽ không hợp lắm với SEO.
 
Trong tương lai, các ứng dụng web sẽ có nhiều thao tác được thực hiện bằng javascript hơn, điều này sẽ giúp giảm bớt sự hao tổn CPU của server khi render giao diện cho các trang web và nhường phần việc đó cho trình khách.
 
Như vậy, chúng ta đã làm được cách phân trang bằng AJAX, JSON và cài đặt một phần mã logic bằng javascript.  Chúc các bạn áp dụng thành công vào ứng dụng của mình!
Source tham khảo 
http://www.mediafire.com/?sgqk17j9zp88gqe

 

theo 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.