Do WinForm habits, we are accustomed to set datasource such a writing.
If you want to achieve a timely refresh of the page, it is easy to implement the UpdatePanel and timer two controls with. Net. This adds a lot of elements that you can't control, for example: After using UpdatePanel, the style you set is likely to change, and then you need to tune it. Therefore, it is better to use some of their own control of the high code more appropriate.
Let's start today with this example of UpdatePanel Timer Implementation page Automatically refresh this case to begin.
First, let's look at my general handler, in which I realized that I was detecting a DataTable from the database and then converting it to a JSON transfer to the client.
Copy Code code as follows:
<summary>
Summary description of GetData
</summary>
public class Getdata:ihttphandler
{
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
Context. Response.Write ("Hello World");
Set query string
String strSQL = "Select Ckrid,chrcarnumber,cncname,bcrname from T_carnumbercategory,t_checkresult,t_businesscategory Where Ckrcheckresult is null and Cncid=ckrcarnumbercategoryid and Ckrbusinesscategory=bcrid ";
Set connection string
String strconn = "Data source= (description= address= (protocol=tcp) (host=192.168.24.173) (port=1521)) (Connect_data= ( SERVICE_NAME=ORCL))); User id=admin; Password=123123 ";
To define and open a database connection
OracleConnection conn = new OracleConnection (strconn);
Conn. Open ();
Defines a command line object,
OracleCommand cmd = new OracleCommand (strSQL, conn);
Define an adapter to populate the DataTable;
OracleDataAdapter ADP = new OracleDataAdapter (cmd);
Define a DataTable and populate it with the adapter
DataTable dt = new DataTable ();
Adp. Fill (DT);
Context. Response.Write (Jsonconvert.serializeobject (DT));
The above is a DataTable I've queried from the database and then converted it to JSON using a JSON action class library
Since we do not have a database environment, I copied the above string for everyone to test the experiment
Because it's a double quote, I'll make a mistake here, so I'm going to change it to single quotes.
But when the client gets the JSON, it is double quotes, so it has to be replaced again ... Heart
var json = ' [{' Ckrid ': ' 1359374764563 ', ' chrcarnumber ': ' 123123 ', ' cncname ': ' Large car ', ' bcrname ': ' Issuing inspection mark '},{' ckrid ': ' 1359371470153 ', ' chrcarnumber ': ' ASDFSADF ', ' cncname ': ' Big car ', ' bcrname ': ' Register '},{' Ckrid ': ' 1359343210678 ', ' Chrcarnumber ': ' 111222 ', ' cncname ': ' Big car ', ' bcrname ': ' Register '},{' Ckrid ': ' 1359354395618 ', ' chrcarnumber ': ' 123asd ', ' Cncname ': ' Big car ', ' bcrname ': ' Register '},{' Ckrid ': ' 1359355217314 ', ' chrcarnumber ': ' 123asdqwe ', ' cncname ': ' Big car ', ' Bcrname ': ' Registration '},{' ckrid ': ' 1359355356271 ', ' chrcarnumber ': ' 1111111 ', ' cncname ': ' Big car ', ' bcrname ': ' Register '},{' Ckrid ' : ' 1359355490374 ', ' chrcarnumber ': ' 123123123 ', ' cncname ': ' Big car ', ' bcrname ': ' Registration '},{' ckrid ': ' 1358074597852 ', ' Chrcarnumber ': ' 323232 ', ' cncname ': ' Embassy car ', ' bcrname ': ' Issuing inspection qualified mark '} ';
Context. Response.Write (JSON. Replace (' \ ', ' \ '));
}
public bool IsReusable
{
Get
{
return false;
}
}
}
The above server-side program in the comments are very detailed, there is no understanding of the message can be explained. The class library is used by Newtonsoft.Json.dll. Click to download from My network-no fee Oh ~ Pro
Here is the client code：
Copy Code code as follows:
<title> Testing </title>
<script src= "Jquery-1.7.1.js" type= "Text/javascript" ></script>
<body>
<form id= "Form1" runat= "Server" >
<table id= "Data" >
<TR id= "tem" >
<TD id= "id" >
Serial number
</td>
<TD id= "Carnumber" >
Car brand
</td>
<TD id= "BusinessName" >
Business Type
</td>
<TD id= "BTN" >
<input id= "Button2" type= "button" value= "button"/>
</td>
</tr>
</table>
<div id= "Loading" >
Loading data ...
</div>
<script type= "Text/jscript" >
Simulate the way a data is loading
settimeout (function () {$ ("#loading"). Hide ();}, 1000;
Set Timer call method in milliseconds
SetInterval (SetData (), 1000);
Get the data from the server side and display it to the interface, and use the Getjson method to implement
function SetData () {
$.getjson ("Getdata.ashx", NULL, function (obj) {
$ ("tr"). EQ (0). Nextall (). remove (); Remove the TR from the template line
Dynamically load the acquired data into the table
for (var i = 0; i < obj.length; i++) {
Set the ID of article fourth to red (this can be used to modify the style based on the content)
if (i = = 3) {
Row.find ("#ID"). CSS ("Color", "red");
}
Get template row, copy row
var row = $ ("#tem"). Clone ();
Add a new Line button to the Click event
Row.find ("#btn input"). Click ({name:obj[i]. Chrcarnumber, Back:obj[i]. Ckrid}, operation);
Note: In the jquery1.4.2, the above method will be wrong, the specific reason I do not know, anyway 1.7.1 this writing is no problem
If the code above doesn't work, you can try it.
Row.find ("#btn input"). Bind ("click", {Name:obj[i]. Chrcarnumber, Back:obj[i]. Ckrid}, operation);
Test the code above in 1.4.2.min ... Can be run, the solution of this problem wasted a long time, all blame the older frame
Row.find ("#ID"). Text (Obj[i]. Ckrid); Serial number
Row.find ("#CarNumber"). Text (Obj[i]. Chrcarnumber); CAR license plate number
Row.find ("#BusinessName"). Text (Obj[i]. Bcrname); The name of the business transacted
Add a new row to the table
Row.appendto ("#data");
}
});
}
Gets the passed arguments and displays
function operation (event) {
alert (event.data.name);
alert (event.data.back);
}
Get the data from the server side and show it to the interface, using the Ajax method to implement
function Setdatabyajax () {
$.ajax ({
Type: ' Get ',//Set Call type
DataType: "JSON",//Set data type
URL: "Getdata.ashx",//url
Complete:function () {$ ("#loading"). Hide ()},
Success:function (obj) {
$ ("tr"). EQ (0). Nextall (). remove (); Remove the TR from the template line
Dynamically load the acquired data into the table
for (var i = 0; i < obj.length; i++) {
Set the ID of article fourth to red (this can be used to modify the style based on the content)
if (i = = 3) {
Row.find ("#ID"). CSS ("Color", "red");
}
Get template row, copy row
var row = $ ("#tem"). Clone ();
Add a new Line button to the Click event
Row.find ("#btn input"). Click ({name:obj[i]. Chrcarnumber, Back:obj[i]. Ckrid}, operation);
Note: In the jquery1.4.2, the above method will be wrong, the specific reason I do not know, anyway 1.7.1 this writing is no problem
If the code above doesn't work, you can try it.
Row.find ("#btn input"). Bind ("click", {Name:obj[i]. Chrcarnumber, Back:obj[i]. Ckrid}, operation);
The above code can be run in the 1.4.2, the solution of this problem wasted a long time, all blame the older frame
Row.find ("#ID"). Text (Obj[i]. Ckrid); Serial number
Row.find ("#CarNumber"). Text (Obj[i]. Chrcarnumber); CAR license plate number
Row.find ("#BusinessName"). Text (Obj[i]. Bcrname); The name of the business transacted
Add a new row to the table
Row.appendto ("#data");
}
}
});
}
</script>
</form>
</body>
The above is to write an automatic refresh page example, the above example, in addition to the use of jquery in the inside of the things you can not control, if enough cattle, you do not want to use his frame, want to write one, then it is also possible. Just for my beginner, it's still a good thing to save.
A Getjson method, only need to give 3 parameters, he will create objects, callback functions, set parameters, and so all the operations are done to you. This is still worth learning, in peacetime learning, for commonly used things, should consider refining it into a method, put into their own small code base.
Although the above code is not very difficult, but personal feeling this is my Ajax understanding of a milestone example, an example, I solved a lot of suspected fog.
