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传递的参数名一致。
MVC3学习:利用mvc3+ajax实现全选和批量删除的更多相关文章
- php--jquery操作全选、批量删除、加减行
- AJAX实现弹窗显示详情,全选和批量删除
以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...
- 关于jquery全选反选 批量删除的一点心得
废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...
- angularJS 全选反选批量删除
<th> <label for="flag"> <span ng-hide="master">全选</span> ...
- jquery操作全选、批量删除、加减行
--------------------------------------------------------------------------------------- html静态页面 --- ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- Ado.net[登录,增删改查,Get传值,全选,不选,批量删除,批量更新]
[虽然说,开发的时候,我们可以使用各种框架,ado.net作为底层的东西,作为一个合格的程序员,在出问题的时候我们还是要知道如何调试] 一.增删改查 cmd.ExecuteReader();执行查询, ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
- c# 全选和批量修改
//全选 function checkAll(){ var items = document.getElementsByTagName("input"); for(var i =0 ...
随机推荐
- 介绍用C#和VS2015开发基于Unity架构的2D、3D游戏的技术
[Unity]13.3 Realtime GI示例 摘要: 分类:Unity.C#.VS2015 创建日期:2016-04-19 一.简介 使用简单示例而不是使用实际示例的好处是能让你快速理解光照贴图 ...
- vue的cli中引入css文件
在public文件中创建一个文件夹css,放进reset.css 在main.js中引入即可 import '../public/css/reset.css'就可以啦
- laravel 5.1 简单配置例子
这里演示5.1版本 一.数据库配置 .env文件(也可以直接修改config/database.php) DB_HOST=localhost DB_DATABASE=test //数据库名称 DB_ ...
- Path类对路径字符串的操作
在写程序时,不时会用到处理文件路径的问题,例如:取得扩展名.从路径中取出文件名.路径合并.取出或者去年扩展名等.这些功能都可以通过System.IO.Path类提供的方法来实现.这些相关功能用过多次了 ...
- SET FOREIGN_KEY_CHECKS=0;在Mysql中取消外键约束
Mysql中如果表和表之间建立的外键约束,则无法删除表及修改表结构. 解决方法是在Mysql中取消外键约束: SET FOREIGN_KEY_CHECKS=0; 然后将原来表的数据导 ...
- Opencv打开摄像头,读不到图像,一般来说先读取第一帧,舍弃,然后就正常了
舍弃第一帧的程序: cap >> img; cv::waitKey(100); if (cvWaitKey(5) == 27) break; cap >> img;
- 安装Chrome浏览器
Ubuntu 16.04下安装64位谷歌Chrome浏览器 在 Ubuntu 16.04 中,要想使用谷歌的 Chrome 浏览器,可以通过命令行的方式手动安装. 1.进入 Ubuntu 16.04 ...
- ora-12154 TNS:无法处理服务名疑难处理
折腾了几天的PLSQL,终于解决这个问题,在此分享给需要的朋友 服务器:WindowsServer2008(64位操作系统).Win7(64位操作系统) Oracle版本:10.2.0 问题:安装完O ...
- 用 select 语句实现递归的方法
with Test_Recursion(Id,ParentId)AS(select Id,ParentId from [V_KPI_DetailsActivities] where ParentId ...
- KNIME + Python = 数据分析+报表全流程
Python 数据分析环境 数据分析领域有很多可选方案,例如SPSS傻瓜式分析工具,SAS专业性商业分析工具,R和python这类需要代码编程类的工具.个人选择是python这类,包括pandas,n ...