冯 海

一个程序新人菜鸟的日记,希望大家多多关照。QQ:32316131

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");

			}

  

然后成功。

 

posted @ 2017-05-26 20:37  秋天来了哟  阅读(502)  评论(0编辑  收藏  举报
认识就是缘份,愿天下人都快乐!
QQ: 32316131
Email: 32316131@qq.com