1、Html代码,将所有CheckBox包含于删除表单,并且所有列表项的CheckBox使用相同的Name,并且Value设置为数据项主键ID

 @using (Html.BeginForm("Delete", null, FormMethod.Post, new { id = "DeleteForm" }))
 {
     @Html.AntiForgeryToken()
     <div id="table-scrollable" class="table-scrollable">
         <table class="table table-striped table-hover table-border-top">
             <thead>
                 <tr>
                     <th class="table-checkbox">
                         <input id="checkall" type="checkbox" class="group-checkable" />
                     </th>
                     <th>序号</th>
                     <th>
                         其它数据
                     </th>
                 </tr>
             </thead>
             <tbody>
                 @{ ;}
                 @foreach (var item in Model) {
                     <tr>
                         <td>
                             <input name="guids" type="checkbox" class="checkboxes" value="@item.GUID" />
                         </td>
                         <td>@(Model.StartItemIndex + i++)</td>
                         <td>
                             其它数据
                         </td>
                     </tr>
                 }
             </tbody>
         </table>
     </div>
 }

2、JS脚本,主要用于操作表头进行全选和取消全选,此处需注意,存在分页情况时,全选操作只针对当前页的列表项,不能选择未展示的数据;

 //表头CheckBox操作全选或取消全选
 $("#checkall").click(function () {
     var ischecked = this.checked;
     $("input:checkbox[name='guids']").each(function () {
         this.checked = ischecked;
     });
 });

同时,JS也负责表单提交前进行弹窗提醒,此处使用的是bootbox控件弹出提示窗,也可以使用其它弹窗组件

 $("#delete").click(function () {
     ;
     $("input:checkbox[name='guids']").each(function () {
         if (this.checked) count++;
     });
     ) {
         bootbox.dialog({
             size: "small",
             onEscape: "true",
             message: "你确定要批量删除勾选的 " + count + " 条记录吗?",
             title: "操作确认",
             buttons: {
                 OK: {
                     label: " 确定 ",
                     className: "red-haze fa fa-check ",
                     callback: function () {
                         $("#DeleteForm").submit();
                     }
                 },
                 Cancel: {
                     label: " 取消 ",
                     className: "green-jungle fa fa-times ",
                     callback: function () {
                     }
                 }
             }
         });
     }
     else {
         bootbox.dialog({
             size: "small",
             onEscape: "true",
             message: "请先选择你要删除的记录!",
             title: "操作提示",
             buttons: {
                 OK: {
                     label: " 确定 ",
                     className: "green-jungle fa fa-bell-o",
                     callback: function () {
                     }
                 }
             }
         });
     }
 });

3、Controller代码,通过List类型接收同名的表单数据项

         [HttpPost]
         [ValidateAntiForgeryToken]
         public ActionResult Delete(List<Guid> guids)
         {
             )
             {
                 db.TargetTable.Where(x => guids.Contains(x.GUID)).ToList().ForEach(x =>
                 {
                         db.TargetTable.Remove(x);
                 });
                 db.SaveChanges();
             }

             return Redirect(Request.UrlReferrer.ToString());
         }    

MVC列表页通过CheckBox进行批量选择删除的更多相关文章

  1. PHP+MySql+Bootstrap实现用户界面数据的删除、修改与批量选择删除——实例操作

    第一步:在数据库中建立要操作的信息表 如下图: 第二步:实现对该信息表中数据的删除功能 代码如下:main(主页面) <!DOCTYPE html><html>    < ...

  2. Android开发之ListView条目批量选择删除

    ListView实现的列表,假设是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验非常不好,也给用户带来了非常大的麻烦. 实现效果图 详细实现代码 select.xml 主布局 ...

  3. 更好列表页中一个航班.先unset删除数组中一个键值对,再追加,最后按键排序

    <?php $arr = array( '0' => array('item' => array( 'aa' => 'aaa', 'bb' => 'bbb' )), '1 ...

  4. Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页

    在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...

  5. python实现列表页数据的批量抓取练手练手的

    python实现列表页数据的批量抓取,练手的,下回带分页的 #!/usr/bin/env python # coding=utf-8 import requests from bs4 import B ...

  6. 通过angularjs的directive以及service来实现的列表页加载排序分页

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  7. 夺命雷公狗ThinkPHP项目之----企业网站18之网站配置列表页的完成

    我们点击下配置列表即可查看我们列表页的配置信息了: 其实这个最简单了,首先我们先来完成他控制器的代码: public function lists(){ $mod = M('Conf')->se ...

  8. 通过angularjs的directive以及service来实现的列表页加载排序分页(转)

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  9. Golang在京东列表页实践总结

    Golang在京东列表页实践总结 作者:张洪涛 10余年软件开发和设计经验,曾就职于搜狐.搜狗.前matrixjoy公司联合创始人.甘普科技CTO. 目前线上状态 基于搜索实现: 全量数据,搜索结果不 ...

随机推荐

  1. SPOJ - DQUERY 主席树

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=32356 Given a sequence of n numbers ...

  2. hdu 4005 The war

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4005 In the war, the intelligence about the enemy is ...

  3. 重启nginx后丢失nginx.pid解决

    /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

  4. Reactor构架模式

    http://www.cnblogs.com/hzbook/archive/2012/07/19/2599698.html Reactor框架是ACE各个框架中最基础的一个框架,其他框架都或多或少地用 ...

  5. 用WebStorm编辑Markdown

    前言[转http://blog.fens.me/webstorm-markdown/] WebStorm是一个非常高效的开发工具,特别对于Web前端的开发.Markdown流行,因为其简化了HTML的 ...

  6. HDU2829 Lawrence(斜率优化dp)

    学了模板题之后上网搜下斜率优化dp的题目,然后就看到这道题,知道是斜率dp之后有思路就可以自己做不出来,要是不事先知道的话那就说不定了. 题意:给你n个数,一开始n个数相邻的数之间是被东西连着的,对于 ...

  7. UITableView多选删除

    设置一个在编辑状态下点击可改变图片的cell FileItemTableCell.h #import <UIKit/UIKit.h> @interface FileItemTableCel ...

  8. Sql Server总结

     主键 主键就是数据行的唯一标识.不会重复的列,才能当主键.一个表可以没有主键,但是会非常难以处理,因此没有特殊理由表都要设定主键.主键有两种选用策略:业务主键和逻辑主键. 业务主键是使用有业务意义的 ...

  9. Add and Search Word - Data structure design

    https://leetcode.com/problems/add-and-search-word-data-structure-design/ Design a data structure tha ...

  10. lintcode:移动零

    题目 给一个数组 nums 写一个函数将 0 移动到数组的最后面,非零元素保持原数组的顺序 注意事项 1.必须在原数组上操作2.最小化操作数   样例 给出 nums = [0, 1, 0, 3, 1 ...