Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how Json data is asynchronously bound to the Table of the interface and how the code is automatically refreshed. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

I am used to doing Winform, and everyone is used to setting up datasource.

If you want to achieve regular page refresh, it is actually quite easy to use. Net to implement encapsulated updatepanel and timer controls. 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 adjust these. So it is more appropriate to use some code with high self-control.

Today, let's start with the example of updatepanel plus timer to automatically refresh the page.

First of all, let's take a look at my general handler, in which I myself implement to find datatable from the database, and then convert it to json and transmit it to the client.

The code is as follows:

/ / /

/ Summary description of getData

/ / /

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 categories CarNumberCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID select ckrID,chrCarNumber,cncName,bcrName from CheckResultJournal BusinessCategory"

/ / set the 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"

/ / define and open a database connection

OracleConnection conn = new OracleConnection (strConn)

Conn.Open ()

/ / define 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 an adapter

DataTable dt = new DataTable ()

Adp.Fill (dt)

Context.Response.Write (JsonConvert.SerializeObject (dt))

/ / above is the datatable I queried from the database, and then converted to Json using a Json operation class library

/ / since you do not have a database environment, I will copy the above string for you to test and experiment.

/ / since it is copied in double quotation marks, putting it here will report an error, so I changed it to single quotation marks.

/ but when the client acquires json, it recognizes double quotation marks, so it has to replace it again. Heart-broken

/ / var json = "[{'CKRID':'1359374764563','CHRCARNUMBER':'123123','CNCNAME':' large car', 'BCRNAME':' issued inspection mark'}, {'CKRID':'1359371470153','CHRCARNUMBER':'asdfsadf','CNCNAME':' large car', 'BCRNAME':' registration'}, {'CKRID':'1359343210678','CHRCARNUMBER':'111222','CNCNAME':' large car', 'BCRNAME':' registration'} {'CKRID':'1359354395618','CHRCARNUMBER':'123asd','CNCNAME':' large cars', 'BCRNAME':' registration'}, {'CKRID':'1359355217314','CHRCARNUMBER':'123asdqwe','CNCNAME':' large cars', 'BCRNAME':' registration'}, {'CKRID':'1359355356271','CHRCARNUMBER':'1111111','CNCNAME':' large cars', 'BCRNAME':' registration'}, {'CKRID':'1359355490374' 'CHRCARNUMBER':'123123123','CNCNAME':' large car', 'BCRNAME':' Registration'}, {'CKRID':'1358074597852','CHRCARNUMBER':'323232','CNCNAME':' Embassy car', 'BCRNAME':' approved Inspection Mark'}] "

/ / context.Response.Write (json.Replace ('\','\ "))

}

Public bool IsReusable

{

Get

{

Return false

}

}

}

The comments in the server-side program above are very detailed, and you can leave a message if you don't understand. The class library uses Newtonsoft.Json.dll. You can download it from my online disk by clicking on it-- free of charge.

Here is the client code:

The code is as follows:

test

Running water number

License plate number

Service type

Loading data.

/ / simulate the appearance of a data being loaded

SetTimeout (function () {$("# loading") .hide ();}, 1000)

/ / set the timer to call the method regularly (in milliseconds)

SetInterval (SetData (), 1000)

/ / get the data from the server, display it to the interface, and use the getJSON method to realize

Function SetData () {

$.getJSON ("getData.ashx", null, function (obj) {

$("tr") .eq (0) .nextAll () .remove (); / / delete the tr except for the template line

/ / dynamically load the acquired data into table

For (var I = 0; I < obj.length; iTunes +) {

/ / set the ID of Article 4 to red (this can be used to modify the style according to the content

If (I = = 3) {

Row.find ("# ID") .css ("color", "red")

}

/ / get the template line and copy one line

Var row = $("# tem") .clone ()

/ / add the button of the new line to the click event

Row.find ("# btn input") .click ({name: OBJ [I] .CHRCARNUMBER, back: OBJ [I] .CKRID}, operation)

/ / Note: in jquery1.4.2, the above method will go wrong, and I don't know the specific reason. Anyway, 1.7.1 is not a problem.

/ / if the above code 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 is 1.4.2.min. The solution to this problem wasted a long time, and it was blamed for using the older framework.

Row.find ("# ID") .text (obj [I] .CKRID); / / serial number

Row.find ("# CarNumber") .text (obj [I] .CHRCARNUMBER); / / license plate number

Row.find ("# BusinessName") .text (obj [I] .BCRNAME); / / name of the business handled

/ / add new rows to the table

Row.appendTo ("# data")

}

});

}

/ / get the passed parameters and display

Function operation (event) {

Alert (event.data.name)

Alert (event.data.back)

}

/ / get the data from the server, display it to the interface, and use the ajax method to realize

Function SetDataByAjax () {

$.ajax ({

Type: "get", / / set the call type

DataType: "json", / / set the data type

Url: "getData.ashx", / / url

Complete: function () {$("# loading") .hide ()}

Success: function (obj) {

$("tr") .eq (0) .nextAll () .remove (); / / delete the tr except for the template line

/ / dynamically load the acquired data into table

For (var I = 0; I < obj.length; iTunes +) {

/ / set the ID of Article 4 to red (this can be used to modify the style according to the content

If (I = = 3) {

Row.find ("# ID") .css ("color", "red")

}

/ / get the template line and copy one line

Var row = $("# tem") .clone ()

/ / add the button of the new line to the click event

Row.find ("# btn input") .click ({name: OBJ [I] .CHRCARNUMBER, back: OBJ [I] .CKRID}, operation)

/ / Note: in jquery1.4.2, the above method will go wrong, and I don't know the specific reason. Anyway, 1.7.1 is not a problem.

/ / if the above code 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 1.4.2. The solution to this problem has wasted a long time, and it is blamed for using the older framework.

Row.find ("# ID") .text (obj [I] .CKRID); / / serial number

Row.find ("# CarNumber") .text (obj [I] .CHRCARNUMBER); / / license plate number

Row.find ("# BusinessName") .text (obj [I] .BCRNAME); / / name of the business handled

/ / add new rows to the table

Row.appendTo ("# data")

}

}

});

}

The above is a do-it-yourself example of automatically refreshing the page, in the above example, in addition to using the JQuery inside the things you can not control, if enough cattle, you do not want to use his framework, want to write one, then it is OK. It's just that for me, a beginner, I can save a lot of trouble with this.

A getJson method, only need to give 3 parameters, he will create objects, callback functions, set parameters and other all operations for you to do. This is worth learning, in the usual study, for the commonly used things, you should consider refining them into a method and putting them into your own small code library.

Although the above code is not very difficult, but personally feel that this is my understanding of ajax for a milestone example, an example, solved a lot of my doubts.

After reading the above, do you have any further understanding of the principle and code of asynchronously binding Json data to the interface's Table and automatically refreshing it? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.