Sử dụng control Ext.Net GridPanel và phân trang với Entity Framework: "
Gần đây Ext.Net vừa chính thức cho ra đời version 1.0 cho cả Community và Pro, với nhiều tính năng và các fix bugs đã được cải thiện, cũng giống như tất cả các bộ thư viện control khác. Và cũng giống như ASP.NET GridView control, Ext.Net cũng cung cấp control dữ liệu (tabular) được đặt tên là GridPanel.
Trong bài viết này mình sẽ hướng dẫn bà con, các sử dụng Ext.Net GridPanel để binding data từ CSDL sử dụng Entity Framework và phân trang.
Yêu cầu trước tiên:
Download và cài đặt:
- Download version mới nhất của Ext.NET tại: http://www.ext.net/download
- Hướng dẫn cài đặt: lập trình ext.net với visual studio 2010
Tạo 1 website ASP.NET C# (VB.NET tùy ý) và kéo control GridPanel vào sau đó set các thuộc tính như:
Height='400'
Title='Customer List'
AutoExpandColumn='Address'
Định nghĩa Store (data source) cho GridPanel, ở đây mình sẽ kết nối với CSDL Northwind và lấy danh sách Customers lên:
<%@ Page Language='C#' AutoEventWireup='true' CodeFile='Default.aspx.cs' Inherits='_Default' %>
<%@ Register Assembly='Ext.Net' Namespace='Ext.Net' TagPrefix='ext' %>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Using Ext.Net GridPanel with Paging in Entity Framework</title>
</head>
<body>
<form id='form1' runat="server">
<div>
<ext:ResourceManager ID='ResourceManager1' runat='server' />
<ext:GridPanel ID='GridPanel1' runat='server' Height='400' Title='Customer List'
AutoExpandColumn="Address">
<Store>
<ext:Store ID='dsCustomers' runat='server' OnRefreshData='Store1_Refresh' RemoteSort="true">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="CustomerID">
<Fields>
<ext:RecordField Name='CustomerID' SortDir='ASC' />
<ext:RecordField Name='CompanyName' />
<ext:RecordField Name='ContactName' />
<ext:RecordField Name='Address' />
<ext:RecordField Name='City' />
<ext:RecordField Name='Phone' />
<ext:RecordField Name='Fax' />
<ext:RecordField Name='Region' />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name='start' Value='0' Mode='Raw' />
<ext:Parameter Name='limit' Value='15' Mode='Raw' />
<ext:Parameter Name='dir' Value='ASC' />
<ext:Parameter Name='sort' Value='CustomerID' />
</BaseParams>
<SortInfo Field='CustomerID' Direction='ASC' />
</ext:Store>
</Store>
<ColumnModel ID='ColumnModel1' runat="server">
<Columns>
<ext:Column ColumnID='CustomerID' DataIndex='CustomerID' Header="ID">
</ext:Column>
<ext:Column ColumnID='CompanyName' DataIndex='CompanyName' Header='Company Name'
Width="250">
</ext:Column>
<ext:Column ColumnID='ContactName' DataIndex='ContactName' Header='Contact Name'
Width="150">
</ext:Column>
<ext:Column ColumnID='Address' DataIndex='Address' Header='Address' Width="150">
</ext:Column>
<ext:Column ColumnID='City' DataIndex='City' Header="City">
</ext:Column>
<ext:Column ColumnID='Phone' DataIndex='Phone' Header="Phone">
</ext:Column>
<ext:Column ColumnID='Fax' DataIndex='Fax' Header="Fax">
</ext:Column>
<ext:Column ColumnID='Region' DataIndex='Region' Header="Region">
</ext:Column>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID='PagingToolbar1' runat='server' PageSize='15' />
</BottomBar>
</ext:GridPanel>
</div>
</form>
</body>
</html>
Giải thích:
Sự kiện OnRefreshData của Store xử lý mỗi lần data source của store được update (cách xử lý trong code behind).
Thuộc tính RemoteSort="true": Cho phép sắp xếp sử dụng server code.
IDProperty="CustomerID" của JsonReader: thiết lập trường khóa chính dùng trong mục đích insert, delete và update.
ext:Parameter : Các parameters được truyền về mỗi lần store được referesh.
ColumnModel: Định nghĩa các field được bind lên từ CSDL.
ext:PagingToolbar: Control phân trang build-in của Ext.Net.
......
C# code:
using System.Linq;
using Ext.Net;
using NorthwindModel;
public partial class _Default : System.Web.UI.Page
{
protected void Store1_Refresh(object sender, StoreRefreshDataEventArgs e)
{
int start = int.Parse(e.Parameters['start']);
int limit = int.Parse(e.Parameters['limit']);
string dir = e.Parameters['dir'];
string sort = e.Parameters['sort'];
using (NorthwindEntities entities = new NorthwindEntities())
{
var customers = entities.Customers.OrderBy(string.Concat('it.' + sort, ' ', dir));
e.Total = customers.ToList().Count;
dsCustomers.DataSource = customers.Skip(start).Take(limit).ToList();
dsCustomers.DataBind();
}
}
}
Press F5 và xem kết quả:
Note: Việc paging cho GridPanel cũng như các control support paging khác là rất quan trọng trong ứng dụng đòi hỏi sự khéo léo trong vấn đề tối ưu hóa tốc độ thực thi của ứng dụng, Ext.Net take care hầu hết các thiếu sót trong giao diện xây dựng sẳn của .NET, thế vấn đề còn lại của các bạn là feel, thì mới xây dựng được 1 ứng dụng chuyên nghiệp cho cả look and feel.
Hope this help!
ExtGirdDemo.rar (3.67 mb)
"
