ASPNET asynchronously deletes and increments

1 functioninitlist () {2$.getjson ("Getnewslist.ashx", {},function(data) {3                  for(vari = 0; i < data.length; i++) {4$ ("#tbData"). Append ("<tr><td>" + data[i].id + "</td><td>" + Data[i].title + "</td><td > "+ data[i]. Date + "</td><td>" + data[i].people + "</td><td><a href= ' javascript:void (0) ' > details </a ><a href= ' javascript:void (0) ' > Modify </a><a class= ' delete ' href= ' javascript:void (0) ' id= ' + data[i].id + "> Delete </a></td></tr>");5                 }6$ (". Delete"). Click (function () {7                     varlink = $ ( This);8                     if(Confirm ("Are you sure you want to delete it?" ")) {9$.post ("Deletenews.ashx", {id:link.attr ("id")},function(data) {Ten                             if(data = = "OK") { One Link.parent (). Parent (). FadeOut (); A}Else { -Alert ("Delete failed"); -                             } the                         }); -  -                     } -  +                 }); -             }); +}

First, the data in the database is displayed in the page, this is relatively simple ~

Delete is to register the event for the Delete button, the ID of this data is asynchronously uploaded to the background, if the background is successful, the row will be deleted, do not need to refresh the page, the user experience will be better. Specific code :var link = $ (this);   ;Link.parent (). Parent (). FadeOut (); Because in the $.post () method, $ (this) cannot be positioned to the element that triggered the event, so the Var is taken to this element first outside of the method. FadeOut () method is a good method of jquery encapsulation, the effect is good. The parent () method is to find its own parental element.

Now, let's talk about asynchronous increments.

1 functionInitadd () {2$ ("#AddNewsDiv"). CSS ("display", "none");3$ ("#btnAdd"). Click (function () {4$ ("#AddNewsDiv"). CSS ("Display", "block");5$ ("#AddNewsDiv"). dialog ({6Title: "Add News",7width:600,8height:400,9ModaltrueTen                 }); One             }); A  -             //Form Validation -$ ("#formAddNews"). Validate ({ the rules: { - Txttitle: { -Requiredtrue, -Maxlength:32 +                     }, - txtpeople: { +Requiredtrue A                     }, at txtcontent: { -Requiredtrue -                     } -                 }, - messages: { -Txttitle: "*", inTxtpeople: "*", -Txtcontent: "*" to                 }, +Submithandler:function(form) { -$ ("#formAddNews"). Ajaxsubmit ({ theURL: "Addnews.ashx", *Type: "POST", $Successfunction(data) {Panax Notoginseng                             if(data = = "OK") { -$ ("#AddNewsDiv"). Dialog ("Close"); the initlist (); +                             } A                         } the                     }); +                 } -});

First, the foreground was originally prepared to add the div hidden, through the CSS property "display": "None" on the line

Click on the "Add News" button to bounce the div out, here we use a jquery-based plugin, Easyui. This plugin makes it easy to create forms with JavaScript, and it's pretty. Next talk about how this plugin is used:

1 <link href= ". /content/themes/default/easyui.css "rel=" stylesheet "/>2     <link href=". /content/themes/icon.css "rel=" stylesheet "/>3     4     <script src=". /scripts/jquery-1.8.2.min.js "></script>5     <script src=". /scripts/jquery.easyui.min.js "></script>6     <script src=". /scripts/myajaxform.js "></script>7     <script src=". /scripts/jquery.validate.js "></script>

First, the main file of jquery (1.8 usable, 1.10 not measured) is introduced, then the Easyui is introduced, and then the Easyui style sheet is introduced: Themes/default/easyui.css and themes/icon.css the two

Because we have to verify the form and submit the form, so there are two JS files below.

Easyui is really simple.

  $ ("#AddNewsDiv"). dialog ({                      title: "Add News",                      width:600, 
        
          height:400
         ,true
}
There are some properties, check the information on the line ...

        

Then we register the event for the OK button in the div and send an additional request asynchronously to the background

Before sending a request, we need to check the form first

So we used the Jquery.validate plugin.

The code is also on the above, plus a bit of comment ... The meaning is still very clear, not detailed.

Have lunch to go to ~ ~ ~

ASPNET asynchronously deletes and increments