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传递的参数名一致。