构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

开始，我们有了一系列的解决方案，我们将动手搭建新系统吧。

用户的体验已经需要越来越注重，这次我们是左右分栏，左边是系统菜单，右边是一个以tabs页组成的页面集合，每一个tab都可以单独刷新和关闭，因为他们会是一个iframe

工欲善其事必先利其器。需要用到以下工具。

Visual Studio 2012

您可以安装MVC4 for vs2010用VS2010来开发，但是貌似你将不能使用EF5.0将会是EF4.4版本，但这没有多大的关系。

MVC4将挂载在.NET Framework4.5上。

好！

打开我们熟悉的VS创建一个空解决方案。我起了个名字叫AppSolution，类库命名空间将与App开头，如App.BLL,App.Web等命名，喜欢酷一点的朋友你可以用的名字来命名

如Joy.BLL,Jason.BLL,zhangsan.BLL，随便你。直接是BLL也可以

我们将创建项目

1. MVC4.0的App.Admin 网站 Internet选项，选择Razor视图

先下载Easyui1.3.2

最高版本是1.3.4我们选择1.3.2是因为1.3.2以上的是jquery 2.0

jquery2.0将不支持IE8.假如你已经抛弃IE8，那您可以体验更高的版本和更小更快的js库。（官方他是这样说的）

删掉不必要的东西，因为有些东西我们要了，有些保留，复制easyui到相应目录下，我喜欢把脚本和样式分开放。

1.把jquery.easyui.min.js放到scripts目录下
2.主题themes放到到content下这里我只保留灰色和蓝色主题，其他主题我的审美有限度，大家可以到easyui官方下载新的主题
3.把Images文件夹移动到content下
4.Filters文件删掉
5.把素材和site.css放到content目录下，我已经为大家准备好这个项目所要用到的图片素材，不够我们再添加
6.把controllers的AccountController.cs,HomeController.cs删除
7.把View视图自带的cshtml删掉。
8.把script无关或者不是压缩的我都删掉了，因为我认为不必要调试。以后我们遇到问题，用其他工具来辅助调试，如httpAnalyes软件等

好了，我们开始搭建

还是新建一个“空”的控制器HomeController，添加index视图

index代码

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <title>Index</title>
 6     <meta name="viewport" content="width=device-width" />
 7      <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
 8      <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
 9      @Styles.Render("~/Content/css")
10      @Styles.Render("~/Content/themes/blue/css")
11      @Scripts.Render("~/bundles/home")
12 </head>
13 <body class="easyui-layout">
14     <div id="OverTimeLogin"  class="easyui-dialog" data-options="closed:true,modal:true">
15         <iframe width="726px" scrolling="no" height="497px" frameborder="0"  id="iOverTimeLogin"></iframe>
16     </div>
17     <div data-options="region:'north',border:false,split:true" style="height: 60px;">
18         <div class="define-head">
19             <div class="define-logo">
20                <div id="LoginTopLine">System Manage</div>
21                 <div id="LoginBotoomLine">MVC4+EF5.0+EasyUI</div>
22             </div>
23             <div class="define-account">
24                    
25             </div>
26         </div>
27     </div>
28     <div data-options="region:'west',split:true,title:'菜单列表'" style="width: 200px; height:100%; padding-top: 2px; background-color:#fff; overflow:auto">
29         <div id="RightTree" style=" background-color:#fff;">
30             <div class="panel-loading">加载中...</div>
31         </div>
32     </div>
33     <div data-options="region:'south',border:false" style="height: 20px;">
34         <div class="define-bottom">
35             
36 
37         </div>
38     </div>
39     <div data-options="region:'center',border:false">
40         <div id="mainTab" class="easyui-tabs" data-options="fit:true">
41             <div title="我的桌面" data-options="closable:true" style="overflow: hidden; background:#fff">
42                 <iframe scrolling="auto" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
43             </div>
44         </div>
45     </div>
46     <div id="tab_menu" class="easyui-menu" style="width: 150px;">
47         <div id="tab_menu-tabrefresh" data-options="iconCls:'icon-reload'">
48             刷新</div>
49         <div id="tab_menu-openFrame">
50            在新的窗体打开</div>
51         <div id="tab_menu-tabcloseall">
52             关闭所有</div>
53         <div id="tab_menu-tabcloseother">
54             关闭其他标签页</div>
55         <div class="menu-sep">
56         </div>
57         <div id="tab_menu-tabcloseright">
58            关闭右边</div>
59         <div id="tab_menu-tabcloseleft">
60            关闭左边</div>
61         <div id="tab_menu-tabclose" data-options="iconCls:'icon-remove'">
62           关闭</div>
63         <div id="menu" class="easyui-menu" style="width: 150px;">
64         </div>
65     </div>
66 </body>
67 </html>

这里我们看到head @Styles.Render("~/Content/css")这些代码，这是MVC4的捆版压缩技术，将css和javascript压缩输出到页面。我已经做好了所以大家只要看下就可以。也可以谷歌一下他的原理组成。博客园很多大虾也都给出了答案。其文件是App_Start下的BundleConfig.cs

  1 home.js
  2 $(function () {
  3           $('#tab_menu-tabrefresh').click(function () {
  4               /*重新设置该标签 */
  5               var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
  6               $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src", url);
  7           });
  8           //在新窗口打开该标签
  9           $('#tab_menu-openFrame').click(function () {
 10               var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
 11               window.open(url);
 12           });
 13           //关闭当前
 14           $('#tab_menu-tabclose').click(function () {
 15               var currtab_title = $('.tabs-selected .tabs-inner span').text();
 16               $('#mainTab').tabs('close', currtab_title);
 17               if ($(".tabs li").length == 0) {
 18                   //open menu
 19                   $(".layout-button-right").trigger("click");
 20               }
 21           });
 22           //全部关闭
 23           $('#tab_menu-tabcloseall').click(function () {
 24               $('.tabs-inner span').each(function (i, n) {
 25                   if ($(this).parent().next().is('.tabs-close')) {
 26                       var t = $(n).text();
 27                       $('#mainTab').tabs('close', t);
 28                   }
 29               });
 30               //open menu
 31               $(".layout-button-right").trigger("click");
 32           });
 33           //关闭除当前之外的TAB
 34           $('#tab_menu-tabcloseother').click(function () {
 35               var currtab_title = $('.tabs-selected .tabs-inner span').text();
 36               $('.tabs-inner span').each(function (i, n) {
 37                   if ($(this).parent().next().is('.tabs-close')) {
 38                       var t = $(n).text();
 39                       if (t != currtab_title)
 40                           $('#mainTab').tabs('close', t);
 41                   }
 42               });
 43           });
 44           //关闭当前右侧的TAB
 45           $('#tab_menu-tabcloseright').click(function () {
 46               var nextall = $('.tabs-selected').nextAll();
 47               if (nextall.length == 0) {
 48                   $.messager.alert('提示', '前面没有了!', 'warning');
 49                   return false;
 50               }
 51               nextall.each(function (i, n) {
 52                   if ($('a.tabs-close', $(n)).length > 0) {
 53                       var t = $('a:eq(0) span', $(n)).text();
 54                       $('#mainTab').tabs('close', t);
 55                   }
 56               });
 57               return false;
 58           });
 59           //关闭当前左侧的TAB
 60           $('#tab_menu-tabcloseleft').click(function () {
 61 
 62               var prevall = $('.tabs-selected').prevAll();
 63               if (prevall.length == 0) {
 64                   $.messager.alert('提示', '后面没有了!', 'warning');
 65                   return false;
 66               }
 67               prevall.each(function (i, n) {
 68                   if ($('a.tabs-close', $(n)).length > 0) {
 69                       var t = $('a:eq(0) span', $(n)).text();
 70                       $('#mainTab').tabs('close', t);
 71                   }
 72               });
 73               return false;
 74           });
 75 
 76       });
 77 $(function () {
 78     /*为选项卡绑定右键*/
 79     $(".tabs li").on('contextmenu', function (e) {
 80         /*选中当前触发事件的选项卡 */
 81         var subtitle = $(this).text();
 82         $('#mainTab').tabs('select', subtitle);
 83         //显示快捷菜单
 84         $('#tab_menu').menu('show', {
 85             left: e.pageX,
 86             top: e.pageY
 87         });
 88         return false;
 89     });
 90 });
 91 
 92 
 93 
 94 
 95 function addTab(subtitle, url, icon) {
 96     if (!$("#mainTab").tabs('exists', subtitle)) {
 97         $("#mainTab").tabs('add', {
 98             title: subtitle,
 99             content: createFrame(url),
100             closable: true,
101             icon: icon
102         });
103     } else {
104         $("#mainTab").tabs('select', subtitle);
105         $("#tab_menu-tabrefresh").trigger("click");
106     }
107     $(".layout-button-left").trigger("click");
108     //tabClose();
109 }
110 function createFrame(url) {
111     var s = '<iframe frameborder="0" src="' + url + '" scrolling="auto" style="width:100%; height:99%"></iframe>';
112     return s;
113 }
114 
115 
116     $(function () {
117         $(".ui-skin-nav .li-skinitem span").click(function () {
118             var theme = $(this).attr("rel");
119             $.messager.confirm('提示', '切换皮肤将重新加载系统！', function (r) {
120                 if (r) {
121                     $.post("../../Home/SetThemes", { value: theme }, function (data) { window.location.reload(); }, "json");
122                 }
123             });
124         });
125     });

index的脚本，这个home.js的脚本，他集成了tab页的右键菜单我已经集成到系统。运行之前要在Global.asax启用压缩

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Http;
 6 using System.Web.Mvc;
 7 using System.Web.Optimization;
 8 using System.Web.Routing;
 9 
10 namespace App.Admin
11 {
12     // 注意: 有关启用 IIS6 或 IIS7 经典模式的说明，
13     // 请访问 http://go.microsoft.com/?LinkId=9394801
14 
15     public class MvcApplication : System.Web.HttpApplication
16     {
17         protected void Application_Start()
18         {
19           // AreaRegistration.RegisterAllAreas();
20 
21             WebApiConfig.Register(GlobalConfiguration.Configuration);
22             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
23             RouteConfig.RegisterRoutes(RouteTable.Routes);
24             //启用压缩
25             BundleTable.EnableOptimizations = true;
26             BundleConfig.RegisterBundles(BundleTable.Bundles);
27          //   AuthConfig.RegisterAuth();
28         }
29     }
30 }

在BundleConfig.RegisterBundles(BundleTable.Bundles);前面加入

//启用压缩
BundleTable.EnableOptimizations = true;
好，我们来看看效果！

如果你要启用灰色主题那么在将@Styles.Render("~/Content/themes/blue/css")

修改为@Styles.Render("~/Content/themes/gray/css")即可

其实这一些没什么好说的，只是为系统搭建了一个简单的框架。如果用easyui没有不下几个小时也是很难搭建起来的，不过别担心，我为大家准备了原代码

代码下载下载的源码有的同学运行有问题请把App_Start下的BundleConfig.cs更改为

using System.Web;
using System.Web.Optimization;

namespace App.Admin
{
    public class BundleConfig
    {
        // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {

            bundles.Add(new ScriptBundle("~/bundles/common").Include(
                        "~/Scripts/common.js"));

            bundles.Add(new ScriptBundle("~/bundles/home").Include(
                       "~/Scripts/home.js"));
            bundles.Add(new ScriptBundle("~/bundles/account").Include(
                       "~/Scripts/Account.js"));
            //easyui
            bundles.Add(new StyleBundle("~/Content/themes/blue/css").Include("~/Content/themes/blue/easyui.css"));
            bundles.Add(new StyleBundle("~/Content/themes/gray/css").Include("~/Content/themes/gray/easyui.css"));
            bundles.Add(new StyleBundle("~/Content/themes/metro/css").Include("~/Content/themes/metro/easyui.css"));


            bundles.Add(new ScriptBundle("~/bundles/jqueryfrom").Include(
                        "~/Scripts/jquery.form.js"));

            bundles.Add(new ScriptBundle("~/bundles/easyuiplus").Include(
                        "~/Scripts/jquery.easyui.plus.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate.unobtrusive.plus.js"));

            // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
            // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

           // bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
           bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/site.css", "~/Content/home.css"));

        }
    }
}

home.css

 1 home.css
 2 .define-head {
 3     font-family: Verdana,Geneva,sans-serif;
 4     background-color: #EFEFEF;
 5     height: 55px;
 6     overflow: hidden;
 7     background: url('Images/head_bg.gif');
 8 }
 9 
10     .define-head .define-logo {
11         height: 52px;
12         width: 50%;
13         float: left;
14         background: url('Images/Logo.png') 10px 7px no-repeat
15     }
16 
17         .define-head .define-logo #LoginTopLine {
18             letter-spacing: 2px;
19             margin: 8px 0px 0px 10px;
20             text-shadow: 3px 1px 6px #fff;
21             color: #15428B;
22             font-size: 26px;
23             height: 30px;
24             line-height: 30px;
25             padding-left: 55px;
26         }
27 
28         .define-head .define-logo #LoginBotoomLine {
29             letter-spacing: 1px;
30             text-shadow: 3px 1px 6px #fff;
31             color: #15428B;
32             font-size: 12px;
33             height: 15px;
34             line-height: 15px;
35             padding-left: 65px;
36         }
37 
38     .define-head .define-account {
39         height: 50px;
40         width: 50%;
41         float: right;
42         text-align: right;
43         color: #fff;
44         line-height: 20px;
45         padding-top: 10px;
46     }
47 
48         .define-head .define-account a {
49             color: #fff
50         }
51 
52             .define-head .define-account a:hover {
53                 color: #FF0;
54             }
55 
56         .define-head .define-account span {
57             padding-left: 18px;
58             padding-right:18px;
59             background: url(Images/icon/memeber.gif) left center no-repeat;
60         }
61 
62             .define-head .define-account span b {
63                 font-weight: normal;
64                 color: #FF0;
65             }
66 
67 .define-bottom {
68     background-color: #F2F5F7;
69     height: 20px;
70     line-height: 20px;
71 }

关于代码：代码没有上传整个解决方案，你下载解压后，只需要引用现有类库即可，关于里面的素材，不懂的可以问我，里面包含里以后所有要用到的素材，请关注系统的童鞋不要删除，可以修改

下一讲预告：漂亮的登录页面

posted on 2015-07-23 11:16 张军伟阅读(397) 评论(0) 编辑收藏举报

刷新页面返回顶部

张军伟

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

导航

公告