MVC3学习：利用mvc3+ajax实现全选和批量删除

本例数据库操作使用EF code first;

先利用mvc自带的模板，先生成一个list视图，然后再手动添加复选框和删除按钮

<table>
    <tr>
        @*在标题行添加一个全选按钮*@
        <th>@Html.CheckBox("checkall")
        </th>
        <th>
            用户名
        </th>
        <th>
            密码
        </th>
        <th>
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
             @*此处添加复选框，并将ID号绑定到name属性上*@
            <td>@Html.CheckBox(item.Uid.ToString())
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UserName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PassWord)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Uid }) |
                @Html.ActionLink("Details", "Details", new { id = item.Uid }) 
            </td>
        </tr>
    }
</table>
@*添加一个删除按钮*@
<input type="submit" id="delall" value="删除所选" />

我取消掉了每一行上面的删除按钮，如果需要ajax实现单行删除的同学，请稳步 MVC3学习：利用mvc3+ajax实现删除记录

然后在此页面上编写JUery AJAX实现批量删除。

<script type="text/javascript">
    $(function () {
        //全选
        $("#checkall").click(function () {
            $("[type='checkbox']").attr("checked", $(this).attr("checked"));
        });

        $("#delall").click(function () {
            //确定至少选择一项
            if ($("[type='checkbox']:checked").length == 0)
                alert("请至少选择一项");
            //批量删除
            else if (confirm("真的要删除所有选择的记录吗？？？")) {
                $("[type='checkbox']:checked").each(function () {
                    var id = $(this).attr("name");
                    var tr = $(this).parent().parent();
                    $.post("delete", { id: id },
                    function (data) {
                        if (data == "-1") { alert("删除错误"); return false; }
                        else $(tr).remove();
                    });
                });
            }
        });
    });
</script>

每一行记录的ID号绑定在了复选框的name属性上，取出来后作为参数传递给控制器的delete方法进行处理。虽然每次只能删除一行记录，但通过JQuery的each方法可以实现循环删除。

然后编写控制器的delete方法

 public ActionResult delete(int id)
        {
            try
            {
                if (Request.IsAjaxRequest())
                {

                    Users u = db.Users.Find(id);
                    db.Users.Remove(u);
                    int n = db.SaveChanges();
                    return Content(n.ToString());
                }
                return Content("-1");
            }
            catch
            {
                return View();
            }
        }

此处利用EF code first的Find()、Remove()、SaveChange()等方法来实现一行记录的删除。利用Request.IsAjaxRequest()来判断是否进行ajax数据传递。

需要注意的是，delete方法的参数名，一定要和ajax传递的参数名一致。