mvc5 +ef 前台checkbox批量送后台执行
先看页面图片
1.页面上有一个viewbag.rolename="代理商",这是一个变量。
2.读的一个menus的数据表。
3.有一个全选操作。
4.送到后台,需要一,送变理rolename=viewbag.rolename, 再送一组选择好的checkbox的数组值。
一、先实现GET方法数据表menus,显示所有的菜单表中的数据,并在前面加上checkbox
1.GET方法。
// GET: Menus //public async Task<ActionResult> Permissions(string roleNamel) public ActionResult Permissions(string roleNamel) { ViewBag.rolename = roleNamel; //将送过来的变量rolename作为viewbag.rolenae值送到前台 if (string.IsNullOrWhiteSpace(roleNamel)) //如果空值rolename { return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest); } var listMenu = db.Menus.OrderBy(s => s.Order); //变量listMenud,取menus表按order值排序。 return View(listMenu.ToList()); //返回 //return View(await db.Menus.ToListAsync()); }
2.前台。
@model IEnumerable<jsdhh2.Models.Menu> @{ ViewBag.Title = "角色关联用户"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; //设后台布局 } <!-- Content Header (Page header) --> <section class="content-header"> <h1></h1> <h1> @ViewBag.rolename <small>分配权限菜单</small> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li> <li class="active">Here</li> </ol> </section> <!--end Content Header (Page header) --> <!-- Main content --> <section class="content"> <a class="btn btn-primary" href="/Role/List">返回</a> <button id="btn11" class="btn btn-info">授权</button> //ID值为btn11,用于关联下面的js(#btn11) <h1></h1> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">所有菜单请选择打上勾</h3> </div> <!-- /.box-header --> <div class="box-body table-responsive no-padding"> <table class="table table-hover"> <tbody> <tr> <th><input id="selectAll" name="selectAll" type="checkbox" value="true" onclick="changeState(this.checked)" /><input name="selectAll" type="hidden" value="false" />选择</th> //通过onclick 来联接JS,用id和name值操作js,实现全选和全取消 <th> @Html.DisplayNameFor(model => model.Id) </th> <th> @Html.DisplayNameFor(model => model.ParentId) </th> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Url) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> <input type="checkbox" value="@item.Id" class="chk" /> //在列表前,放入一个checkbox,注意value就是送后台变量, @*<input name="ids111" type="checkbox" id="@item.Id" value="@item.Id" />*@ @*@Html.CheckBox(item.Id,false)*@ </td> <td> @Html.DisplayFor(modelItem => item.Id) </td> <td> @Html.DisplayFor(modelItem => item.ParentId) </td> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Url) </td> <td></td> </tr> } </tbody> </table> </div><!-- /.box-body --> </div><!-- /.box --> </div> <!-- Main content --> </section> <script type="text/javascript"> //这个是全选的JS function changeState(isChecked) { var chk_list = document.getElementsByTagName("input"); for (var i = 0; i < chk_list.length; i++) { if (chk_list[i].type == "checkbox") { chk_list[i].checked = isChecked; } } } </script> <script defer="defer"> //送后台ajax $(function () { $('#btn11').click(function () { //取值为btn11的。点击后方法 let arr = []; //定义变量 $('.chk:checked').each((i, e) => { arr.push(e.value); //写入arr }); console.log(arr); //提交 $.post("/Menus/Permissions1", { ids: arr, rolename:'@ViewBag.rolename'}, (res) => { ///这个前面是对应后台的方法,因为我不需要视图,所以新建了一个方法名。注意ids,rolename是送入后台的二个变量。 console.log(res); }); }) }) </script>
上面的视图,注意我有说明,那些//后面的内容全是注释 ,需要删除。
2. 在后台的操作
[HttpPost] public ActionResult Permissions1(string[] ids, string rolename) //两个参数,一个string组,一个rolename { ViewBag.rolename = rolename; //再次给viewbag.rolename赋值为变量 //MenuRole memurole = db.MenuRoles.Find(roleName); var menuroles = db.MenuRoles.Where(c => c.RoleName == rolename); //取表中名字=rolename db.MenuRoles.RemoveRange(menuroles); //删除操作,注意是removerange,而不是remove方法 //db.SaveChanges(); foreach (var id in ids) //foreach数组 { if (id != "selectAll") //全选的那个不算数。那个checkbox值要去掉 { var addroleMenusViewModel = new MenuRole(); //定义表模型 addroleMenusViewModel.RoleName = rolename; addroleMenusViewModel.MenuId = id; db.MenuRoles.Add(addroleMenusViewModel); } } db.SaveChanges(); //保存表的写操作 return RedirectToAction("List", "Role"); }
然后成功。