Thủ thuật

Cấp bậc tác giả:

DOTNET

ASP.NET Ajax Grid và Pager

Được viết bởi QuangIT ngày 06/02/2013 lúc 08:09 PM
Tìm hiểu làm thế nào để tạo ra một tùy chỉnh Ajax Grid và Pager với nền tảng của Microsoft ASP.NET AJAX.
  • 0
  • 11468
Tải tệp tin: Click ở đây

ASP.NET Ajax Grid và Pager

Mục lục
1. Giới thiệu
2. Điều kiện tiên quyết
3. Nền tảng
4. AJAX Grid
5. Data Binding
6. Style
7. Column Collection
8. Sắp xếp
9. Selecting/Deleting Rows
10. RowDataBound
11. Paging
12. Kéo và thả
13. Kết luận

Tên bài viết: Hướng dẫn kết hợp ASP.NET Ajax Grid và Pager
Tác giả: Quang.IT
Cấp độ bài viết: Không dành cho người mới bắt đầu

Tìm hiểu làm thế nào để tạo ra một tùy chỉnh Ajax Grid và Pager với nền tảng của Microsoft ASP.NET AJAX.
1. Giới thiệu
Bài viết này sẽ cho bạn thấy làm thế nào để tạo ra một AJAX Grid và Pager.
Các tính năng Control (s) Cung cấp:
• Có khả năng để ràng buộc vào bất kỳ cuộc gọi dịch vụ web trả về mảng.
• GridView như API hiển thị các mặt hàng.
• Có thể để autogenerate cột dựa trên các nguồn dữ liệu.
• Hỗ trợ Sắp xếp và Paging riêng của mình.
• Hỗ trợ kéo cột và thả.
• Tương thích với tất cả các trình duyệt chính bao gồm IE, Firefox, Opera và Safari.
2. Điều kiện tiên quyết
Đây không phải là hướng dẫn dành cho người bắt đầu. Nếu bạn là người mới học ASP.NET AJAX hoặc không quen thuộc với mô hình phát triển Centric-Client hay Server-Centric, tôi khuyên bạn truy cập http://ajax.asp.net . Để chạy các ví dụ bạn phải có ít nhất:
• Visual Studio 2010 hoặc Visual Web Developer.
• Phiên bản mới nhất (v1.0) của ASP.NET AJAX.
• SQL Server 2008 (Ít nhất Express Edition) để chạy các mẫu.
• Cơ sở dữ liệu Northwind (Bạn có thể tải về từ nguyên DNGAZ).
3. Nền tảng
ASP.NET AJAX là nền tảng tuyệt vời để phát triển các ứng dụng web người dùng giàu kinh nghiệm. Phần tuyệt vời nhất là nó thay thế làm mới trang mô hình postback truyền thống. Chúng ta có thể dễ dàng thêm một UpdatePanel (Một phần của mô hình phát triển Centric Server) trong phần cập nhật của trang để loại bỏ các postback trang thường xuyên. Nhưng vấn đề với UpdatePanel là nó không chỉ trả về dữ liệu được cập nhật nhưng cũng trả về các thẻ HTML của phần cập nhật. Đây không phải là một vấn đề nếu bạn đang phát triển các ứng dụng kích thước nhỏ hoặc giữa hiệu suất và băng thông mạng không phải là một mối quan tâm. Tuy nhiên nếu bạn đang phát triển một hệ thống lớn, nơi hiệu suất và các vấn đề băng thông mạng, thì chắc chắn bạn chỉ muốn gửi các dữ liệu được cập nhật mà không có các thẻ HTML không cần thiết.
Khi phát triển ứng dụng cơ sở dữ liệu, đó là một yêu cầu phổ biến để hiển thị dữ liệu trong một định dạng bảng phân loại và phân trang. ASP.NET có hai điều khiển lớp đầu tiên cho mục đích này, DataGrid và GridView . Nhưng vấn đề với các điều khiển đó là không có mô hình đối tượng ở phía client, mà chúng ta có thể sử dụng với JavaScript . Không có cách nào khác chúng ta có thể gọi một phương thức dịch vụ Web hoặc bên trong Server và kết nối kết quả với nó ở phía client. Dev thường phải viết reparative mã DHTML để làm dữ liệu dạng bảng.
4. AJAX Grid
AJAX Grid giải quyết vấn đề trên. Dev có thể dễ dàng liên kết với kết quả của dịch vụ web hoặc phương thức gọi Server Side ở phía Client. Nó cũng cho thấy API tương tự như DataGrid / GridView phía client rằng hầu hết các Dev ASP.NET đã quen thuộc.
5. Data Binding
Khi dữ liệu ràng buộc, tôi thiết lập DataSource của điều khiển đến mục tiêu và gọi phương thức DataBind() . Các bước tương tự được yêu cầu AJAX Grid. Những dòng sau đây cho thấy gọi hồ sơ từ cơ sở dữ liệu Northwind.

Mã 1: JavaScript
  1. <script type="text/javascript">
  2. function pageLoad()
  3. {
  4.   var grid = $find('grid'); // Get the reference of the Client Side Component
  5.   DataService.GetAllSupplier
  6.   (
  7.     function(suppliers)
  8.     {
  9.       grid.set_dataSource(suppliers);
  10.       grid.dataBind();
  11.     }
  12.   );
  13. }
Mã 2: AJAX
  1. <asp:ScriptManager ID="TheScriptManager" runat="server">
  2.   <Services>
  3.     <asp:ServiceReference Path="~/DataService.asmx" />
  4.   </Services>
  5. </asp:ScriptManager>
  6. <ajax:Grid ID="grid1" runat="server"></ajax:Grid>
Hình 1: Đầu ra
hinh01.jpg

Đây là một trang đơn giản, sử dụng một ScriptManager với một tham chiếu WebService và một AJAX Grid. Trong sự kiện pageLoad() (Một sự kiện đặc biệt được khuyến khích thư viện AJAX ASP.NET mỗi khi trang web được tải), để nhận được các tham chiếu của AJAX Grid bằng cách sử dụng phương thức $find (Một phương thức ngắn gọn để tìm phần Client Side, xin vui lòng không nhầm lẫn giữa phần Client Side với yếu tố DOM regular, để có được một yếu tố tham chiếu DOM sử dụng $get) câu lệnh và sau đó chúng ta thiết lập các nguồn dữ liệu gọi các dịch vụ web trả về và cuối cùng gọi phương thức DataBind(). Như bạn có thể thấy, đầu ra giống như chúng ta sẽ thiết lập DataGrid / GridView với các thiết lập mặc định.
6. Style
Ví dụ trên cho thấy các dữ liệu trong style vani đơn giản, chắc chắn chúng ta không muốn hiển thị dữ liệu theo cách này chứ không phải chúng ta muốn thêm một số thuộc tính style. AJAX Grid tương tự như vậy cho thấy nhiều CssClass , HeaderCssClass , RowCssClass , AlternatingRowCssClass và SelectedRowCssClass để làm cùng một style như điều khiển DataGid / GridView . Một khi ta áp dụng các style đầu ra ví dụ ở trên trông giống như sau.
Hình 2: Kết quả với Styles
hinh02.jpg
Supplier.aspx của mẫu đính kèm có mã nguồn đầy đủ của hai ví dụ trên.
7. Column Collection
Khi hiển thị dữ liệu dạng bảng, có thể kiểm soát nhiều hơn như ẩn cột, hiển thị văn bản tiêu đề khác nhau, liên kết, cho phép phân loại, thiết lập chiều rộng cột v…v AJAX Grid có thể dễ dàng xác định các tập hợp cột trong mô hình khai báo như sau :
Mã 3: AJAX Grid với Cột
  1. <ajax:Grid ID="grid" runat="server" CssClass="grid" HeaderCssClass="gridHeader"
  2. RowCssClass="gridRow" AlternatingRowCssClass="gridAltRow" SortColumn="CompanyName"
  3. SortOrderAscendingImage="Images/up.gif" SortOrderDescendingImage="Images/dn.gif">
  4.     <Columns>
  5.         <ajax:GridColumn DataField="CompanyName" HeaderText="Company" Sortable="True" 
  6.           Nowrap="True"/>
  7.         <ajax:GridColumn DataField="ContactTitle" HeaderText="Title" Sortable="True"/>
  8.         <ajax:GridColumn DataField="ContactName" HeaderText="Contact" Sortable="True"/>
  9.         <ajax:GridColumn DataField="Address" HeaderText="Address" Sortable="True"/>
  10.         <ajax:GridColumn DataField="City" HeaderText="City" Sortable="True" />
  11.         <ajax:GridColumn DataField="PostalCode" HeaderText="Postal Code" Sortable="True" 
  12.           Nowrap="True"/>
  13.         <ajax:GridColumn DataField="Country" HeaderText="Country" Sortable="True" />
  14.         <ajax:GridColumn DataField="Phone" HeaderText="Phone" Sortable="True"/>
  15.     </Columns>
  16. </ajax:Grid>

AJAX Grid Column chứa các thuộc tính quan trọng sau đây:
• HeaderText : Tương tự như trong DataGrid / GridView .
• DataField : Tương tự như trong DataGrid / GridView .
• Sortable : Nếu đúng, tiêu đề văn bản sẽ được hiển thị như là liên kết thay vì văn bản.
• SortField : Phải được quy định nếu SortField là khác nhau từ DataField .
• FormatString : Tương tự như trong DataGrid / GridView .
8. Sắp xếp
AJAX Grid cũng hỗ trợ sắp xếp trong cùng một cách như DataGrid / GridView. Khi nhấp vào cột tiêu đề nó Sắp xếp tăng. Để hiển thị thứ tự sắp xếp hiện tại, chúng ta phải thiết lập thuộc tính SortOrderAscendingImage và SortOrderDescendingImage của AJAX Grid. Để có được cột và thứ tự sắp xếp hiện tại, chúng ta có thể kiểm tra thuộc tính SortColumn và sortOrder. Sau đây cho thấy làm thế nào để thêm hỗ trợ sắp xếp trong AJAX Grid trong đó cho thấy bảng cơ sở dữ liệu Northwind từ phía Client.
Mã 4: AJAX Grid với Cột
  1. function pageLoad()
  2. {
  3.   // Getting the reference of the Client Components and 
  4.   // attaching the event handlers
  5.   _grid = $find('grid');
  6.   _grid.add_sort(sorted);
  7. }            

  9. function sorted(sender, e)
  10. {
  11.   // Set the SortColum and SortOrder of the Grid so 
  12.   // that it can properly render current sort column and 
  13.   // and the associated image

  15.   _grid.set_sortColumn(e.get_sortColumn());
  16.   _grid.set_sortOrder(e.get_sortOrder());

  18.   // Here we can call the WebService with the new SortColumn and SortOrder
  19. }
Hình 3: Sắp xếp AJAX Grid
hinh03.jpg
Customer.aspx của mẫu đính kèm có mã nguồn đầy đủ của ví dụ phân loại.
9. Selecting/Deleting Rows 
Để hiển thị liên kết Chọn và Xóa như trong DataGrid / GridView, thiết lập thuộc tính ShowSelectLink và ShowDeleteLink là true. Khi một hàng được chọn, nó sẽ gọi sự kiện SelectedIndexChange . Điều tương tự cũng xảy ra khi nhấp vào liên kết xóa, nó gọi sự kiện RowDelete. Cả hai sự kiện này qua CommandName và CommandArgument nhưng DataKeyName phải được thiết lập. Ví dụ, nếu chúng ta đặt DataKeyName khóa chính của một bảng trong những sự kiện nó sẽ có giá trị khóa chính như CommandArgument . Bạn cũng có thể chọn một hàng bằng cách sử dụng thuộc tính SelectedIndex hoặc phương thức Select(). Để bỏ chọn một hàng sử dụng phương thức ResetSelection().
10. Sự kiện RowDataBound
Trong sự kiện RowDataBound, chúng ta có thể làm một số xử lý đặc biệt trước khi dữ liệu bị ràng buộc. Ví dụ như khi hiển thị các sản phẩm của bảng cơ sở dữ liệu Northwind chúng ta có thể thay đổi màu nền thành đỏ trong Unit in Stock nếu nhỏ hơn 10. Một ví dụ khác là dịch vụ Web trả về các sản phẩm của CategoryID nhưng chúng ta muốn để hiển thị tên danh mục thay thế đó CategoryID . Những thay đổi có thể được thực hiện trong sự kiện này. Sự kiện này qua hàng ràng buộc và mục dữ liệu hiện tại mà nó là ràng buộc. Sau đây cho thấy làm thế nào để ràng buộc sự kiện này.
Mã 5: RowDataBound
  1. function pageLoad()
  2. {
  3.   // Getting the reference of the Client Components 
  4.   // and attaching the event handlers
  5.   _grid = $find('grid');
  6.   _grid.add_rowDataBound(rowDataBound);
  7. }

  9. function rowDataBound(sender, e)
  10. {
  11.   var product = e.get_dataItem();

  13.   var tdCategory = e.get_tableRow().cells[2];
  14.   var categoryName = getCategoryName(product.CategoryID);
  15.   tdCategory.innerHTML = categoryName;

  17.   var tdUnitsInStock = e.get_tableRow().cells[5]; 
  18.   if (product.UnitsInStock < 10) 
  19.   {
  20.     tdUnitsInStock.style.backgroundColor = '#ff0000';
  21.   }
  22. }
Hình 4: RowDataBound
hinh04.jpg
Product.aspx của mẫu đính kèm có mã nguồn đầy đủ của RowDataBound ví dụ sự kiện.
11. Paging
Khi làm việc với các bảng lớn, chúng ta thường được yêu cầu sử dụng phân trang. Mặc dù DataGrid / GridView đã hỗ trợ cho phân trang, nhưng không phù hợp. Hầu hết các Dev thường từ chối sử dụng các chức năng built-in và sử dụng logic riêng thường mất một chỉ số bắt đầu, kích thước trang và các thông số bổ sung khác và lần lượt chỉ trả về các bản ghi paged với tổng số hồ sơ. Các mẫu DataService.asmx chứa một số phương thức ( GetCustomerList , GetProductList ) có chứa các tùy chỉnh phân trang logic. Thông thường, một Pager cho thấy số trang liên kết trang next/previous, first/last. Sau đây cho thấy làm thế nào để thực hiện điều khiển pager.
Mã 6: AJAX Grid Pager JavaScript
  1. function pageLoad()
  2. {
  3.   // Getting the reference of the Client Components 
  4.   // and attaching the event handlers
  6.   _grid = $find('grid');
  7.   _grid.add_sort(sorted);

  9.   _pager = $find('pager');
  10.   _pager.add_pageChange(pageChanged);

  12.   //Getting the reference of the DOM elements
  13.   _message = $get('message');

  15.   loadCustomers();
  16. }

  18. function sorted(sender, e)
  19. {
  20.   // Set the SortColum and SortOrder of the Grid so that 
  21.   // it can properly render current sort column
  22.   // and the associated image

  24.   _grid.set_sortColumn(e.get_sortColumn());
  25.   _grid.set_sortOrder(e.get_sortOrder());

  27.   // need to reset the current page as sorting has been changed
  28.   _pager.set_currentPage(1);

  30.   loadCustomers();
  31. }

  33. function pageChanged(sender, e)
  34. {
  35.   // Set the new page as current page
  36.   _pager.set_currentPage(e.get_newPage()); 
  37.   loadCustomers();
  38. }

  40. function loadCustomers()
  41. {
  42.   // Calculating the startindex 
  43.   var startIndex = ((_pager.get_currentPage()-1) * _pager.get_rowPerPage());

  45.   // Need to convert the sortoder which our WS can understand
  46.   // This needs to be on one line. Its been wrapped to display better in this article.
  47.   var sortOrder = (_grid.get_sortOrder() == Ajax.Controls.GridSortOrder.Descending) 
  48.     ? 'DESC' : 'ASC';

  50.   _message.innerHTML = "<div>";
  51.   _message.innerHTML += "<img alt='' src='Images/indicator.gif' />";
  52.   _message.innerHTML += "Loading Customers...</div>";
  53.   _message.style.display = "";

  55.   DataService.GetCustomerList
  56.   (    
  57.     startIndex,
  58.     _pager.get_rowPerPage(),
  59.     _grid.get_sortColumn(),
  60.     sortOrder,
  61.     function(pagedResult)
  62.     {
  63.       var total = 0;
  64.       var customers = null;

  66.       if (pagedResult != null)
  67.       {
  68.         total = pagedResult.Total;
  69.         customers = pagedResult.Rows;
  70.       }

  72.       _grid.set_dataSource(customers);
  73.       _grid.dataBind();

  75.       _pager.set_rowCount(total);

  77.       _message.innerHTML = '';
  78.       _message.style.display = 'none';
  79.     },
  80.     function(exception)
  81.     {
  82.       _message.innerHTML = '' + exception.get_message() + ''; 
  83.     }
  84.   );
  85. }
 Mã 7: AJAX Grid Pager ASPX
  1. <form id="form1" runat="server">
  2.   <asp:ScriptManager ID="TheScriptManager" runat="server">
  3.   <Services>
  4.     <asp:ServiceReference Path="~/DataService.asmx" />
  5.   </Services>
  6.   </asp:ScriptManager>
  7.   <table border="0" cellpadding="1" cellspacing="0" style="width:100%">
  8.   <tbody>
  9.     <tr>
  10.     <td style="text-align:left">
  11.       <ajax:Grid ID="grid" runat="server" 
  12.       Border="0" CellPadding="5" CellSpacing="0" CssClass="grid"
  13.       HeaderCssClass="gridHeader" RowCssClass="gridRow" AlternatingRowCssClass="gridAltRow"
  14.       SelectedRowCssClass="gridSelectedRow" SortColumn="CompanyName"
  15.       SortOrderAscendingImage="Images/up.gif" SortOrderDescendingImage="Images/dn.gif">
  16.       <Columns>
  17.         <ajax:GridColumn 
  18.           DataField="CompanyName" 
  19.           HeaderText="Company" 
  20.           Sortable="True" Nowrap="True"/>
  21.         <ajax:GridColumn 
  22.           DataField="ContactTitle" 
  23.           HeaderText="Title" Sortable="True"/>
  24.         <ajax:GridColumn 
  25.           DataField="ContactName" 
  26.           HeaderText="Contact" 
  27.           Sortable="True"/>
  28.         <ajax:GridColumn 
  29.           DataField="Phone" 
  30.           HeaderText="Phone" 
  31.           Sortable="True"/>
  32.       </Columns>
  33.       </ajax:Grid>
  34.     </td>
  35.     </tr>
  36.     <tr>
  37.     <td style="text-align:right">
  38.       <ajax:Pager ID="pager" runat="server" CssClass="pager"
  39.       CurrentPageCssClass="pagerCurrentPage" OtherPageCssClass="pagerOtherPage"
  40.       ShowInfo="True" InfoCssClass="pagerInfo"></ajax:Pager>
  41.     </td>
  42.     </tr>
  43.     <tr>
  44.       <td style="text-align:left"><div id="message" style="display:none"></div></td>
  45.     </tr>
  46.   </tbody>
  47.   </table>
  48. </form>
Hình 5: AJAX Grid Pager
hinh05.jpg
Dưới đây là một số thuộc tính quan trọng của AJAX Pager:
  • ShowInfo : Khi true , hiển thị thông tin như Trang 1 của 10. Giá trị mặc định là false .
  • ShowFirstAndLast : Khi true , hiển thị liên kết đầu tiên và cuối cùng. Giá trị mặc định là true .
  • FirstText : văn bản sẽ được hiển thị như là liên kết cho trang đầu tiên. Giá trị mặc định là <<
  • LastText : văn bản sẽ được hiển thị như là liên kết cho trang cuối cùng. Giá trị mặc định là >>
  • ShowPreviousAndNext : Khi true , hiển thị liên kết Previous và Next. Giá trị mặc định là false .
  • ShowNumbers : Khi true , hiển thị số trang như liên kết. Giá trị mặc định là true .
  • RowPerPage : Số hàng mỗi trang chứa. Giá trị mặc định là 10.
  • CurrentPage : currentpage pager được hiển thị.
  • HideOnSinglePage : kiểm soát không được trả lại nếu nó sáng lập chỉ có một trang.
  • ShowTip : Khi true , một tooltip sẽ xuất hiện lơ lửng trên bất kỳ các liên kết.
  • InfoCssClass : thuộc tính Styling đối với phần thông tin.
  • CurrentPageCssClass : thuộc tính Styling cho trang hiện tại.
  • OtherPageCssClass : thuộc tính Styling cho các trang khác.
Pager AJAX chứa chỉ một sự kiện PageChange rằng các Dev phải đăng ký để tải dữ liệu trang mới. Tôi đã loại trừ Pager từ Grid để nó có thể được sử dụng trong việc điều khiển khác hiển thị dữ liệu dạng bảng.
Cả hai Customer.aspx và Product.aspx của mẫu đính kèm có mã nguồn đầy đủ của ví dụ Paging.
12. Kéo và thả
Kéo và thả là một phần thiết yếu của bất kỳ ứng dụng web phong phú và do đó nó đã trở thành một tính năng phổ biến cho các ứng dụng Web 2.0. Ajax Grid đã được xây dựng trong hỗ trợ cho kéo cột và thả. Chỉ cần thiết lập thuộc tính AllowDragAndDrop  cho bất kỳ cột để true và nó sẽ được kéo và thả. Hình dưới đây cho thấy phiên bản triển khai thực hiện của một kéo và thả trong bảng cơ sở dữ liệu Northwind phía client:
Hình 6: Kéo và thả AJAX Grid
hinh06.jpg
Ajax Grid tăng ColumnDragStarted khi kéo cột bắt đầu và ColumnDropped khi thả cột. Các mã sau đây cho thấy làm thế nào để theo dõi các cột và kéo và thả trong sự kiện này.
Mã 8: Kéo và thả AJAX Grid
  1. function pageLoad()
  2. {
  3.   _grid = $find('grid');
  4.   _grid.add_columnDragStart(columnDragStart);
  5.   _grid.add_columnDropped(columnDropped);
  6. }

  8. function columnDragStart(sender, e)
  9. {
  10.   alert(e.get_column().headerText); // the event passes the column reference
  11. }

  13. function columnDropped(sender, e)
  14. {
  15.   // this event also passes the column reference with old and new index
  16.   alert(e.get_column().headerText);
  17.   alert(e.get_oldIndex());
  18.   alert(e.get_newIndex());
  19. }               

13. Kết luận
Microsoft ASP.NET AJAX là nền tảng để phát triển các ứng dụng web nhưng hiện tại nó đang thiếu các thành phần Client Side đặc biệt là làm việc với dữ liệu. Mặc dù bạn sẽ tìm thấy 30+ điều khiển trong ASP.NET Ajax ToolKit nhưng hầu hết trong số chúng chủ yếu là extender, mà mở rộng phía máy chủ hiện có ASP.NET Controls. Chắc chắn chúng ta có thể phát triển các loại điều khiển để làm phong phú thêm.

Nguồn bài viết: Dngaz.com

Bài viết tương tự

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML

Xem tất cả

Học Hệ thống Mạng

Xem tất cả
Đối tác:            

Thiết kế bởi DOTNET GROUP.  Hoàn thành giai đoạn I

©2023 DOTNET GROUP. All contents are copyright of their authors.