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