Winform is used to setting datasource.
If you want to regularly refresh the page, it is easy to use. net to implement the encapsulated updatepanel and timer controls. This adds a lot of elements that you cannot control. For example, after using updatepanel, the style you set may change, and you also need to adjust it. Therefore, it is more appropriate to use code that is highly controllable.
Let's start with the example of updatepanel and timer to automatically refresh the page.
First, let's take a look at my general processing program. In this process, what I implement is to find the datatable from the database and then convert it to json and transmit it to the client.
Copy codeThe Code is as follows:
/// <Summary>
/// Summary of getData
/// </Summary>
Public class getData: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
// Context. Response. Write ("Hello World ");
// Set the query string
String strSql = "select ckrID, chrCarNumber, cncName, bcrName from T_CarNumberCategory, T_CheckResult, t_BusinessCategory where ckrcheckresult is null and cncID = ckrcarnumbercategoryid and region = bcrID ";
// 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 the database connection
OracleConnection conn = new OracleConnection (strConn );
Conn. Open ();
// Define the command line object,
OracleCommand cmd = new OracleCommand (strSql, conn );
// Define an adapter to fill the Datatable;
OracleDataAdapter adp = new OracleDataAdapter (cmd );
// Define a able and fill it with an adapter
DataTable dt = new DataTable ();
Adp. Fill (dt );
Context. Response. Write (JsonConvert. SerializeObject (dt ));
// The above is the datatable I found in the database, and then converts it to Json using a Json operation class library
/// Since you do not have a database environment, I copied the above string for your testing.
//// Because it is a double quotation mark, an error will be reported here, so I changed it to a single quotation mark.
//// However, when the client obtains json, it recognizes double quotation marks, so it has to be replaced... Heartbroken
// Var json = "[{'ckri': '000000', 'chrcarnumber': '000000', 'cname': 'auto', 'bcrname ': 'Exit inspection flag '}, {'ckri': '000000', 'chrcarnumber': 'asdfsadf', 'cname': 'auto', 'bcrname ': 'register registration'}, {'ckri': '123', 'chrcarnumber': '123', 'cname': 'auto', 'bcrname ': 'register registration'}, {'ckri': '123', 'chrcarnumber': '123asd ', 'cname': 'auto', 'bcrname ': 'register registration'}, {'ckri': '123', 'chrcarnumber': '123asdqw', 'cname': 'auto', 'bcrname ': 'register registration'}, {'ckri': '123', 'chrcarnumber': '123', 'cname': 'auto', 'bcrname ': 'register registration'}, {'ckri': '123', 'chrcarnumber': '123', 'cname': 'auto', 'bcrname ': 'registration registration'}, {'ckri': '123', 'chrcarnumber': '123', 'cname': 'embassy motor', 'bcrname ': 'Mark of pass of inspection issuance '}] ";
// Context. Response. Write (json. Replace ('\'','\"'));
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
The notes in the above server programs are very detailed. If you do not understand them, you can leave a message. The class library uses Newtonsoft. Json. dll. You can click it to download it from my online storage.-No fees ~ Kiss
The following is the client code:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> test </title>
<Script src = "jquery-1.7.1.js" type = "text/javascript"> </script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Table id = "data">
<Tr id = "tem">
<Td id = "ID">
Serial number
</Td>
<Td id = "CarNumber">
License plate number
</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 loading of a data.
SetTimeout (function () {$ ("# loading"). hide ();}, 1000 );
// Set the timer to call the method in milliseconds
SetInterval (SetData (), 1000 );
// Obtain data from the server and display it on the interface. Use the getJSON method.
Function SetData (){
$. GetJSON ("getData. ashx", null, function (obj ){
$ ("Tr"). eq (0). nextAll (). remove (); // Delete the tr except the template row
// Dynamically load the obtained data to the table
For (var I = 0; I <obj. length; I ++ ){
// Set the ID of article 4 to red (this can be used to modify the style based on the Content)
If (I = 3 ){
Row. find ("# ID" ).css ("color", "red ");
}
// Obtain the template row and copy a row
Var row = $ ("# tem"). clone ();
// Add a click event to the button of the new row
Row. find ("# btn input"). click ({name: obj [I]. CHRCARNUMBER, back: obj [I]. CKRID}, operation );
// Note: In jquery1.4.2, the above method will fail. I do not know the specific cause. It is no problem to write in 1.7.1.
// If the above Code does not 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.min...it wastes a long time to solve this problem, and it is strange that the old framework is used.
Row. find ("# ID"). text (obj [I]. CKRID); // the 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
// Add a new row to the table
Row. appendTo ("# data ");
}
});
}
// Obtain and display the passed parameters
Function operation (event ){
Alert (event. data. name );
Alert (event. data. back );
}
// Obtain data from the server and display it on the interface. It is implemented using ajax.
Function SetDataByAjax (){
$. Ajax ({
Type: "get", // set the call type
DataType: "json", // sets the Data Type
Url: "getData. ashx", // url
Complete: function () {$ ("# loading"). hide ()},
Success: function (obj ){
$ ("Tr"). eq (0). nextAll (). remove (); // Delete the tr except the template row
// Dynamically load the obtained data to the table
For (var I = 0; I <obj. length; I ++ ){
// Set the ID of article 4 to red (this can be used to modify the style based on the Content)
If (I = 3 ){
Row. find ("# ID" ).css ("color", "red ");
}
// Obtain the template row and copy a row
Var row = $ ("# tem"). clone ();
// Add a click event to the button of the new row
Row. find ("# btn input"). click ({name: obj [I]. CHRCARNUMBER, back: obj [I]. CKRID}, operation );
// Note: In jquery1.4.2, the above method will fail. I do not know the specific cause. It is no problem to write in 1.7.1.
// If the above Code does not 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. It wastes a long time to solve this problem, and it is strange that the old framework is used.
Row. find ("# ID"). text (obj [I]. CKRID); // the 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
// Add a new row to the table
Row. appendTo ("# data ");
}
}
});
}
</Script>
</Form>
</Body>
</Html>
The above is an example of automatically refresh the page. In the above example, you cannot control anything except JQuery. If it is good enough, you don't want to use this framework. You can write one by yourself. I am a beginner, but this can save a lot of trouble.
For a getJson method, you only need to give three parameters, and all the operations such as object creation, callback function, and parameter setting are done for you. This is worth learning. In normal times, we should consider refining common things into a method and put it into our own small code library.
Although the above Code is not very difficult, I personally feel that this is a milestone example of my understanding of ajax. An example can solve many of my doubts.
Start 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
