Mvc4.0之 checkbox实例详解

Checkbox是我们编成中时常会用到的，它的使用可以为我们带来很大的便捷，我们可以运用它从而实现数据的批量删除，然而在mvc4.0种如何实现该操作，其实也不难

看下面这个实例

·        View

从数据库中获取数据显示到界面

@modelIEnumerable<CompanyEmployeeTake_LeaveSystem.Models.tb_askForLeave>

@{

    ViewBag.Title = "AskForLeaveSubject";

}

@Scripts.Render("~/Scripts/jquery-1.7.1.min.js")

@Scripts.Render("~/Scripts/Home/AskForLeaveSubm.js")

<title>@ViewBag.Title</title>

<h2>邮件信息</h2>

@using (Html.BeginForm())

{

  <table>

  <tr>

    <th>

        @*@Html.ActionLink("删除选定邮件", "DeleteAskForLeave")*@

        <inputtype="submit"id="delete"value="删除"/>

    </th>

  </tr>

   <tr>

     <td>

          @Html.CheckBox("selectAll",false)

     </td>

      <td>

         @Html.DisplayNameFor(model => model.subject)

      </td>

      <td>

    

      </td>

   </tr>

   @foreach (var itemin Model)

   {

       <tr>

           <td>

           @Html.CheckBox(item.employeeNumber.ToString(),item.visible.Value)

         @*  @Html.CheckBoxFor(modelItem =>item.visible.Value, new

           {

              id=item.employeeNumber,   

              //value =item.visible.Value

            // onclick ="filterGrid()",

            //@checked ="checked"  

          })  *@

           </td>

           <td>

            @Html.DisplayFor(modelItem => item.subject)

           </td>

           <td>

             @Html.ActionLink("查看邮件","DetailAskForLeave",new { id= item.employeeNumber})

           </td>

       </tr>

   }

</table>

}

上面是从数据库中获取数据，然后动态的生成html并把它显示到页面中，最上面那句是一个接口，后面跟着你实体中相对应的数据库表，意思是从这个接口中获取数据，然后在Model中遍历数据将其显示出来，点击最顶端的checkbox,可以实现全选和反选，js代码我会在后面显示出来，视图界面如下:

·        controll层

 [AllowAnonymous]

       [HttpPost]

       public ActionResultAskForLeaveSubject(FormCollection form)

      {

           varwinnars = from x inform.AllKeys

                        where form[x] != "false"

                           select x;//找到你在视图中选定的要删除的数据

          foreach (var idin winnars)

             {

                  if(id != "selectAll")

                  {

                       intnumber = int.Parse(id);

                      var deleteData =_db.tb_askForLeave.First(m => m.employeeNumber == number);//找到要删除的数据

                      _db.tb_askForLeave.DeleteObject(deleteData);

                  }

                 continue;

             }

            _db.SaveChanges();

             returnRedirectToAction("AskForLeaveSubject");

        }

在controll层中用于实现你在视图中选定的要删除的数据，然后遍历它，由于第一个checkbox是用于实现全选与反选，不含有任何数据，故遍历删除时需要把它排除，之后保存数据,返回你要跳转的界面。

 

JS实现全选与反选:

function selectorunselect() {

        varisDefault = document.getElementById("selectAll").checked;

        varinputs = document.getElementsByTagName('input');

        for (var i = 0; i < inputs.length; i++) {

            if(inputs[i].type == "checkbox") {

                if(isDefault == true) {

                    inputs[i].checked = true;

                }

                else{

                    inputs[i].checked = false;

                }

            }

        }

    $("#selectAll").click(function () {

        selectorunselect();

});

全选后,点击删除即可以全部删除数据，如图：

对于刚开始接触MVC这一块的人，可能会有点难以理解，因为在上述这个例子中其实涉及到的知识还是比较广泛的，首先你的了解razor,在MVC4.0中已经用razor完全代替了asp，它里面封装了许多方法，可以让你实现同一功能时写更少的代码，其次这里还运用到了linq查询数据，如:          varwinnars =from xinform.AllKeys

                         where form[x] != "false"

                           select x;

在实现全选时还得运用js,虽说看起来有一点复杂，但如果你认真分析的话还是挺有意思的，我刚开始接触这一块时，由于没有人指导，所以走了不少弯路，我希望通过这个例子，能让大家少走一点点弯路。不过还是得认真去分析这段代码，了解每一行的思路，最后自己再动手去操作下，相信你可以获得很多的，只要你肯多花时间，我想你所遇到的困难基本上都能解决。这是我自己在最近这段期间的确真感受，以前当我运到一个问题时，就担心自己无法解决，但事实上并非如此。当你遇到问题时，不要立刻就去求教别人，如果项目不是很紧的话，你可以多花一些时间与精力去分析，我想你肯定能收获不少的。即使不能完全解决，但对这个问题你也会更加深入的了解，最后在经别人稍微指点下，也许你会恍然大悟，再接下来你会发现这个问题就这样被你迎刃而解了，那种喜悦只有自己经历过才能体会到。祝大家在学业和事业上双丰收哦