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");
}
然后成功。
浙公网安备 33010602011771号