Code for transmitting and receiving DataTable using Jquery Ajax in Asp.net

Last Update:2013-10-16 Source: Internet

Author: User

Tags string back

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The server then reverse constructs the GridView into a able, adds a row to the DataTable, binds it to the GridView, and sends it back to the client...
Can it be simpler?
When using Ajax data to request data, the data is usually in a simple format, such as String, with less information. Of course, you can also request back to XML, but XML data is redundant, and the client processing is much more troublesome than json.
Can it be simpler?
The above problems can be easily solved if the DataTable and JSON types can be easily converted to each other.
Advantages: 1) Avoid unnecessary backhaul;
2) Streamline the size of asynchronous request data;
3) Solve the Problem of tedious data sending and receiving when the data volume is large.
Since there are so many benefits, let's go to the code.
Front-end code:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Script type = "text/javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/json2.js"> </script>
<Script type = "text/javascript">
// Onload
$ (Function (){
// Click botton1
$ ("# Botton1"). click (function (){
Var url = "default. aspx? Ajax = 1 ";
Var dtb = generateDtb ();
// Serialize the object
Var postdata = JSON. stringify (dtb );
// Asynchronous request
$. Post (url, {json: postdata}, function (json ){
CreateTable (json );
}, "Json ")
});
});
// Generate a able object
Function generateDtb (){
Var dtb = new Array ();
For (var I = 0; I <10; I ++ ){
Var row = new Object ();
Row. col1 = I;
Row. col2 = I % 2 = 0? True: false;
Row. col3 = I + "he \ nll \" ow ";
Dtb. push (row );
}
Return dtb;
}
// Display data in Json
Function createTable (json ){
Var table = $ ("<table border = '1'> </table> ");
For (var I = 0; I <json. length; I ++ ){
O1 = json [I];
Var row = $ ("<tr> </tr> ");
For (key in o1 ){
Var td = $ ("<td> </td> ");
Td. text (o1 [key]. toString ());
Td. appendTo (row );
}
Row. appendTo (table );
}
Table. appendTo ($ ("# back "));
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Input id = "botton1" type = "button" value = "button"/>
<Div id = "back">
</Div>
</Div>
</Form>
</Body>
</Html>

Background code:
/// <Summary>
Copy codeThe Code is as follows:
/// When the page is loaded
/// </Summary>
/// <Param name = "sender"> </param>
/// <Param name = "e"> </param>
Protected void Page_Load (object sender, EventArgs e)
{
// Determine whether the request is asynchronous
If (Request. QueryString ["ajax"] = "1 ")
{
ProcessRequest ();
}
}
/// <Summary>
/// Process asynchronous requests
/// </Summary>
Private void ProcessRequest ()
{
Response. ContentType = "text/html ";
String json = Request. Form ["json"];
// Deserialize the able
DataTable newdtb = Json2Dtb (json );
// Serialize the DataTable to JSON
String back = Dtb2Json (newdtb );
Response. Write (back );
Response. End ();
}
/// <Summary>
/// Convert DataTable to Json
/// </Summary>
/// <Param name = "dtb"> </param>
/// <Returns> </returns>
Private string Dtb2Json (DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer ();
ArrayList dic = new ArrayList ();
Foreach (DataRow row in dtb. Rows)
{
Dictionary <string, object> drow = new Dictionary <string, object> ();
Foreach (DataColumn col in dtb. Columns)
{
Drow. Add (col. ColumnName, row [col. ColumnName]);
}
Dic. Add (drow );
}
Return jss. Serialize (dic );
}
/// <Summary>
/// Convert Json to DataTable
/// </Summary>
/// <Param name = "json"> </param>
/// <Returns> </returns>
Private DataTable Json2Dtb (string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer ();
ArrayList dic = jss. Deserialize <ArrayList> (json );
DataTable dtb = new DataTable ();
If (dic. Count> 0)
{
Foreach (Dictionary <string, object> drow in dic)
{
If (dtb. Columns. Count = 0)
{
Foreach (string key in drow. Keys)
{
Dtb. Columns. Add (key, drow [key]. GetType ());
}
}
DataRow row = dtb. NewRow ();
Foreach (string key in drow. Keys)
{
Row [key] = drow [key];
}
Dtb. Rows. Add (row );
}
}
Return dtb;
}

Upload a download file. If you find it useful, download it.
Json.zip

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More