Data is often obtained when JQery's Ajax function is used, and the data obtained in Net is often convenient as DataTable.
JQuery needs the Json format: in this way, the conversion can be performed using the following method:
/// <Summary>
/// Convert the DataTable to Json data
/// </Summary>
Public static class DataTableToJSON
{
/// <Summary>
/// Convert dt into Json data format, for example, table [{id: 1, title: 'sport'}, id: 2, title: 'play'}]
/// </Summary>
/// <Param name = "dt"> </param>
/// <Returns> </returns>
Public static string DtToSON (DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder ();
JsonBuilder. Append ("recordcount:" + dt. Rows. Count + ", table :[");
For (int I = 0; I <dt. Rows. Count; I ++)
{
If (I> 0)
JsonBuilder. Append (",");
JsonBuilder. Append ("{");
For (int j = 0; j <dt. Columns. Count; j ++)
{
If (j> 0)
JsonBuilder. Append (",");
JsonBuilder. append (dt. columns [j]. columnName. toLower () + ": '" + dt. rows [I] [j]. toString (). replace ("\ t ",""). replace ("\ r ",""). replace ("\ n ",""). replace ("\ '", "\'") + "'");
}
JsonBuilder. Append ("}");
}
JsonBuilder. Append ("]");
Return jsonBuilder. ToString ();
}
}
//////////////////////////////////////// ///// How to use jqery on the front end please refer to the following implementation method ///////////////////////// /////////////////////////
Front-end page
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "ClassNameByJSON. aspx. cs" Inherits = "ClassName" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
<Script language = "javascript" type = "text/javascript" src = "js/jquery-1.3.2.min.js"> </script>
<Script language = "javascript" type = "text/javascript">
$ (Function (){
$ ("# DropDownList1"). change (function (){
// Obtain value test
// Alert ($ ("# DropDownList1"). val ());
// Obtain data through ajax
$ ("# DropDownList2" ).html ("");
$ ("# DropDownList2"). append ("<option value = \" 0 \ "> -- select student -- </option> ");
$. Get ("GetStudent. ashx", {action: "get", className: $ ("# DropDownList1"). val ()}, function (data ){
// After processing by the server, data is returned
Var jsJosn = eval ('+ data + ')');
// Alert (jsJosn. stuentscount );
// Alert (jsJosn. stuents [0]. stuName );
For (var I = 0; I <jsJosn. stuentscount; I ++ ){
$ ("# DropDownList2 "). append ("<option value = \" "+ jsJosn. stuents [I]. id + "\"> "+ jsJosn. stuents [I]. stuName + "</option> ");
}
});
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: DropDownList ID = "DropDownList1" runat = "server" performanceid = "sqlperformance1"
DataTextField = "ClassName" DataValueField = "Id" Width = "183px" AppendDataBoundItems = "True">
<Asp: ListItem Value = "0"> -- select a class -- </asp: ListItem>
</Asp: DropDownList> <asp: SqlDataSource ID = "sqlperformance1" runat = "server" ConnectionString = "<% $ ConnectionStrings: AjaxDemoConnectionString %>"
SelectCommand = "SELECT * FROM [ClassInfo]"> </asp: SqlDataSource>
<Asp: DropDownList ID = "DropDownList2" runat = "server" AppendDataBoundItems = "True" Width = "168px">
<Asp: ListItem Value = "0">-select student-</asp: ListItem>
</Asp: DropDownList> </div>
</Form>
</Body>
</Html>
Obtain data using the. ashx File
<% @ WebHandler Language = "C #" class = "GetStudent" %>
Using System;
Using System. Web;
Using System. Data. SqlClient;
Using System. Data;
Using System. Text;
Public class GetStudent: IHttpHandler {
// Obtain the student through the request and return the json object
Public void ProcessRequest (HttpContext context ){
String classVale = context. Request. Params ["className"];
SqlConnection sqlconn = new SqlConnection ();
Sqlconn. ConnectionString = @ "server = CB2E66F752294E9 \ SQLEXPRESS; database = ajaxdemo; uid = sa; pwd = sa ";
SqlCommand sqlcomm = new SqlCommand ();
Sqlcomm. Connection = sqlconn;
Sqlcomm. CommandText = "select * from dbo. StudentInfo where ClassId =" + int. Parse (classVale );
SqlDataAdapter adp = new SqlDataAdapter (sqlcomm );
DataSet set = new DataSet ();
Adp. Fill (set );
// Wrap it in JSON format
// Example: {stuentscount: 10, stuents: [{id: 1, stuName: "Zhang San" },{ id: 2, stuName: "Li Si"}]}
If (set. Tables [0]. Rows. Count = 0)
{
Context. Response. Write ("0 ");
}
Else
{
StringBuilder sb = new StringBuilder ();
Sb. Append ("{stuentscount:" + set. Tables [0]. Rows. Count + ", stuents :[");
For (int I = 0; I <set. Tables [0]. Rows. Count; I ++)
{
Sb. append ("{id:" + set. tables [0]. rows [I] ["Id"]. toString () + ", stuName: \" "+ set. tables [0]. rows [I] ["StudentName"]. toString () + "\"}");
If (I! = Set. Tables [0]. Rows. Count-1 ){
Sb. Append (",");
}
}
Sb. Append ("]}");
Context. Response. Write (sb. ToString ());
}
}
Public bool IsReusable {
Get {
Return false;
}
}
}
# JqueryStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
