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

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

<input type="checkbox" id="one"><button id="remove">全选删除</button>

视图部分代码：

<table class="table table-striped table-dark">
    <thead class="thead-light">
        <tr>
            <td>选择/全选 @*<input type="checkbox" id="checkall" name="checkall" />*@</td>
            <td>编号</td>
            <td>姓名</td>
            <td>部门</td>
            <td>性别</td>
            <td>账号</td>
            <td>密码</td>
            <td>照片</td>
            <td>备注</td>
            <td>该用户拥有的角色</td>
            <td>设置角色</td>
            <td>修改</td>
            <td>删除</td>
        </tr>
    </thead>
    @foreach (var item in Model)
    {
        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox" name="checkbox" value="@item.ID" id="@item.ID"/>
                    @*<input type="hidden" id="tempString" name="tempString" />*@
                </td>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.Departments.Name</td>
                <td>@(item.Sex == false ? "女" : "男")</td>
                <td>@item.Account</td>
                <td>@item.Pwd</td>
                <td>
                    <img src="~/images/users/@item.Photo" style="50px;height:50px" />
                </td>
                <td>@item.Remark</td>
                <td>
                    @foreach (var items in item.R_User_Roles)
                    {
                        @items.Roles.Name;
                        @*<a href="/UserInfo/DeleteRole?id=@items.ID&&rid=@items.RoleID" data-toggle="modal" data-target="#deleteConfirmationModal">Delete</a>*@
                        <a href="/UserInfo/DeleteRole?id=@items.ID&&rid=@items.RoleID" onclick="return confirm('确定是否删除 @item.Name 的 @items.Roles.Name 角色记录?');"><span class="glyphicon glyphicon-remove"></span></a>
                        <br />
                    }
                </td>
                <td>
                    @Html.ActionLink("设置角色", "SetRole", "UserInfo", new { id = @item.ID }, new { @class = "btn btn-succues" })
                </td>
                <td>
                    @Html.ActionLink("修改", "SetEidt", "UserInfo", new { id = @item.ID }, new { @class = "btn btn-succues" })
                </td>
                <td>
                    @Html.ActionLink("删除", "RemoveRole", "UserInfo", new { id = @item.ID, Did = @item.DepartmentID }, new { @class = "btn btn-succues", onclick = "return confirm('确定是否删除此笔记录?')" })
                </td>
            </tr>
        </tbody>
    }
</table>

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方法设置全选可以看看这篇文章：https://www.cnblogs.com/season-huang/p/3360869.html

步骤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" });

        }

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