First, create a table with three fields in the database to store the user name and comment information. The ID is only used to set the unique identifier, so set it to an integer auto-increment field.
To create an HTML page, just pull a few HTML controls to display them. Note that there is a <Table> tag at the top of the page to hold comments.
HTML pageCodeThis is simple:
<Body> <Table id = "room"> </table> <div> Username: <input id = "text1" type = "text"/> <br/> information: <textarea id = "textarea1" Cols = "20" name = "S1" rows = "5"> </textarea> <br/> <input id = "button1" type = "button" value = "Submit"/> </div> </body>
After loading the page, you need to display the existing comments from the database.ProgramName: bodyload. ashx. This background processing program reads all the comment information in the database and loads it to the display page. Of course, I am simply using | Mark to differentiate the comment of each user, the @ mark is used to differentiate user names and information, so it is not very rigorous. Data Operations use a strong dataset.
The background processing code for obtaining all comment information is as follows:
Using system; using system. collections. generic; using system. LINQ; using system. web; using _ 20100921web. datasetmsgtableadapters; using system. text; namespace _ 20100921web {// <summary> // bodyload abstract description /// </Summary> public class bodyload: ihttphandler {public void processrequest (httpcontext context) {context. response. contenttype = "text/plain"; t_msgtableadapter adapter = new t_msgtableadapter (); stringbuilder sb = new stringbuilder (); datasetmsg. t_msgdatatable table = adapter. getdata (); foreach (var v in table) {sb. append (v. username); sb. append ("@"); sb. append (v. message); sb. append ("|");} string result = sb. tostring (); context. response. write (result) ;}public bool isreusable {get {return false ;}}}}
The front-end calls jquery code to read comments during page loading. Here we use Ajax in jquery, which is actually very simple. It just calls $ in jquery. the post () method can be implemented, and the method is actually called $. ajax () method.
The jquery code at the front end is as follows:
$. Post ("bodyload. ashx ", function (data, state) {If (State =" success ") {var msgarr = data. split ("|"); For (VAR I = 0; I <msgarr. length; I ++) {If (msgarr [I]. length = 0) {return;} var MSG = msgarr [I]. split ("@"); var res = "<tr> <TD>" + MSG [0] +: </TD> <TD> "+ MSG [1] +" </TD> </tr> "; $ (" # Room "). append (RES );}}});
Then, you can process the inserted data after each user input and the comment content displayed after refreshing the page. You need to add another background processing program named update. ashx is used to insert data to the database in the background.
The background processing code is as follows:
Using system; using system. collections. generic; using system. LINQ; using system. web; using _ 20100921web. datasetmsgtableadapters; namespace _ 20100921web {// <summary> // Summary of update /// </Summary> public class update: ihttphandler {public void processrequest (httpcontext context) {context. response. contenttype = "text/plain"; string username = context. request ["username"]; string MSG = context. request ["MSG"]; t_msgtableadapter adapter = new t_msgtableadapter (); adapter. insert (username, MSG);} public bool isreusable {get {return false ;}}}}
The last step is to upload data to the background at the front end and update the comment information:
$ ("# Button1 "). click (function () {var username = $ ("# text1 "). val (); var MSG = $ ("# textarea1 "). text (); $. post ("Update. ashx ", {" username ": username," MSG ": MSG}, function (data, States) {If (States =" success ") {var res = "<tr> <TD>" + username + "said: </TD> <TD>" + MSG + "</TD> </tr> "; $ ("# Room "). append (RES );}})}) 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
