Interworking with extjs data in. Net 3.5

Extjs is a very good UI framework, and more enterprise-level applications are using this framework to benefit from it. Most of the projects are based on J2EE, because extjs and Java are becoming more and more integrated. For developers who use the. NET platform, it is difficult to use extjs in their own projects because it is difficult to unify data communication. Before. Net 3.5, the. NET platform provided limited native support for JSON. Therefore, many programmers use third-party components. For example, litjson.net component.

In. Net 3.5, the Framework provides the datacontractjsonserializer class to conveniently serialize and deserialize objects in JSON format. In addition,. net3.5 provides extension methods and LINQ, making it even more powerful for our development. In this blog, I will use these new features to analyze how extjs and. net communication are integrated. Please correct me if you have any mistakes.

1. Use datacontractjsonserializer class
This class is used for JSON serialization and deserialization of objects. This class is located in the namespace system. runtime. serialization. JSON. Is a class added to the. net3.5 platform. The writeobject () and readobject () methods are used to perform operations on objects. For related APIs, refer to msdn.

Ii. Extension methods
The extension method is a new feature provided by. Net 3.5. It is used to enhance the support of native objects and extend the functions of objects. For more information, see msdn or related books.

Iii. Generic
Generics are no stranger to many. Net programmers. After. NET 2.0, you have added support for generics in the framework. Generics reduce the resource loss of objects during packing and unpacking.

Next, we can write the following code to extend the JSON serialization function of the class. I used the extension method and the generic constraint, which restricts that the type must be a class.

 

Using system;
Using system. Collections. Generic;
Using system. LINQ;
Using system. Web;
Using system. IO;
Using system. text;
Using system. runtime. serialization. JSON;

/// <Summary>
/// Summary description for jsonextends
/// </Summary>
Public static class jsonextends
{
Public static string tojson <t> (this t OBJ) where T: Class
{
Datacontractjsonserializer SER = new datacontractjsonserializer (obj. GetType ());
String output = string. empty;
Using (memorystream MS = new memorystream ())
{
Ser. writeobject (MS, OBJ );
Stringbuilder sb = new stringbuilder ();
SB. append (encoding. utf8.getstring (Ms. toarray ()));
Output = sb. tostring ();
}
Return output;
}

Public static t fromjson <t> (this string jsonstring) where T: Class
{
T ouput = NULL;
Try
{
Datacontractjsonserializer SER = new datacontractjsonserializer (typeof (t ));
Using (memorystream MS = new memorystream (encoding. utf8.getbytes (jsonstring )))
{
Ouput = (t) SER. readobject (MS );
}
}
Catch (exception ){}
Return ouput;
}
}

 

Create an object class. Note: to serialize the Class and Class Members, the datacontract attribute must be used for the class members. The members who ignore the datamember attribute must use the datamember attribute. Meanwhile, the datamember attribute is also suitable for set members. The serialized result will be a JSON array.

 

Using system;
Using system. Collections. Generic;
Using system. LINQ;
Using system. Web;
Using system. runtime. serialization;

/// <Summary>
/// Summary description for employee
/// </Summary>
[Datacontract]
Public class employee
{
[Datamember]
Public String firstname {Get; set ;}
[Datamember]
Public String lastname {Get; set ;}
// Public list <payment> payments {Get; set ;}
}

 

Sets up the general processing program employeespayment. ashx, which is used to interact data with extjs. The advantage of using ashx instead of aspx is that ashx does not have to go through complex page lifecycles, which greatly improves efficiency.

 

Using system;
Using system. Web;
Using system. Collections. Generic;

Public class employeespayment: ihttphandler {

Public void processrequest (httpcontext context ){
Context. response. contenttype = "application/X-JSON ";
Employee Employee = new employee {lastname = "lightyears", firstname = "bath "};
Context. response. Write (employee. tojson <employee> ());
}
 
Public bool isreusable {
Get {
Return false;
}
}

}

 

 

JSON representation layer

 

Ext. blank_image_url = 'Resource/images/default/s.gif ';
Ext. onready (function (){
VaR Fr = new Ext. formpanel ({
Title: 'test json ',
Frame: True,
ID: 'frjson ',
Autoheight: True,
Applyto: 'Con ',
Width: 200,
Labelwidth: 30,
Items :[
New Ext. Form. textfield ({
Fieldlabel: 'name ',
ID: 'firstname'
}),
New Ext. Form. textfield ({
Fieldlabel: 'surname ',
ID: 'lastname'
})
],
Buttons :[
{
Text: 'extract data ',
Handler: function (){
Ext. MessageBox. Wait ('loading data', 'loading data ');
VaR Config = {
URL: 'employeespayment. ashx ',
Method: 'get ',
Success: function (Res, OP ){
Ext. MessageBox. Hide ();
VaR OBJ = ext. Decode (res. responsetext );
Ext. getcmp ('firstname'). setvalue (obj. firstname );
Ext. getcmp ('lastname'). setvalue (obj. lastname );
}
};
Ext. Ajax. Request (config );
}
}
]
});
});