Ajax implements interaction between editable tables and databases

Source: Internet
Author: User

In the previous blog, you can click the table editing function through jquery. This blog will continue to expand and interact with the database on the basis of this function to implement real editable editing.

For traditional web pages, if data needs to be updated, the whole page needs to be updated. Ajax can implement asynchronous updates by performing a small amount of data exchange with the server in the background, it is a technology that updates some webpages without loading the entire webpage.

This blog will upload the source code of the table that can be edited in my project. It continues to enrich the editing effect in the previous blog and interacts with the database to achieve real editable.

Code of the HTML page:

<Div class = "span9"> <% -- display prompt information -- %> <asp: Label id = "label1" runat = "server" text = "Description: click the module name to modify it. Press ENTER or click other places to confirm the modification. ESC cancels the editing. "Forecolor =" red "> </ASP: Label> <% -- partial update -- %> <asp: scriptmanager id =" scriptmanager1 "runat =" server "> </ASP: scriptmanager> <asp: updatepanel id = "updatepanel1" runat = "server"> <contenttemplate> <% -- table -- %> <Table class = "Table-striped"> <tr> <TH> Module ID </Th> <TH> Module name </Th> <TH> Delete </Th> </tr> <% -- bind to repeater -- %> <asp: repeater id = "rptmodel" runat = "server"> <itemtemplate> <tr> <TD> <% # eval ("mdlid") %> </TD> <TD class = "modelname"> <% # eval ("mdlname") %> </TD> <asp: linkbutton id = "lbtndelete" runat = "server" onclick = "lbtndelete_click" onclientclick = "Return confirm ('Do you want to delete it? ') "Commandargument =' <% # eval (" mdlid ") %> '> Delete </ASP: linkbutton> </TD> </tr> </itemtemplate> </ASP: repeater> </table> </contenttemplate> </ASP: updatepanel> <% -- Display error message -- %> <Div id = "test"> </div> <% -- add Module name -- %> <p> <asp: label id = "label2" runat = "server" text = "module name"> </ASP: Label> <asp: textbox id = "txtmodelname" runat = "server"> </ASP: textbox> <asp: button id = "btnaddmodel" usesubmitbehavior = "false" runat = "server" text = "add" cssclass = "BTN-Info" onclick = "btnaddmodel_click"/> </P> </div>

Code for binding information:

Protected void page_load (Object sender, eventargs e) {If (! Page. ispostback) {// bind the module information modelinfomgr = new modelinfomgr (); datatable dt = new datatable (); // query all module information dt = modelinfomgr. selectall (); // bind rptmodel. datasource = DT; rptmodel. databind ();}}

The first thing to do is JavaScript code.

$ (Function () {$ (". modelname "). click (function () {// Add the Click Event var objtd =$ (this) to the modelname tag on the page; // alert ("heheh"); // after clicking, text Box var oldtext = $ (this ). text (); // Save the original text var input =$ ("<input type = 'text' value = '" + oldtext + "'/> "); // The text box's HTML code objtd.html (input); // TD changes to text // sets the text box's Click Event to invalid input. click (function () {return false ;}); // set the text box style input.css ("border-width", 0); // The border is 0 input.css ("margin", 0); input.css ("padding", 0); input.css ("color", "black"); // input. height (objtd. height); // The height of the text box is the height of the current TD // input. width (objtd. width); input. trigger ("Focus "). trigger ("select"); // select all // when the text box loses focus, it changes to text input. blur (function () {var newtext = $ (this ). val (); var input_blur = $ (this); // objtd.html (newtext ); // submit the database operation if (oldtext! = Newtext) {// obtain the ID var modelid corresponding to the module name =$. trim (objtd. prev (). text (); // Ajax asynchronously changes the database var url = ".. /handler/changemodelname. ashx? Modelname = "+ encodeuri (newtext) +" & modelid = "+ modelid +" & t = "+ new date (); $. get (URL, function (data) {If (Data = "false") {$ ("# test "). text ("failed to modify Module name, check whether it is repeated"); input_blur.trigger ("Focus "). trigger ("select"); // select all text boxes} else {$ ("# test "). text (""); objtd.html (newtext) ;}}) ;}else {// The text width is the same as that of the front and back, and the text width is changed to the tag objtd.html (newtext );}}); // press input on the keyboard in the text box. keydown (function () {var jianzhi = Event. keycode; var input_keydown = $ (this); Switch (jianzhi) {Case 13: // press enter to save and modify var newtext = input_keydown.val (); // modified name // submit the database operation if (oldtext! = Newtext) {// obtain the ID var modelid corresponding to the module name =$. trim (objtd. prev (). text (); // Ajax asynchronously changes the database var url = ".. /handler/changemodelname. ashx? Modelname = "+ encodeuri (newtext) +" & modelid = "+ modelid +" & t = "+ new date (); $. get (URL, function (data) {If (Data = "false") {$ ("# test "). text ("failed to modify Module name, check whether it is repeated"); input_keydown.trigger ("Focus "). trigger ("select"); // select all text boxes} else {$ ("# test "). text (""); objtd.html (newtext) ;}}) ;}else {// The text width is the same as that of the front and back, and the text width is changed to the tag objtd.html (newtext);} break; Case 27: // Press ESC to cancel modification. Change the text box to text $ ("# test "). text (""); objtd.html (oldtext); break ;}}) ;}) ;}; // mask the Enter key $ (document ). keydown (function (event) {Switch (event. keycode) {Case 13: Return false ;}});

 

Handler file:

 

Public void processrequest (httpcontext context) {context. response. contenttype = "text/plain"; string modelid = context. request. querystring ["modelid"]; string modelname = context. server. urldecode (context. request. querystring ["modelname"]); // change the module name modelinfomgr = new modelinfomgr (); modelinfo = new modelinfo (); modelinfo. id = modelid; modelinfo. name = modelname; // determine whether the IF (modelinfomgr. exists (modelinfo) {context. response. write ("false"); return;} bool flag = modelinfomgr. update (modelinfo); If (FLAG) {context. response. write ("true");} else {context. response. write ("false ");}}

 

:

In the prompt, the above Code can be modified by clicking the module name, and press ENTER or click somewhere else to confirm the modification, and Press ESC to cancel the editing.

This is the method of instructor Niu Yi. I hope that, in the future study, I can understand this method and update my knowledge and practices. I also hope that I can get guidance and tips from Daniel. Thanks again.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.