13.MVC关系（Tab+iframe）容器/iframe/css显示权限管理和后台菜单导航到右边div容器 (2017-03-28 19:48)
=====================1.在tab容器上显示iframe小浏览器，并展示Permission权限管理数据===================
Mvc.Login.Admin添加控制器：SysController
1.操作步骤：新建类SysController:Controller要导入system.web.MVC程序集;
2.找对应的视图，因为现在在Areas下,找Admin区域，在Views找Sys,添加Sys文件夹。在Sys文件上添加跟视图同名的方法;(如：permission)
Areas/Admin/views/Sys/Permission:区域文件夹/区域名/视图文件/控制器文件夹/视图（视图跟控制器同名）
3.当前要展示很多iframe子页面，每个子页面都是张视图，视图都使用datagrad,都使用easyui；导入文件用一个文件用模版页比较方便
4.改Shared夹下：模版_Layou改成AdminLayou,viewStart里也要改AdminLayou；
模版AdminLayou导入：easyui文件
这个是AdminLayou.cshtml模版页
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> //easyui样式 <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" />//easyui样式
@Scripts.Render("~/easyUIJS") @RenderSection("scripts", required: false) </head>
<body> @RenderBody()
</body>
</html>
主页面：菜单项跳转到指定页面，这里是演示调到Permission.cshtml
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { /// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 function newTab(treeNode) { var $tbs = $("#tbs");//获取tbs的id； if ($tbs.tabs("exists", treeNode.text))//如果存在，设置为选中 { $tbs.tabs("select", treeNode.text); } else{ //不存在就创建一个，tab $tbs.tabs('add', { title: treeNode.text, //url:这个是treeNode加载树节点时已经存入到easyui中，所以就拿到了url路径。 content: NewIframe(treeNode.attributes.url), closable: true,//可关闭 //tools: [{ // iconCls: 'icon-mini-refresh', // handler: function () { // alert('refresh'); // } //}] }); } } //返回一个iframe标签 function NewIframe(url) { //var $ifr = $("<iframe></iframe>");//没必要转成对象 var IfrStr = "<iframe src='"+url+"' style='width:100%;height:100%;border:1px solid #000'></iframe>";//转成字符串就可以了 return IfrStr; } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"> </div> </div> </body> </html>
控制器
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.Mvc; namespace MVCOA.Login.Admin { /// <summary> /// 系统管理 /// </summary> public class SysController:Controller { /// <summary> /// 权限表 视图 /// </summary> /// <returns></returns> public ActionResult Permission() { return View(); } } }
视图Permission.cshtml
@{ ViewBag.Title = "权限管理"; } <h2>Permission</h2>
效果图：点击权限管理项
=====================2.在tab容器上显示iframe小浏览器，并展示Permission权限管理数据===================
***复制index中easyui的加载treeNode的div。说明：[左边菜单导航和div到AdminLoyou模版页,这样子点击导航项会显示不同的iframe小游览器容器]
easyui图片用的是相对路径；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/EasyUI/themes/icon.css" rel="stylesheet" />
<link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" />
@Scripts.Render("~/easyUIJS")
@RenderSection("scripts", required: false)
</head>
<body class="easyui-layout">
@RenderBody()
<div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;">//***左边导航菜单div
<ul id="menuTree"></ul>
</div>
<div data-options="region:'center'" style="padding:5px;background:#eee;">//***easyui右边容器
</div>
</body>
</html>
***效果图 ：AdminLayou模版和index菜单导航主页都有easyui右边容器和左边容器div。说明：[左边菜单导航和div到AdminLoyou模版页,这样子点击导航项会显示不同的iframe小游览器容器]
***所以你点用户权限就会显示右边显示一个新的权限菜单窗口和后台菜单导航窗口出来。如下：
