首页模块就是展示不同权限的最终结果了，在阅读这章之前若有些不明白，可看看后续的单独的权限模块，用户模块，目录模块后从整体上再看首页模块。

阅读该模块需要一定或者是比较熟练的js知识,EasyUI Tab控件知识。整个首页模块的流程是登陆模块获取到了用户的基本信息，可以访问的网页信息，目录信息后，封装在sessionManage会话中，通过JS文件做数据的格式转换及动作定义，通过Css文件做网页的效果美化。简而言之，就是获取后台数据渲染到网页。

1.1视图

首页模块的一级导航选择不同的信息关联二级导航，二级导航展开显示可以访问的页面链接。每一个链接在网页的展示模块通过EasyUI的Tab控件展示，可以实现如下效果:

对应单个的tab中显示的网页信息是通过iframe标签的方式实现的。及打开一个tab就创建一个iframe对象。关闭一个tab就释放该iframe对象。

首页模块的基本结构简图如下：

首页视图是由两部分视图组成的。主视图主要是展示整个的框架结构，还有一个部分视图主要是展示左侧的权限信息页面。主视图中比较关键的代码如下：

@using Models
@using Page = Models.Page

<!--先把页面model加载到视图-->

<!--解析Model生成一级导航目录信息-->

<ul class="menuchild">
                        @if (ViewBag.Navigation != null)
                        {
                            IList<Catalog> navigationList = (List<Catalog>)ViewBag.Navigation;
                            foreach (Catalog item in navigationList)
                            {
                            <li><a οnclick="navigationClick(@item.CatalogId);">@item.CatalogName</a><i></i></li>
                            }
                        }
                    </ul>

<!--左边菜单容器 加载部分视图展示左边的菜单信息 -->   
                <div class="scroll-panel" id="scrollpanel">
                    <div style="top: -10.8px;" class="scroll-content" id="scrollcontent">
                        <div id="rightListDiv">
                            @Html.Partial("_rightMessage", new { navigationId = -1 })
                        </div>
                    </div>
                </div>

首页详细视图代码如下：

1 @using Models2 @using Page = Models.Page3 @{4 Layout = null;5 }6 <!DOCTYPE html>
7 <html>
8 <head>
9     <metaname="viewport"content="width=device-width" />
10     <title>####</title>
11     <linkrel="stylesheet"type="text/css"href="~/Content/easyui143/themes/gray/easyui.css">
12     <linkrel="stylesheet"type="text/css"href="~/Content/easyui143/themes/icon.css">
13
14     <linkhref="~/Content/CSS/style.css"rel="stylesheet" />
15     <style>
16 .panel-tool{
17 visibility:hidden;
18         }
19
20 #preferenceUl{
21 display:list-item;
22 margin:5px;
23 margin-top:2px;
24 padding:10px;
25         }
26
27 #preferenceUl li{
28 display:list-item;
29 list-style-type:square;
30 margin:5px;
31             }
32     </style>
33
34 </head>
35
36 <bodystyle="overflow: hidden;">
37
38     <divclass="header">
39         <!--header页面上面部分-->
40         <divclass=" system_name"></div>
41         <!--用户-->
42         <divclass="top_user"onmouseover="theimg.src='@Url.Content("~/Content/image/title_images/user_white.png")'" onmouseout="theimg.src='@Url.Content("~/Content/image/title_images/user_blue.png")'">
43             <dlclass="topmenu">
44                 <dd>
45                     <divclass="toptitle"style="height: 50px;">
46                         <spanstyle="width: 32px; height: 32px;">
47                             <imgid="theimg"src="~/Content/image/title_images/user_blue.png" />
48                         </span>
49                         <spanclass="spant">@Html.Raw(ViewData["UserName"])  </span>
50                     </div>
51                     <ulclass="menuchild">
52                         <li><ahref="javascript:Exit();">退出系统</a><i></i></li>
53
54                     </ul>
55                 </dd>
56             </dl>
57         </div>
58
59
60
61         <!--导航-->
62         <divclass="top_navigation"onmouseover="nav_theimg.src='@Url.Content("~/Content/image/title_images/navigation.png")'" onmouseout="nav_theimg.src='@Url.Content("~/Content/image/title_images/navigation.png")'">
63             <dlclass="topmenu">
64                 <dd>
65                     <divclass="toptitle"style="height: 50px;">
66                         <spanstyle="width: 32px; height: 32px;">
67                             <imgid="nav_theimg"src="~/Content/image/title_images/navigation.png" />
68                         </span>
69                         <spanclass="spant">导航</span>
70                     </div>
71                     <ulclass="menuchild">
72 @if (ViewBag.Navigation != null)73 {74                             IList<Catalog> navigationList = (List<Catalog>)ViewBag.Navigation;75 foreach (Catalog item in navigationList)76 {77                             <li><aonclick="navigationClick(@item.CatalogId);">@item.CatalogName</a><i></i></li>
78 }79 }80                     </ul>
81                 </dd>
82             </dl>
83         </div>
84
85
86
87         <!--首页-->
88         <divclass="top_index"onmouseover="index_img.src='../Content/image/title_images/index_white.png'"onmouseout="index_img.src='../Content/image/title_images/index_blue.png'">
89             <dlclass="topmenu">
90                 <dd>
91                     <divclass="toptitle"style="height: 50px;">
92                         <ahref="#"onclick="addTab('首页','');"style="color: #ffffff"><spanstyle="width: 32px; height: 32px;">
93                             <imgid="index_img"src="~/Content/image/title_images/index_blue.png" />
94                         </span>
95                             <spanclass="spant">首页 </span></a>
96                     </div>
97                 </dd>
98             </dl>
99         </div>
100
101     </div>
102     <!--header结束-->
103
104     <divclass="logo"id="nowTime">
105         <!--系统logodiv-->
106     </div>
107
108     <divclass="main_hoder">
109         <!--下面整个容器-->
110         <divclass="left_hoder">
111             <!--左边容器-->
112             <divclass="left_hoder_menu">
113                 <!--左边菜单容器-->
114                 <divclass="scroll-panel"id="scrollpanel">
115                     <divstyle="top: -10.8px;"class="scroll-content"id="scrollcontent">
116                         <divid="rightListDiv">
117 @Html.Partial("_rightMessage", new { navigationId = -1 })118                         </div>
119                     </div>
120                 </div>
121                 <divclass="scroll-bar"id="scrollbar">
122                     <divclass="scroll-block"id="scrollblock"></div>
123                 </div>
124             </div>
125         </div>
126
127         <divclass="center_hoder">
128             <divclass="easyui-tabs"data-options="fit:true,border:false,plain:true"id="pageTab">
129
130
131                 <divtitle="首页"style="padding: 10px;">
132
133
134                     <divclass="easyui-layout"data-options="fit:true">
135
136 欢迎加载首页信息。137
138
139                     </div>
140
141
142
143                 </div>
144             </div>
145         </div>
146         <!--其他网页显示的容器-->
147         <divclass="footer">
148 技术支持：######149         </div>
150
151     </div>
152     <!--下面整个容器-->
153 </body>
154
155 <scriptsrc="~/Scripts/jquery.js"></script>
156 <!--滚动条效果-->
157 <scriptsrc="~/Scripts/mousewheel.js"></script>
158 <scriptsrc="~/Scripts/scroll.js"></script>
159 <scripttype="text/javascript"src="~/Content/easyui143/jquery.easyui.min.js"></script>
160 <scripttype="text/javascript"src="~/Content/easyui143/locale/easyui-lang-zh_CN.js"></script>
161
162 <scripttype="text/javascript"src="~/Scripts/CustomJs/default.js"></script>
163
164 </html>

IndexHome.cshtml

部分视图代码完整代码如下：

1 @using Models2 @using Page = Models.Page3 <!DOCTYPE html>
4 <html>
5 <head>
6     <title></title>
7     <metaname="viewport"content="width=device-width" />
8
9     <linkhref="~/Content/CSS/style.css"rel="stylesheet" />
10 </head>
11 <body>
12     <dlclass="leftmenu">
13         <!--左边一级菜单样式-->
14 @if (ViewBag.RightList != null)15 {16             IList<Catalog> rightList = (List<Catalog>)ViewBag.RightList;17 foreach (Catalog right in rightList)18 {19                 IList<Page>pageList = right.PageList;20 if (pageList.Count > 0)21 {22             <dd>
23                 <divclass='title'>
24                     <spanclass='img_style'>
25                         <imgid='j_img'src='@right.PictureUrl'/></span>@right.CatalogName26                 </div>
27                 <ulclass='menuson'>
28 @foreach (Page page in pageList)29 {30                         <li><cite></cite>
31                             <ahref='#'onclick="addTab('@page.PageName','@("../" + page.PageUrl)');">@page.PageName</a><i></i></li>
32 }33                 </ul>
34             </dd>
35 }36 }37 }38     </dl>
39
40     <scripttype="text/javascript"src="~/Scripts/CustomJs/_rightMessage.js"></script>
41 </body>
42 </html>

_rightMessage.cshtml

1.2JS文件

首页加载共用了两个JS文件，其中视图IndexHome.cshtml对应default.js,_rightMessage.cshtml对应_rightMessage.js文件。

两个文件中关键的代码均是创建iframe对象和销毁iframe对象，部分代码如下：

/**  把iframe与Tab的属性结合起来。
         * 增加iframe模式的标签页 
         * param {[type]} jq     [description]  
         * param {[type]} params [description]  
          */
        addIframeTab: function (jq, params) {
            return jq.each(function () {
                if (params.tab.href) {
                    delete params.tab.href;
                }
                $(this).tabs('add', params.tab);
                $(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe });
            });
        },

/**
         * 更新tab的iframe内容  
         * param  {jq Object} jq     [description]  
        * param  {Object} params [description]  
       * return {jq Object}        [description]  
        */
        updateIframeTab: function (jq, params) {
            return jq.each(function () {
                params.iframe = params.iframe || {};
                if (!params.iframe.src) {
                    var $tab = $(this).tabs('getTab', params.which);
                    if ($tab == null) return;
                    var $tabBody = $tab.panel('body');
                    var $iframe = $tabBody.find('iframe');
                    if ($iframe.length === 0) return;
                    $.extend(params.iframe, { 'src': $iframe.attr('src') });
                }
                $(this).tabs('loadTabIframe', params);
            });
        }

//创建Frame
function createFrame(url) {
    var s = '<iframe scrolling="hidden" frameborder="0"  src="' + url + '" style="width:100%;height:98%;"></iframe>';
    return s;
};

//添加tab页
function addTab(title, tabHref) {
    if ($("#pageTab").tabs("exists", title)) {
        $("#pageTab").tabs("select", title);
    } else {
        $('#pageTab').tabs('addIframeTab', {
            tab: { title: title, closable: true },
            iframe: { src: tabHref }
        });
    }

default.js文件的完整代码如下：

1 $(function () {2 //设置左侧导航栏的默认高度3 $(".scroll-panel").height($(window).height() - 110);4
5 //左侧导航菜单监听事件，修改图标样式6 $('.title').click(function () {7 var $ul = $(this).next('ul');8 var src, srcArray;9
10 src = $(".title_current img").attr("src");11 if (src != null) {12 srcArray = src.indexOf('_blue');13
14 src = src.substring(0, srcArray) + '.png';15
16 $(".title_current img").attr("src", src);17 }18 $(".title_current").removeClass("title_current"); //移除所有的title_current样式类19
20 $(".leftmenu").find('ul').slideUp();21
22 if ($ul.is(':visible')) {23 //收起导航菜单24 $(this).next('ul').slideUp();25 } else {26 //展开导航菜单并修改目录菜单的样式以及图标27 $(this).next('ul').slideDown();28 $(this).addClass("title_current");29
30 src = $(".title_current img").attr("src"); //目录图标31 srcArray = src.split('.');32 src = srcArray[0] + '_blue.png';33 $(".title_current img").attr("src", src);34 }35 });36
37
38 //页面导航监听事件39 $('.menuson a').click(function () {40 $('.menuson a').removeClass("aclick");41 $(this).addClass("aclick");42 });43
44
45 //当前用户获取焦点46 $('.top_user').hover(function () {47 var path = $('.top_user .topmenu .toptitle');48 var $ul = path.next('ul');49 if ($ul.is(':visible')) {50 path.next('ul').slideUp();51 } else {52 path.next('ul').slideDown();53 }54 });55
56
57 //导航获取焦点58 $('.top_navigation').hover(function () {59 var path = $('.top_navigation .topmenu .toptitle');60 var $ul = path.next('ul');61 if ($ul.is(':visible')) {62 path.next('ul').slideUp();63 } else {64 path.next('ul').slideDown();65 }66 });67
68
69 $.extend($.fn.tabs.methods, {70 /**71 * 加载iframe内容72 * param  {jq Object} jq     [description]73 * param  {Object} params    params.which:tab的标题或者index;params.iframe:iframe的相关参数74 * return {jq Object}        [description]75 */76 loadTabIframe: function (jq, params) {77 return jq.each(function () {78 var $tab = $(this).tabs('getTab', params.which);79 if ($tab == null) return;80
81 var $tabBody = $tab.panel('body');82
83 //销毁已有的iframe84 var $frame = $('iframe', $tabBody);85 if ($frame.length > 0) {86 try {//跨域会拒绝访问，这里处理掉该异常87 $frame[0].contentWindow.document.write('');88 $frame[0].contentWindow.close();89 } catch (e) {90 //Do nothing91 }92 $frame.remove();93 if ($.browser.msie) {94 CollectGarbage();95 }96 }97 $tabBody.html('');98 $tabBody.css({ 'overflow': 'hidden', 'position': 'relative' });99                 var $mask = $('<divstyle="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody);100                 var $maskMessage = $('<divclass="mask-message"style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #95B8E7;padding: 12px 5px 10px 30px;background: url(\'/Content/EasyUI/themes/bootstrap/images/loading.gif\') no-repeat scroll 5px center #FFF;">' + (params.iframe.message || '正在加载，请稍候 ...') + '</div>').appendTo($tabBody);101                 var $containterMask = $('<divstyle="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody);102                 var $containter = $('<divstyle="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody);103
104 var iframe = document.createElement("iframe");105 iframe.src = params.iframe.src;106 iframe.frameBorder = params.iframe.frameBorder || 0;107 iframe.height = params.iframe.height || '100%';108 iframe.width = params.iframe.width || '100%';109 if (iframe.attachEvent) {110 iframe.attachEvent("onload", function () {111 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () {112 $(this).remove();113 if ($(this).hasClass('mask-message')) {114 $containterMask.fadeOut(params.iframe.delay || 'slow', function () {115 $(this).remove();116 });117 }118 });119 });120 } else {121 iframe.onload = function () {122 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () {123 $(this).remove();124 if ($(this).hasClass('mask-message')) {125 $containterMask.fadeOut(params.iframe.delay || 'slow', function () {126 $(this).remove();127 });128 }129 });130 };131 }132 $containter[0].appendChild(iframe);133 });134 },135
136 /**137 * 增加iframe模式的标签页138 * param {[type]} jq     [description]139 * param {[type]} params [description]140 */141 addIframeTab: function (jq, params) {142 return jq.each(function () {143 if (params.tab.href) {144 delete params.tab.href;145 }146 $(this).tabs('add', params.tab);147 $(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe });148 });149 },150
151 /**152 * 更新tab的iframe内容153 * param  {jq Object} jq     [description]154 * param  {Object} params [description]155 * return {jq Object}        [description]156 */157 updateIframeTab: function (jq, params) {158 return jq.each(function () {159 params.iframe = params.iframe || {};160 if (!params.iframe.src) {161 var $tab = $(this).tabs('getTab', params.which);162 if ($tab == null) return;163 var $tabBody = $tab.panel('body');164 var $iframe = $tabBody.find('iframe');165 if ($iframe.length === 0) return;166 $.extend(params.iframe, { 'src': $iframe.attr('src') });167 }168 $(this).tabs('loadTabIframe', params);169 });170 }171 });172
173
174
175
176 });177
178 //退出登陆179 function Exit() {180 if (window.confirm("确定要退出吗？")) {181 window.location.href = "../Login/Login";182 }183 };184
185
186 //获取当前时间并格式化187 function current() {188 var d = new Date(), str = '';189
190     if (parseInt(d.getHours()) <10) {191 str += "0"+ d.getHours() + ':';192 }193 else {194 str += d.getHours()+ ':';195 }196 if (parseInt(d.getMinutes()) < 10) {197 str += "0"+ d.getMinutes() + ':';198 }199 else {200 str += d.getMinutes()+ ':';201 }202
203 if (parseInt(d.getSeconds()) < 10) {204 str += "0"+ d.getSeconds();205 }206 else {207 str += d.getSeconds();208     }209
210 str += "</div><div style='position: relative; top: 40px; left: 120px; width: 100px; font-family: 微软雅黑; font-size: 12px;'>"
211 + d.getFullYear() + '年'; //获取当前年份212 if (parseInt(d.getMonth()) < 9) {213 var m= d.getMonth()+ 1 + '月';214 str += "0"+ m;215 }216 else {217 str += d.getMonth()+ 1 + '月'; //获取当前月份（0——11）218 }219 if (parseInt(d.getDate()) < 10) {220 str += "0"+ d.getDate() + '日 ';221 }222 else {223 str += d.getDate()+ '日 ';224 }225 str += "</div>";226
227
228 var today= newArray("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");229
230 var w= "<div style='position: relative; top: 30px; left: 120px; width: 100px; font-family: 微软雅黑; font-size: 12px; font-weight: bold;'>"
231 + today[d.getDay()] + '&nbsp;';232 return w + str;233 }234
235 //设置显示时间236 setInterval(function () { $("#nowTime").html(current); }, 1000);237
238
239 //“导航”下拉选项的点击事件240 function navigationClick(navigationId) {241 $("#rightListDiv").load('/IndexHome/RightMessage?navigationId='+ navigationId);242 };243
244 //创建Frame245 function createFrame(url) {246 var s= '<iframescrolling="hidden"frameborder="0"src="' + url + '"style="width:100%;height:98%;"></iframe>';247 return s;248 };249
250
251 //添加tab页252 function addTab(title, tabHref) {253 if ($("#pageTab").tabs("exists", title)) {254 $("#pageTab").tabs("select", title);255 } else {256 $('#pageTab').tabs('addIframeTab', {257 tab: { title: title, closable: true },258 iframe: { src: tabHref }259 });260 }261 };262
263 //点击树节点，打开新的tab页264 function AddNewTab(node) {265 if (node.attributes != null) {266 if ($("#pageTab").tabs("exists", node.attributes.pageName)) {267 $("#pageTab").tabs("select", node.attributes.pageName);268 } else {269 $('#pageTab').tabs('addIframeTab', {270 tab: { title: node.attributes.pageName, closable: true },271 iframe: { src: "/" + node.attributes.url }272 });273 }274 }275
276 };

default.js

_rightMessage.js文件的完整代码如下：

1 $(function () {2 //左侧导航菜单监听事件，修改图标样式3 $('.title').click(function () {4 var $ul = $(this).next('ul');5 var src, srcArray;6
7 src = $(".title_current img").attr("src");8 if (src != null) {9 srcArray = src.indexOf('_blue');10
11 src = src.substring(0, srcArray) + '.png';12
13 $(".title_current img").attr("src", src);14 }15 $(".title_current").removeClass("title_current"); //移除所有的title_current样式类16
17 $(".leftmenu").find('ul').slideUp();18
19 if ($ul.is(':visible')) {20 //收起导航菜单21 $(this).next('ul').slideUp();22 } else {23 //展开导航菜单并修改目录菜单的样式以及图标24 $(this).next('ul').slideDown();25 $(this).addClass("title_current");26
27 src = $(".title_current img").attr("src"); //目录图标28 srcArray = src.split('.');29 src = srcArray[0] + '_blue.png';30 $(".title_current img").attr("src", src);31 }32 });33
34
35 //页面导航监听事件36 $('.menuson a').click(function () {37 $('.menuson a').removeClass("aclick");38 $(this).addClass("aclick");39 });40
41
42
43
44 $.extend($.fn.tabs.methods, {45 /**46 * 加载iframe内容47 * param  {jq Object} jq     [description]48 * param  {Object} params    params.which:tab的标题或者index;params.iframe:iframe的相关参数49 * return {jq Object}        [description]50 */51 loadTabIframe: function (jq, params) {52 return jq.each(function () {53 var $tab = $(this).tabs('getTab', params.which);54 if ($tab == null) return;55
56 var $tabBody = $tab.panel('body');57
58 //销毁已有的iframe59 var $frame = $('iframe', $tabBody);60 if ($frame.length > 0) {61 try {//跨域会拒绝访问，这里处理掉该异常62 $frame[0].contentWindow.document.write('');63 $frame[0].contentWindow.close();64 } catch (e) {65 //Do nothing66 }67 $frame.remove();68 if ($.browser.msie) {69 CollectGarbage();70 }71 }72 $tabBody.html('');73 $tabBody.css({ 'overflow': 'hidden', 'position': 'relative' });74                 var $mask = $('<divstyle="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody);75                 var $maskMessage = $('<divclass="mask-message"style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #95B8E7;padding: 12px 5px 10px 30px;background: url(\'/Content/EasyUI/themes/bootstrap/images/loading.gif\') no-repeat scroll 5px center #FFF;">' + (params.iframe.message || '正在加载，请稍候 ...') + '</div>').appendTo($tabBody);76                 var $containterMask = $('<divstyle="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody);77                 var $containter = $('<divstyle="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody);78
79 var iframe = document.createElement("iframe");80 iframe.src = params.iframe.src;81 iframe.frameBorder = params.iframe.frameBorder || 0;82 iframe.height = params.iframe.height || '100%';83 iframe.width = params.iframe.width || '100%';84 if (iframe.attachEvent) {85 iframe.attachEvent("onload", function () {86 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () {87 $(this).remove();88 if ($(this).hasClass('mask-message')) {89 $containterMask.fadeOut(params.iframe.delay || 'slow', function () {90 $(this).remove();91 });92 }93 });94 });95 } else {96 iframe.onload = function () {97 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () {98 $(this).remove();99 if ($(this).hasClass('mask-message')) {100 $containterMask.fadeOut(params.iframe.delay || 'slow', function () {101 $(this).remove();102 });103 }104 });105 };106 }107 $containter[0].appendChild(iframe);108 });109 },110
111 /**112 * 增加iframe模式的标签页113 * param {[type]} jq     [description]114 * param {[type]} params [description]115 */116 addIframeTab: function (jq, params) {117 return jq.each(function () {118 if (params.tab.href) {119 delete params.tab.href;120 }121 $(this).tabs('add', params.tab);122 $(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe });123 });124 },125
126 /**127 * 更新tab的iframe内容128 * param  {jq Object} jq     [description]129 * param  {Object} params [description]130 * return {jq Object}        [description]131 */132 updateIframeTab: function (jq, params) {133 return jq.each(function () {134 params.iframe = params.iframe || {};135 if (!params.iframe.src) {136 var $tab = $(this).tabs('getTab', params.which);137 if ($tab == null) return;138 var $tabBody = $tab.panel('body');139 var $iframe = $tabBody.find('iframe');140 if ($iframe.length === 0) return;141 $.extend(params.iframe, { 'src': $iframe.attr('src') });142 }143 $(this).tabs('loadTabIframe', params);144 });145 }146 });147
148
149
150
151 });152
153
154
155 //创建Frame156 function createFrame(url) {157     var s = '<iframescrolling="hidden"frameborder="0"src="' + url + '"style="width:100%;height:98%;"></iframe>';158 return s;159 };160
161
162 //添加tab页163 function addTab(title, tabHref) {164 if ($("#pageTab").tabs("exists", title)) {165 $("#pageTab").tabs("select", title);166 } else {167 $('#pageTab').tabs('addIframeTab', {168 tab: { title: title, closable: true },169 iframe: { src: tabHref }170 });171 }172 };

_rightMessage.js

1.3控制器

首页控制器就是把SessionManage会话类中的信息取出来。部分代码如下：

//一级导航目录
                IList<Catalog> navigationList = SessionManage.CurrentUser.NavigationList;
                //操作权限页面
                IList<Catalog> rightList = SessionManage.CurrentUser.RightList;
                if (navigationList != null && navigationList.Count > 0)
                {
                    IList<Catalog> currentRight =
                        (from item in rightList where item.ParentId == navigationList.First().CatalogId select item)
                            .ToList();
                    ViewBag.Navigation = navigationList;
                    ViewBag.RightList = currentRight;
                }

public PartialViewResult RightMessage(int navigationId)

{

//根据一级导航信息，展示二级导航信息

}

IndexHomeController.cs控制器的详细代码如下：

1 usingSystem;2 usingSystem.Collections.Generic;3 usingSystem.Linq;4 usingSystem.Web;5 usingSystem.Web.Mvc;6 usingSession;7 usingOdbcDbAccess;8 usingSystem.Data;9 usingModels;10
11
12 namespaceCqReportSystem.Controllers13 {14     public classIndexHomeController : Controller15 {16         /// <summary>
17         ///****************************18         ///功能：主页19         ///作者：王令20         ///时间：2015-7-1821         ///邮箱：1129137758@qq.com22         ///****************************
23
24         publicActionResult IndexHome()25 {26             if (SessionManage.CurrentUser == null)27 {28                 Response.Redirect("/");29 }30             else
31 {32                 //一级导航目录
33                 IList<Catalog> navigationList =SessionManage.CurrentUser.NavigationList;34                 //操作权限页面
35                 IList<Catalog> rightList =SessionManage.CurrentUser.RightList;36                 if (navigationList != null && navigationList.Count > 0)37 {38                     IList<Catalog> currentRight =
39                         (from item in rightList where item.ParentId == navigationList.First().CatalogId selectitem)40 .ToList();41                     ViewBag.Navigation =navigationList;42                     ViewBag.RightList =currentRight;43 }44
45                 ViewData["UserName"] =SessionManage.CurrentUser.OperatorName;46 }47             returnView();48 }49
50
51         /// <summary>
52         ///根据一级目录展示二级目录及访问页面53         /// </summary>
54         /// <param name="navigationId"></param>
55         /// <returns></returns>
56         public PartialViewResult RightMessage(intnavigationId)57 {58             if (SessionManage.CurrentUser == null)59 {60                 Response.Write("<script> window.parent.location.href = '/Login/Login';</script>");61 }62             else
63 {64                 IList<Catalog> rightList =SessionManage.CurrentUser.RightList;65                 if (navigationId == -1)66 {67                     IList<Catalog> navigationList =SessionManage.CurrentUser.NavigationList;68                     navigationId =navigationList.First().CatalogId;69 }70
71                 IList<Catalog> currentRight =
72                        (from item in rightList where item.ParentId == navigationId selectitem)73 .ToList();74                 ViewBag.RightList =currentRight;75 }76
77             return PartialView("_rightMessage");78 }79
80
81         publicActionResult Home()82 {83             returnView();84 }85
86 }87 }

IndexHomeController.cs

1.4运行页面

当以管理员身份登录时，运行界面如下：

当以一般用户登录时，运行界面如下：

转载于:https://www.cnblogs.com/wlandwl/p/index.html

Web应用程序系统的多用户权限控制设计及实现-首页模块【5】相关推荐

  1. Web应用程序系统的多用户权限控制设计及实现-总述【1】

    中大型的Web系统开发均需要权限的配置,基于多角色,多用户的操作权限管理是一个系统开发的基础.搭建好一套权限,用户,角色,页面一体的开发架构,可以用于后期业务的开发,同时也可用于不同业务的系统开发. ...

  2. AgileConfig轻量级配置中心1.3.0发布，支持多用户权限控制

    AgileConfig 当初是设计给我自己用的一个工具,所以只设置了一道管理员密码,没有用户的概念.但是很多同学在使用过后都提出了需要多用户支持的建议.整个团队或者整个公司都使用同一个密码来管理非常的 ...

  3. 松耦合式的权限控制设计，自定义权限表达式

    点击上方"芋道源码",选择"设为星标" 管她前浪,还是后浪? 能浪的浪,才是好浪! 每天 10:33 更新文章,每天掉亿点点头发... 源码精品专栏 原创 | ...

  4. yii2 后台权限验证获取用户身份_前、后端分离权限控制设计与实现

    作者:佚名 来源:Web开发 简述 近几年随着react.angular.vue等前端框架兴起,前后端分离的架构迅速流行.但同时权限控制也带来了问题. 网上很多前.后端分离权限仅仅都仅仅在描述前端权限 ...

  5. （转）基于MVC4+EasyUI的Web开发框架形成之旅--权限控制

    http://www.cnblogs.com/wuhuacong/p/3361351.html 我在上一篇随笔<基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍>中大 ...

  6. 前、后端分离权限控制设计和实现思路

    点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 来源:8rr.co/9QUT 简述 近几年随着react.angu ...

  7. 前、后端分离权限控制设计与实现

    简述 近几年随着react.angular.vue等前端框架兴起,前后端分离的架构迅速流行.但同时权限控制也带来了问题. 网上很多前.后端分离权限仅仅都仅仅在描述前端权限控制.且是较简单.固定的角色场 ...

  8. 后端修改数据库_前、后端分离权限控制设计和实现思路

    作者:薛定谔的猫 www.yuque.com/zhanghaofei/blog/xrpz9p 简述 近几年随着react.angular.vue等前端框架兴起,前后端分离的架构迅速流行.但同时权限控制 ...

  9. Minio（二） | Minio多用户权限控制

    文章目录 前言 Minio客户端的使用 权限控制主流程 测试 Amazon S3 定义的操作:即各种权限配置 分布式集群权限配置 总结 前言 前文我们学习了minio的基本概念与搭建,那么如果我们有n ...

最新文章

  1. vue下轻松解决模拟微信视频缩略图拖拽→吸附窗口边界的功能
  2. 区分HPUX是Itanium还是PA-RISC
  3. Ctrl + z 和 Linux jobs
  4. java代码中何处以main开始,Gradle-user guide-第7章 Java 快速开始
  5. USACO 1.3... 虫洞 解题报告（搜索+强大剪枝+模拟）
  6. engagement center里如何获得Access Token
  7. cnblogs_504 Gateway Time-out
  8. 论文排版怕翻车？这个排版神器是时候用起来了！
  9. mysql 求bit 某位为1_mysql按位的索引判断值是否为1
  10. Java PushbackInputStream skip（）方法与示例
  11. 动态分配IP之dhcp服务
  12. 无穷级数判敛方法使用限制
  13. DH 算法迪菲-赫尔曼算法QUIC协议和HTTP3.0
  14. 计算机应用类型分类 余额宝属于,按计算机应用的类型分类，余额宝属于____。...
  15. 干货！底层视觉研究，我们应该往哪里走？
  16. 【微信小程序】小程序调起付款码
  17. 世界最高山峰是珠穆朗玛峰(8844.43米=8844430毫米)，假如我有一张足够大的纸，它的厚度是0.1毫米。请问，我折叠多少次，可以折成珠穆朗玛峰的高度?
  18. 商务网站建设与维护【9】
  19. 浏览器下载软件时，默认是用迅雷下载，如何取消？
  20. PHP处理iso8583报文

热门文章

  1. MySQL查询7天内过生日的用户 查询生日是今天的用户 解决跨年问题
  2. 性能之巅：常用性能分析方法
  3. 10个重要的算法C语言实现源代码(留着以后看)
  4. ITSS-信息技术服务运行维护标准符合性认证
  5. 计算机重新装xp系统软件,关于安装软件重启XP电脑后软件不见的处理方法
  6. vue--后台管理系统问题和功能实现思路集锦
  7. 合并两个JSONObject
  8. MATLAB提示错误使用network,优化双隐藏神经网络出现错误使用 network/subsasgnne...
  9. wps excel批量获取网址标题（Title）
  10. 计算机开始按钮的功能,Windows7系统开始菜单有哪些新增的功能