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

来源：互联网发布：域名邮箱反差编辑：程序博客网时间：2024/06/06 00:16

最近一直在研究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;/// <summary>/// JSONHelper 的摘要说明/// </summary>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("<BR>"); } //序列化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 != "<BR>") { 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代码 } /// <summary> /// 获取数据 /// </summary> /// <param name="PageIndex">记录索引</param> /// <param name="PageSize">每页显示记录数</param> /// <param name="TotalRecords">总记录数</param> 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}});}});

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