本例数据库操作使用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传递的参数名一致。

MVC3学习:利用mvc3+ajax实现全选和批量删除的更多相关文章

  1. php--jquery操作全选、批量删除、加减行

  2. AJAX实现弹窗显示详情,全选和批量删除

    以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...

  3. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  4. angularJS 全选反选批量删除

    <th> <label for="flag"> <span ng-hide="master">全选</span> ...

  5. jquery操作全选、批量删除、加减行

    --------------------------------------------------------------------------------------- html静态页面 --- ...

  6. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  7. Ado.net[登录,增删改查,Get传值,全选,不选,批量删除,批量更新]

    [虽然说,开发的时候,我们可以使用各种框架,ado.net作为底层的东西,作为一个合格的程序员,在出问题的时候我们还是要知道如何调试] 一.增删改查 cmd.ExecuteReader();执行查询, ...

  8. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

  9. c# 全选和批量修改

    //全选 function checkAll(){ var items = document.getElementsByTagName("input"); for(var i =0 ...

随机推荐

  1. vetur插件提示 [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives

    错误如下图所示: 错误提示: [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives.Re ...

  2. iframe父子元素获取

    jquery.js调用iframe父窗口与子窗口元素的方法 1. jquery在iframe子页面获取父页面元素代码如下: $("#objid",parent.document) ...

  3. oracle 数据库io 异常,错误代码17002 解决办法

    数据库使用一个月了,突然挂掉:错误代码17002 io异常:read timeout 解决: 1.登陆sql命令窗口 [oracle@hostname ~]$ sqlplus /nolog SQL*P ...

  4. Altera PLL应用中注意的问题

    无论是差分转单端信号还是单端信号转差分信号,都要都要用到altiobuf.而且在pin planner中要设置管脚的标准为差分的 而且要注意管脚的正负极性. 今天用FPGA做测试:把专门用于PLL的输 ...

  5. ASP.NET 日志组件Smart.LogNet.DLL 引用即可写入日志及读取日志

    借助LogNet组件,以后查看站点日志,再也不用去服务器下载了 日志组件:LogNet.DLL ,引用即可使用 写入方法: 1.LogNet.Log.WriteLog("日志标题" ...

  6. linux内核链表使用

    原文链接:http://blog.csdn.net/xnwyd/article/details/7359373 Linux内核链表的核心思想是:在用户自定义的结构A中声明list_head类型的成员p ...

  7. linux程序员的proc文件系统

    1) 设置core文件存放路径和文件名模式: 设置/proc/sys/kernel/core_pattern,如: echo "core" > /proc/sys/kerne ...

  8. Spring的下载与安装

    Spring是一个独立的框架,不依赖于任何Web服务器或容器.它既可在独立的JavaSE项目中使用,也可以在Java Web项目中使用. 下载和安装Spring框架可按如下步骤进行: 1.登录http ...

  9. CentOS和Ubuntu哪个好?

    CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照开放源代码规定释出的源代 ...

  10. html5 定位

    需要实现的功能:移动端的网页,能定位到中文地址. 百度地图能实现这样的功能. 之前精度差得原因是,我用自己的mac做服务器,用手机来浏览定位,这样只能定位到mac 的地址,mac上浏览器的地址就没准了 ...