与ASP.NET服务器端结合返回JSON数据实现ExtJS GridPanel客户端分页

   最近一直在研究ExtJS,准备用ExtJS做项目的时候郁闷了,网上搜索了半天和官方demo也没有发现如何结合ASP.NET做服务器端来现实ExtJS GridPanel 前台分页的相关资料和代码（PS:都只有PHP+MySql的。我哭!!!!），因项目需要,在苦痛挣扎了一天后,做出了一个DEMO （ASP.NET + SQL Server 2005） 。先放在网上，第一大家看下有什么地方需要优化没有，第二是避免其他ASP.NET程序员为网上苦苦搜索而找不到相关代码而郁闷。

 

  

   （最终效果图）

 

 

    第一步：为了使服务器端查询返回JSON数据，从网上找了个用C#写的JSONHelper类（在此感谢那位不知名的好人），以下是JsonHelper类全部代码。（JsonHelper.cs）

using System; using System.Collections; using System.Collections.Generic; using System.Text; using System.Web.Script.Serialization; ///

/// JSONHelper 的摘要说明 ///

public class JSONHelper { //对应JSON的singleInfo成员 public string singleInfo = string.Empty; protected string _error = string.Empty; protected bool _success = true; protected long _totalCount = 0; protected System.Collections.ArrayList arrData = new ArrayList(); protected System.Collections.ArrayList arrDataItem = new ArrayList(); public JSONHelper() { } public static string ToJSON(object obj) { JavaScriptSerializer serializer = new JavaScriptSerializer(); return serializer.Serialize(obj); } public static string ToJSON(object obj, int recursionDepth) { JavaScriptSerializer serializer = new JavaScriptSerializer(); serializer.RecursionLimit = recursionDepth; return serializer.Serialize(obj); } //对应于JSON的success成员 public bool success { get { return _success; } set { //如设置为true则清空error if (success) _error = string.Empty; _success = value; } } //对应于JSON的error成员 public string error { get { return _error; } set { //如设置error，则自动设置success为false if (value != "") _success = false; _error = value; } } public long totlalCount { get { return _totalCount; } set { _totalCount = value; } } //重置，每次新生成一个json对象时必须执行该方法 public void Reset() { _success = true; _error = string.Empty; singleInfo = string.Empty; arrData.Clear(); arrDataItem.Clear(); } public void AddItem(string name, string value) { arrData.Add("/"" + name + "/":" + "/"" + value + "/""); } public void ItemOk() { arrData.Add("
"); } //序列化JSON对象，得到返回的JSON代码 public override string ToString() { StringBuilder sb = new StringBuilder(); sb.Append("{"); sb.Append("totalCount:" + totlalCount.ToString() + ","); sb.Append("success:" + _success.ToString().ToLower() + ","); sb.Append("error:/"" + _error.Replace("/"", "///"") + "/","); sb.Append("singleInfo:/"" + singleInfo.Replace("/"", "///"") + "/","); sb.Append("data:["); int index = 0; sb.Append("{"); if (arrData.Count <= 0) { sb.Append("}]"); } else { foreach (string val in arrData) { index++; if (val != "
") { sb.Append(val + ","); } else { sb = sb.Replace(",", "", sb.Length - 1, 1); sb.Append("},"); if (index < arrData.Count) { sb.Append("{"); } } } sb = sb.Replace(",", "", sb.Length - 1, 1); sb.Append("]"); } sb.Append("}"); return sb.ToString(); } }

 

   第二步：新建ASPX文件，做为服务器端，用返回查询的JSON数据（PagingRequest.cs）
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.SqlClient; using System.Text; namespace ExtJSDemo.Data { public partial class PagingRequest : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { int start = Convert.ToInt32(Request["start"].ToString()); // ExtJS Paging 必须指定的参数（从第几行记录开始）/ ExtJS默认0是第一行记录 int limit = Convert.ToInt32(Request["limit"].ToString()); // ExtJS Paging 必须指定的参数（每页显示多少行记录） JSONHelper jsonHelp = new JSONHelper(); int TotalRecords = 0; DataSet DSet = GET_Product_Data(start, limit, out TotalRecords); // 获取数据 jsonHelp.success = true; jsonHelp.totlalCount = TotalRecords;// 记录总数 if (DSet != null) { DataTable DTable = DSet.Tables[0]; for (int i = 0; i < DTable.Rows.Count; i++) { // 循环生成JSON代码 jsonHelp.AddItem("Id", DTable.Rows[i]["Id"].ToString()); jsonHelp.AddItem("Name", DTable.Rows[i]["Name"].ToString()); jsonHelp.AddItem("StreetPrice", DTable.Rows[i]["StreetPrice"].ToString()); jsonHelp.AddItem("TypeName", DTable.Rows[i]["TypeName"].ToString()); jsonHelp.ItemOk(); } } Response.Write(jsonHelp.ToString()); // 输出JSON代码 } ///

/// 获取数据 ///

/// 记录索引 /// 每页显示记录数 /// 总记录数 public DataSet GET_Product_Data(int start, int limit,out int TotalRecords) { SqlConnection _Connection = null; SqlDataAdapter _Adapter = null; DataSet DSet = null; try { _Connection = new SqlConnection(System.Configuration.ConfigurationManager.AppSettings["SQLContionString"].ToString()); _Connection.Open(); _Adapter = new SqlDataAdapter("SELECT [Id] FROM [Product] ",_Connection); DSet = new DataSet(); _Adapter.Fill(DSet); TotalRecords = Convert.ToInt32(DSet.Tables[0].Rows.Count); // 记录总数 if (TotalRecords < 1) return null; // 没有记录 int pageLowerBound = start+1; // 从第几条数据开始 int pageUpperBound = pageLowerBound + limit; // 每页多少条数据 StringBuilder sb = new StringBuilder(); if (TotalRecords >= pageLowerBound) { for (int i = pageLowerBound; i < TotalRecords && i < pageUpperBound; i++) { sb.AppendFormat("'{0}',", DSet.Tables[0].Rows[i-1][0].ToString());//构造ID in() 条件,取其中一页 } } else return null; // 没有记录 if (sb.Length > 1) sb.Remove(sb.Length - 1, 1);//删除最后一个逗号 StringBuilder strSql = new StringBuilder(); strSql.Append("SELECT a.[Id],a.[Name],a.[StreetPrice],b.TypeName "); strSql.Append(" FROM [Product] as a left join ProductType as b on a.Typeid = b.Typeid "); strSql.AppendFormat(" where a.[Id] in({0})", sb.ToString()); _Adapter = new SqlDataAdapter(strSql.ToString(), _Connection); DSet = new DataSet(); _Adapter.Fill(DSet); } finally { if (_Connection != null && _Connection.State == ConnectionState.Open) { _Connection.Close(); } } return DSet; } } } 

 

下图为服务器端Response.Write()输出后我们看到的结果图（注意Id编号）

 

 当start=0,limit=5时的数据

 

 当start=5,limit=5时数据

 

 

 好了，服务器端大功能告成了，下面开始写客户端代码 。

 

 

 第三步：新建ASPX页面用作客户端呈现结果的载体(PagingControls.aspx)

 

 

 

第四部：当然是写JS脚本啦！！而且肯定使用Ext.grid.GridPanel类 (PagingGridPanel.js)

PagingGridPanel = Ext.extend(Ext.grid.GridPanel,{ _store:null, constructor:function(){ this._store = new Ext.data.JsonStore({ root:"data", totalProperty:"totalCount", proxy:new Ext.data.HttpProxy({ url:"../Data/PagingRequest.aspx" }), fields:[{name:"Id",type:"int"},{name:"TypeName"},{name:"Name"},{name:"StreetPrice",type:"float"}] }); PagingGridPanel.superclass.constructor.call(this,{ title:'与ASP.NET服务器端结合实现ExtJS前台分页', width:450, height:300, renderTo:Ext.getBody(), bbar:new Ext.PagingToolbar({ store:this._store, pageSize:10 }), columns:[{ header:"产品编号", dataIndex:"Id" },{ header:"产品类型", dataIndex:"TypeName" },{ header:"产品名称", dataIndex:"Name" },{ header:"产品价格", dataIndex:"StreetPrice" }], store:this._store }); this.getStore().load({params:{start:0,limit:8}}); } });

 

 

好了，出结果了，大功告成~~~~~~~~~~~~~``