Aspx:
Reference jquery on the front-end page. Any version can be used.
<Script src = "./JS/jquery-1.7.2.js" type = "text/javascript"> </script>
Add a button
<Input type = "button" value = "button" id = "btn"/>
The js file is as follows:
$ (Document). ready (function (){
$. Ajax ({
Url: '../Handler. ashx? Action = GetProvince ', // url action is the method name
Data: {id: "11"}, // Parameter
Type: 'post ',
DataType: "text", // It Can Be text. If text is used, the returned result is a string. If json format is required, it is set to json
ContentType: "application/json; charset = UTF-8 ",
Success: function (data ){
Alert (data );
Var obj = eval ("(" + data + ")"); // convert the string to json
Alert (obj );
Alert (obj. T_blog [0]. name );
},
Error: function (msg ){
Alert ("failed ");
}
});
});
});
The Handler. ashx file is as follows:
<% @ WebHandler Language = "C #" Class = "Handler" %>
Using System;
Using System. Data;
Using System. Text;
Using System. Web;
Public class Handler: IHttpHandler {
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
String method = context. Request ["action"]; // action
Switch (method)
{
Case "GetProvince ":
{
String a = context. Request. Params ["id"]; // The parameter passed by the foreground is id
Context. Response. Write (GetProvince ());
Break;
}
Default:
Break;
}
}
Public bool IsReusable {
Get {
Return false;
}
}
/// <Summary>
/// Method to be called at the front-end
/// </Summary>
/// <Returns> </returns>
Public string GetProvince ()
{
// TreeViewCommon treeViewCommon = new TreeViewCommon ();
// Return treeViewCommon. GetProvince ();
Return CreateJsonParameters (GetTable ());
}
/// <Summary>
/// DataTable
/// </Summary>
/// <Returns> </returns>
Public DataTable GetTable ()
{
DataTable dt = new DataTable ();
Dt. Columns. AddRange (new DataColumn []
{
New DataColumn ("name", Type. GetType ("System. String ")),
New DataColumn ("age", Type. GetType ("System. Int32 "))
});
DataRow dr;
Dr = dt. NewRow ();
Dr ["name"] = "zhangsan ";
Dr ["age"] = 10;
Dt. Rows. Add (dr );
Dr = dt. NewRow ();
Dr ["name"] = "lisi ";
Dr ["age"] = 15;
Dt. Rows. Add (dr );
Return dt;
}
/// <Summary>
/// Convert DataTable to Json
/// </Summary>
/// <Param name = "dt"> </param>
/// <Returns> </returns>
Public static string CreateJsonParameters (DataTable dt)
{
/**/
/**/
/**/
/*/************************************* ***************************************
* Without goingin to the depth of the functioning of this Method, I will try to give an overview
* As soon as this method gets a DataTable it starts to convert it into JSON String,
* It takes each row and in each row it grabs the cell name and its data.
* This kind of JSON is very usefull when developer have to have Column name of.
* Values Can be Access on clien in this way. OBJ. HEAD [0]. <ColumnName>
* NOTE: One negative point. by this method user will not be able to call any cell by its index.
**************************************** **********************************/
StringBuilder JsonString = new StringBuilder ();
// Exception Handling
If (dt! = Null & dt. Rows. Count> 0)
{
JsonString. Append ("{");
JsonString. Append ("\" T_blog \":[");
For (int I = 0; I <dt. Rows. Count; I ++)
{
JsonString. Append ("{");
For (int j = 0; j <dt. Columns. Count; j ++)
{
If (j <dt. Columns. Count-1)
{
JsonString. append ("\" "+ dt. columns [j]. columnName. toString () + "\": "+" \ "" + dt. rows [I] [j]. toString () + "\",");
}
Else if (j = dt. Columns. Count-1)
{
JsonString. append ("\" "+ dt. columns [j]. columnName. toString () + "\": "+" \ "" + dt. rows [I] [j]. toString () + "\"");
}
}
/**/
/**/
/**/
/* End Of String */
If (I = dt. Rows. Count-1)
{
JsonString. Append ("}");
}
Else
{
JsonString. Append ("},");
}
}
JsonString. Append ("]}");
Return JsonString. ToString ();
}
Else
{
Return null;
}
}
}