ASPNET异步删除和增加

 1 function InitList() {
 2             $.getJSON("GetNewsList.ashx", {}, function (data) {
 3                 for (var i = 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)‘>详情</a><a href=‘javascript:void(0)‘>修改</a><a class=‘delete‘ href=‘javascript:void(0)‘ id=" + data[i].ID + ">删除</a></td></tr>");
 5                 }
 6                 $(".delete").click(function () {
 7                     var link = $(this);
 8                     if (confirm("确定要删吗?")) {
 9                         $.post("DeleteNews.ashx", { id: link.attr("id") }, function (data) {
10                             if (data == "ok") {
11                                 link.parent().parent().fadeOut();
12                             } else {
13                                 alert("删除失败");
14                             }
15                         });
16 
17                     }
18 
19                 });
20             });
21         }

先是在页面里显示数据库中的数据,这个比较简单~

删除,就是为删除按钮注册事件,将这条数据的id异步传到后台,如果后台返回成功的话,就将这行删除,并不需要刷新页面,用户体验会更好。具体代码var link = $(this);link.parent().parent().fadeOut();  因为$.post()方法中,$(this)不能定位到触发事件的元素,所以在方法外就先var 取到这个元素。  fadeOut()方法是Jquery封装好的方法,效果还是不错的。   .Parent()方法是找自己的父级元素。

 

 

 

接下来说说异步增加

 1 function InitAdd() {
 2             $("#AddNewsDiv").css("display", "none");
 3             $("#btnAdd").click(function () {
 4                 $("#AddNewsDiv").css("display", "block");
 5                 $("#AddNewsDiv").dialog({
 6                     title: "添加新闻",
 7                     width: 600,
 8                     height: 400,
 9                     modal: true
10                 });
11             });
12 
13             //表单校验
14             $("#formAddNews").validate({
15                 rules: {
16                     txtTitle: {
17                         required: true,
18                         maxlength: 32
19                     },
20                     txtPeople: {
21                         required: true
22                     },
23                     txtContent: {
24                         required: true
25                     }
26                 },
27                 messages: {
28                     txtTitle: "*",
29                     txtPeople: "*",
30                     txtContent: "*"
31                 },
32                 submitHandler: function (form) {
33                     $("#formAddNews").ajaxSubmit({
34                         url: "AddNews.ashx",
35                         type: "POST",
36                         success: function (data) {
37                             if (data == "ok") {
38                                 $("#AddNewsDiv").dialog("close");
39                                 InitList();
40                             }
41                         }
42                     });
43                 }
44             });

首先将前台原先准备用来增加的div隐藏,通过css属性 "display":"none"  就行了

点击“增加新闻”按钮,就将div弹出来,这里我们用到了基于jQuery的一个插件,easyUI。这个插件可以用JavaScript很方便的创建窗体,而且还挺美观。接下来说说这个插件的使用方法:

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>

首先,引入jQuery的主文件(1.8可用,1.10实测不行),然后引入easyUI,然后引入easyUI的样式表:themes/default/easyui.css 和 themes/icon.css  这两个

因为我们接下来还要校验表单和提交表单,所以下面还有两个js文件。

easyUI真的很简单

            $("#AddNewsDiv").dialog({
                      title: "添加新闻",
                      width: 600,
                      height: 400,
                      modal: true
           }
还有一些属性,查查资料就行了。。。

然后我们再为div中的确定按钮注册事件,异步向后台发送增加的请求

发送请求之前,我们需要先校验表单

所以我们用到了jquery.validate插件

代码也在上面有,还加了点注释了。。。意思还是很一目了然的嘛,不详述了。

吃午饭去了~~~

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。