首页 > 代码库 > ASPNET异步删除和增加
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 =http://www.mamicode.com/="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: true10 });11 });12 13 //表单校验14 $("#formAddNews").validate({15 rules: {16 txtTitle: {17 required: true,18 maxlength: 3219 },20 txtPeople: {21 required: true22 },23 txtContent: {24 required: true25 }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 =http://www.mamicode.com/="ok") {38 $("#AddNewsDiv").dialog("close");39 InitList();40 }41 }42 });43 }44 });
首先将前台原先准备用来增加的div隐藏，通过css属性 "display":"none" 就行了
点击“增加新闻”按钮，就将div弹出来，这里我们用到了基于jQuery的一个插件，easyUI。这个插件可以用JavaScript很方便的创建窗体，而且还挺美观。接下来说说这个插件的使用方法：
1 <link href="http://www.mamicode.com/Content/themes/default/easyui.css" rel="stylesheet" />2 <link href="http://www.mamicode.com/Content/themes/icon.css" rel="stylesheet" />3 4 <script src="http://www.mamicode.com/Scripts/jquery-1.8.2.min.js"></script>5 <script src="http://www.mamicode.com/Scripts/jquery.easyui.min.js"></script>6 <script src="http://www.mamicode.com/Scripts/MyAjaxForm.js"></script>7 <script src="http://www.mamicode.com/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插件
代码也在上面有，还加了点注释了。。。意思还是很一目了然的嘛，不详述了。
吃午饭去了~~~
ASPNET异步删除和增加
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。