ASPNET异步删除和增加

function InitList() {
            $.getJSON("GetNewsList.ashx", {}, function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#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>");
                }
                $(".delete").click(function () {
                    var link = $(this);
                    if (confirm("确定要删吗？")) {
                        $.post("DeleteNews.ashx", { id: link.attr("id") }, function (data) {
                            if (data == "ok") {
                                link.parent().parent().fadeOut();
                            } else {
                                alert("删除失败");
                            }
                        });

                    }

                });
            });
        }

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

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

接下来说说异步增加

function InitAdd() {
            $("#AddNewsDiv").css("display", "none");
            $("#btnAdd").click(function () {
                $("#AddNewsDiv").css("display", "block");
                $("#AddNewsDiv").dialog({
                    title: "添加新闻",
                     600,
                    height: 400,
                    modal: true
                });
            });

            //表单校验
            $("#formAddNews").validate({
                rules: {
                    txtTitle: {
                        required: true,
                        maxlength: 32
                    },
                    txtPeople: {
                        required: true
                    },
                    txtContent: {
                        required: true
                    }
                },
                messages: {
                    txtTitle: "*",
                    txtPeople: "*",
                    txtContent: "*"
                },
                submitHandler: function (form) {
                    $("#formAddNews").ajaxSubmit({
                        url: "AddNews.ashx",
                        type: "POST",
                        success: function (data) {
                            if (data == "ok") {
                                $("#AddNewsDiv").dialog("close");
                                InitList();
                            }
                        }
                    });
                }
            });

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

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

<link href="../Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="../Content/themes/icon.css" rel="stylesheet" />
    
    <script src="../Scripts/jquery-1.8.2.min.js"></script>
    <script src="../Scripts/jquery.easyui.min.js"></script>
    <script src="../Scripts/MyAjaxForm.js"></script>
    <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: "添加新闻",
                       600,
                      height: 400,
                      modal: true
　　　　　　　　　　　}
还有一些属性，查查资料就行了。。。

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

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

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

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

吃午饭去了~~~