MVC结合Ajax实现简单的批量删除

给一个checkbox复选框以及普通的button按钮。一个负责全选，一个负责触发ajax事件

"checkbox" id="one">"remove">全选删除

视图部分代码：

class="table table-striped table-dark">
    class="thead-light">
        
    @foreach (var item in Model)
    {
        "tb">
            
    }

            
选择/全选 @*"checkbox" id="checkall" name="checkall" />*@
            
编号
            
姓名
            
部门
            
性别
            
账号
            
密码
            
照片
            
备注
            
该用户拥有的角色
            
设置角色
            
修改
            
删除
        
    

                

                    "checkbox" name="checkbox" value="@item.ID" id="@item.ID"/>
                    @*"hidden" id="tempString" name="tempString" />*@
                
                
@item.ID
                
@item.Name
                
@item.Departments.Name
                
@(item.Sex == false ? "女" : "男")
                
@item.Account
                
@item.Pwd
                

                    "~/images/users/@item.Photo" style="width:50px;height:50px" />
                
                
@item.Remark
                

                    @foreach (var items in item.R_User_Roles)
                    {
                        @items.Roles.Name;
                        @*"/UserInfo/DeleteRole?id=@items.ID&&rid=@items.RoleID" data-toggle="modal" data-target="#deleteConfirmationModal">Delete*@
                        "/UserInfo/DeleteRole?id=@items.ID&&rid=@items.RoleID" onclick="return confirm('确定是否删除 @item.Name 的 @items.Roles.Name 角色记录?');">class="glyphicon glyphicon-remove">
                        

                    }
                
                

                    @Html.ActionLink("设置角色", "SetRole", "UserInfo", new { id = @item.ID }, new { @class = "btn btn-succues" })
                
                

                    @Html.ActionLink("修改", "SetEidt", "UserInfo", new { id = @item.ID }, new { @class = "btn btn-succues" })
                
                

                    @Html.ActionLink("删除", "RemoveRole", "UserInfo", new { id = @item.ID, Did = @item.DepartmentID }, new { @class = "btn btn-succues", onclick = "return confirm('确定是否删除此笔记录?')" })
                
            
        

js部分代码：

步骤1：给checkbox设置全选

解析：通过ID选择器，触发点击事件。通过伪类选择器拿到所有checkbox，其中gt(0)

解释一下juqery.gt：官方的说法是：gt选择器选取 index 值高于指定数的元素。

也就是说，这里checkbox是获得所有从索引从0开始往后的所有checkbox（除开设置全选的复选框外）

步骤2：通过prop()方法设置或返回被选元素的属性和值，存在两个参数，参数1：checkbox属性checkbox，参数2：选中值为checked

因为，对于checkbox来说，checked=checked就是选中状态。

$("#one").click(function () {
        $(":input:checkbox:gt(0)").prop("checked", $(this).prop("checked"))
    });

如果想要通过attr方法设置全选可以看看这篇文章：

步骤3：触发remove点击事件

步骤4：创建一个空数组，存储用户选中的所有ID

步骤5：拿到选中的所有checkbox，定义一个id存储起来，存放到刚刚设置的数组里面

var ids = new Array();//创建一个数组
        $("input:checkbox:gt(0):checked").each(function () {
            var id = $(this).val();
            ids += id + ',';
        });

步骤6：通过confirm，判断用户是否选择删除，如果确定返回true执行ajax操作，反之返回false

步骤7：通过ajax异步访问后台控制器，把存储id数组传到controller层。这里接收的数据类型为json，如果返回的状态码为10000则表示删除成功，反之删除失败

var msg = "确定要删除吗？"
        if (confirm(msg) == true) {
            //异步访问批量删除方法， 把数组传入controller层
            $.ajax({
                type: "post",
                url: "delete",
                data: { ids: ids },
                success: function (data) {
                    if (data.state == 10000) {
                        alert("删除成功!");
                        location.reload();
                    }
                    else {
                        alert("删除失败!");
                    }
                }
            });
        }

控制器代码：

步骤8：写一个返回类型为JsonResult的方法，接收ajax传递的参数，记住，客户端传递的数据类型是什么，服务器定义的参数就要是什么。

步骤9：截取最后一个字符

步骤10：接收截取后的ID数组，split：将字符串分割成字符串数组

步骤11：int.parse将string转为int接收，通过id进行删除就看了！！！

public JsonResult delete(string ids)
        {
            ids = ids.Substring(0, ids.Length - 1); //删除字符串最后一个字符
            string[] datalist = ids.Split(',');
            foreach (var item in datalist)
            {
                int daa = int.Parse(item);
                var da = db.UserInfos.FirstOrDefault(u=>u.ID==daa);
                db.UserInfos.Remove(da);
            }
            db.SaveChanges();
            return Json(new { state = "10000" });

        }

每天进步一点点，有不足的地方希望大佬指正，互相学习哈哈哈。。。