Combined with ASP. NET Server, return JSON data to implement extjs gridpanel client Paging

I have been studying extjs recently. I was depressed when I was preparing to use extjs for my project. I searched for it online for half a day and the official demo did not find out how to combine ASP. net is used as the server side to implement extjs gridpanel front-end paging related information and code (PS: Only PHP + MySQL. I cried !!!!), As a result of project needs, after a day of hard work, I made a demo
(ASP. NET + SQL Server 2005)

. First put it on the Internet. First, I would like to see where optimization is needed. Second, I would like to avoid other ASP. NET programmers being frustrated by the hard-to-find code on the Internet.

 

(Final)

 

 

Step 1: In order to make the Server Query return JSON data, I found a jsonhelper class written in C # on the Internet (I would like to thank the unknown guy). below is all the code of the jsonhelper class. (Jsonhelper. CS)

Using system; <br/> using system. collections; <br/> using system. collections. generic; <br/> using system. text; <br/> using system. web. script. serialization; <br/> /// <summary> <br/> // Summary of jsonhelper <br/> /// </Summary> <br/> public class jsonhelper <BR/>{< br/> // corresponding JSON singleinfo member <br/> Public String singleinfo = string. empty; <br/> protected string _ error = string. empty; <br/> protected bool _ succe Ss = true; <br/> protected long _ totalcount = 0; <br/> protected system. collections. arraylist arrdata = new arraylist (); <br/> protected system. collections. arraylist arrdataitem = new arraylist (); <br/> Public jsonhelper () <br/>{< br/>}< br/> Public static string tojson (Object OBJ) <br/>{< br/> javascriptserializer serializer = new javascriptserializer (); <br/> return serializer. serialize (OBJ ); <Br/>}< br/> Public static string tojson (Object OBJ, int recursiondepth) <br/>{< br/> javascriptserializer serializer = new javascriptserializer (); <br/> serializer. recursionlimit = recursiondepth; <br/> return serializer. serialize (OBJ ); <br/>}< br/> // success member corresponding to JSON <br/> Public bool success <br/>{< br/> Get <br/> {< br/> return _ success; <br/>}< br/> set <br/> {<br/> // clear the error if it is set to true. <Br/> If (SUCCESS) _ error = string. empty; <br/> _ success = value; <br/>}< br/> // error member corresponding to JSON <br/> Public string error <br/>{< br/> Get <BR/>{< br/> return _ error; <br/>}< br/> set <br/> {<br/> // if an error is set, success is set to false automatically. <br/> If (value! = "") _ Success = false; <br/> _ error = value; <br/>}< br/> Public long totlalcount <br/>{< br/> get {return _ totalcount ;} <br/> set {_ totalcount = value ;}< br/>}< br/> // reset, this method must be executed every time a JSON object is generated. <br/> Public void reset () <br/>{< br/> _ success = true; <br/> _ error = string. empty; <br/> singleinfo = string. empty; <br/> arrdata. clear (); <br/> arrdataitem. clear (); <br/>}< br/> Public v Oid additem (string name, string value) <br/>{< br/> arrdata. add ("/" "+ name +"/":" + "/" "+ value + "/""); <br/>}< br/> Public void itemok () <br/> {<br/> arrdata. add ("<br>"); <br/>}< br/> // serialize the JSON object to obtain the returned JSON Code <br/> Public override string tostring () <br/>{< br/> stringbuilder sb = new stringbuilder (); <br/> Sb. append ("{"); <br/> Sb. append ("totalcount:" + totlalcount. tostring () + ","); <br/> Sb. append ("success:" + _ success. tostring (). tolower () + ","); <br/> Sb. append ("error:/" "+ _ error. replace ("/" "," // "") + "/", "); <br/> Sb. append ("singleinfo:/" "+ singleinfo. replace ("/" "," // "") + "/", "); <br/> Sb. append ("data: ["); <br/> int Index = 0; <br/> Sb. append ("{"); <br/> If (arrdata. count <= 0) <br/>{< br/> Sb. append ("}]"); <br/>}< br/> else <br/>{< br/> foreach (string Val in arrda Ta) <br/>{< br/> index ++; <br/> If (Val! = "<Br>") <br/>{< br/> Sb. append (Val + ","); <br/>}< br/> else <br/>{< br/> Sb = sb. replace (",", "", sb. length-1, 1); <br/> Sb. append ("},"); <br/> If (index <arrdata. count) <br/>{< br/> Sb. append ("{"); <br/>}< br/> Sb = sb. replace (",", "", sb. length-1, 1); <br/> Sb. append ("]"); <br/>}< br/> Sb. append ("}"); <br/> return sb. tostring (); <br/>}< br/>

 

Step 2: Create An ASPX file and use it as the server to return the queried JSON data (pagingrequest. CS)

Using system; <br/> using system. collections. generic; <br/> using system. LINQ; <br/> using system. web; <br/> using system. web. ui; <br/> using system. web. UI. webcontrols; <br/> using system. data; <br/> using system. data. sqlclient; <br/> using system. text; <br/> namespace extjsdemo. data <br/>{< br/> Public partial class pagingrequest: system. web. UI. page <br/>{< br/> protected void page_load (Object sender, EV Entargs e) <br/>{< br/> int start = convert. toint32 (request ["start"]. tostring (); // The parameter that must be specified by extjs paging (starting from the first line of record)/extjs 0 is the first line of record by default <br/> int Limit = convert. toint32 (request ["Limit"]. tostring (); // parameters that must be specified for extjs paging (How many lines of records are displayed per page) <br/> jsonhelper jsonhelp = new jsonhelper (); <br/> int totalrecords = 0; <br/> dataset dset = get_product_data (START, limit, out totalrecords); // obtain data <br/> jsonhelp. Success = true; <br/> jsonhelp. totlalcount = totalrecords; // total number of records <br/> If (dset! = NULL) <br/>{< br/> datatable dtable = dset. tables [0]; <br/> for (INT I = 0; I <dtable. rows. count; I ++) <br/>{< br/> // generate JSON code cyclically <br/> jsonhelp. additem ("ID", dtable. rows [I] ["ID"]. tostring (); <br/> jsonhelp. additem ("name", dtable. rows [I] ["name"]. tostring (); <br/> jsonhelp. additem ("streetprice", dtable. rows [I] ["streetprice"]. tostring (); <br/> jsonhelp. additem ("typename", dtable. rows [I] ["Type Name "]. tostring (); <br/> jsonhelp. itemok (); <br/>}< br/> response. write (jsonhelp. tostring ()); // output JSON Code <br/>}< br/> // <summary> <br/> // obtain data <br/> /// </Summary> <br/> /// <Param name = "pageindex"> record index </param> <br/> /// <Param name = "pagesize"> records displayed on each page count </param> <br/> /// <Param name = "totalrecords"> total number of records </param> <br/> Public dataset get_product_data (INT start, int limit, out int totalre Cords) <br/>{< br/> sqlconnection _ connection = NULL; <br/> sqldataadapter _ adapter = NULL; <br/> dataset dset = NULL; <br/> try <br/> {<br/> _ connection = new sqlconnection (system. configuration. configurationmanager. appsettings ["sqlcontionstring"]. tostring (); <br/> _ connection. open (); <br/> _ adapter = new sqldataadapter ("select [ID] from [product]", _ connection); <br/> dset = new dataset (); <br /> _ Adapter. fill (dset); <br/> totalrecords = convert. toint32 (dset. tables [0]. rows. count); // total number of records <br/> If (totalrecords <1) return NULL; // no records <br/> int pagelowerbound = start + 1; // starting from the data entry <br/> int pageupperbound = pagelowerbound + limit; // The number of data entries per page <br/> stringbuilder sb = new stringbuilder (); <br/> If (totalrecords> = pagelowerbound) <br/> {<br/> for (INT I = pagelowerbound; I <totalreco RDS & I <pageupperbound; I ++) <br/>{< br/> Sb. appendformat ("'{0}',", dset. tables [0]. rows [I-1] [0]. tostring (); // construct the ID in () condition, take one of the pages <br/>}< br/> else <br/> return NULL; // No record <br/> If (sb. length> 1) <br/> Sb. remove (sb. length-1, 1); // Delete the last comma <br/> stringbuilder strsql = new stringbuilder (); <br/> strsql. append ("select. [ID],. [name],. [streetprice], B. typename "); <br/> strsql. appen D ("from [product] as a left join producttype as B on. typeid = B. typeid "); <br/> strsql. appendformat ("where. [ID] In ({0}) ", sb. tostring (); <br/> _ adapter = new sqldataadapter (strsql. tostring (), _ connection); <br/> dset = new dataset (); <br/> _ adapter. fill (dset); <br/>}< br/> finally <br/>{< br/> If (_ connection! = NULL & _ connection. state = connectionstate. open) <br/>{< br/> _ connection. close (); <br/>}< br/> return dset; <br/>}< br/>}

 

Output for server response. Write () and the result graph we see (Note ID number)

 

 Data when START = 0 and limit = 5

 

When start = 5 and limit = 5

 

 

Now, the server functions are complete. The client code is written below.
.

 

 

 Step 3: Create An ASPX page as the carrier of the client's rendering result (pagingcontrols. aspx)

 <Head id = "head1" runat = "server"> <br/> <title> </title> <br/> <LINK rel = "stylesheet" type = "text/ CSS "href = ".. /ext3/resources/CSS/ext-all.css "mce_href =" ext3/resources/CSS/ext-all.css "/> <br/> <MCE: script Type = "text/JavaScript" src = ".. /ext3/adapter/EXT/ext-base.js "mce_src =" ext3/adapter/EXT/ext-base.js "> </MCE: SCRIPT> <br/> <MCE: script Type = "text/JavaScript" src = ".. /ext3/ext-all.js "mce_src =" ext3/EXT -All. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src =" JS/paginggridpanel. JS "mce_src =" JS/paginggridpanel. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> Ext. blank_image_url = ".. /ext3/resources/images/default/s.gif "; <br/> Ext. onready (function () {<br/> Ext. quicktips. init (); <br/> Ext. form. field. prototype. msgtarget = "side"; <br/> New paginggridpanel (); // JS file <br/> }); </P> <p> // --> </MCE: SCRIPT> <br/> </pead>

 

 

Part 4: Write JS scripts !! And you must use the Ext. Grid. gridpanel class (paginggridpanel. JS)

Paginggridpanel = ext. extend (ext. grid. gridpanel, {</P> <p> _ store: NULL, </P> <p> constructor: function () {</P> <p> This. _ store = new Ext. data. jsonstore ({<br/> root: "data", <br/> totalproperty: "totalcount", <br/> Proxy: New Ext. data. httpproxy ({<br/> URL :".. /data/pagingrequest. aspx "<br/>}), <br/> fields: [{name:" ID ", type:" int "},{ name:" typename "}, {name: "name" },{ name: "streetprice", type: "float"}] <br/>}); </P> <p> paginggridpanel. superclass. constructor. call (this, {<br/> title: 'and ASP. NET Server Side Combined with extjs front-end pagination ', <br/> width: 450, <br/> Height: 300, <br/> renderto: ext. getbody (), <br/> bbar: New Ext. pagingtoolbar ({<br/> store: This. _ store, <br/> pagesize: 10 <br/>}), <br/> columns: [{<br/> header: "Product NO ", <br/> dataindex: "ID" <br/>},{ <br/> header: "product type", <br/> dataindex: "typename" <br/>},{ <br/> header: "Product Name", <br/> dataindex: "name" <br/> }, {<br/> header: "product price", <br/> dataindex: "streetprice" <br/>}], <br/> store: This. _ store <br/>}); </P> <p> This. getstore (). load ({Params: {start: 0, limit: 8 }}); <br/>}< br/> });

 

 

Now, the result is displayed ~~~~~~~~~~~~~ ''