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

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

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

1.1视图

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

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

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

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

@using Models
@using Page = Models.Page

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

IndexHome.cshtml

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

 1 @using Models
 2 @using Page = Models.Page
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6     <title></title>
 7     <meta name="viewport" content="width=device-width" />
 8 
 9     <link href="~/Content/CSS/style.css" rel="stylesheet" />
10 </head>
11 <body>
12     <dl class="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                 <div class='title'>
24                     <span class='img_style'>
25                         <img id='j_img' src='@right.PictureUrl' /></span>@right.CatalogName
26                 </div>
27                 <ul class='menuson'>
28                     @foreach (Page page in pageList)
29                     {
30                         <li><cite></cite>
31                             <a href='#' onclick="addTab('@page.PageName','@("../" + page.PageUrl)');">@page.PageName</a><i></i></li>
32                     }
33                 </ul>
34             </dd>
35                 }
36             }
37         }
38     </dl>
39 
40     <script type="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                 //销毁已有的iframe   
 84                 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 nothing   
 91                     }
 92                     $frame.remove();
 93                     if ($.browser.msie) {
 94                         CollectGarbage();
 95                     }
 96                 }
 97                 $tabBody.html('');
 98                 $tabBody.css({ 'overflow': 'hidden', 'position': 'relative' });
 99                 var $mask = $('<div style="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 = $('<div class="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 = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody);
102                 var $containter = $('<div style="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 = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
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 //创建Frame
245 function createFrame(url) {
246     var s = '<iframe scrolling="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                 //销毁已有的iframe   
 59                 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 nothing   
 66                     }
 67                     $frame.remove();
 68                     if ($.browser.msie) {
 69                         CollectGarbage();
 70                     }
 71                 }
 72                 $tabBody.html('');
 73                 $tabBody.css({ 'overflow': 'hidden', 'position': 'relative' });
 74                 var $mask = $('<div style="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 = $('<div class="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 = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody);
 77                 var $containter = $('<div style="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 //创建Frame
156 function createFrame(url) {
157     var s = '<iframe scrolling="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 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 using Session;
 7 using OdbcDbAccess;
 8 using System.Data;
 9 using Models;
10 
11 
12 namespace CqReportSystem.Controllers
13 {
14     public class IndexHomeController : Controller
15     {
16         /// <summary>
17         /// ****************************
18         /// 功能：主页
19         /// 作者：王令
20         /// 时间：2015-7-18
21         /// 邮箱：1129137758@qq.com
22         /// ****************************
23         
24         public ActionResult 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 select item)
40                             .ToList();
41                     ViewBag.Navigation = navigationList;
42                     ViewBag.RightList = currentRight;
43                 }
44             
45                 ViewData["UserName"] = SessionManage.CurrentUser.OperatorName;
46             }
47             return View();
48         }
49 
50 
51         /// <summary>
52         /// 根据一级目录展示二级目录及访问页面
53         /// </summary>
54         /// <param name="navigationId"></param>
55         /// <returns></returns>
56         public PartialViewResult RightMessage(int navigationId)
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 select item)
73                            .ToList();
74                 ViewBag.RightList = currentRight;
75             }
76 
77             return PartialView("_rightMessage");
78         }
79 
80 
81         public ActionResult Home()
82         {
83             return View();
84         }
85 
86     }
87 }