欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享

程序员文章站 2023-11-27 09:45:46
开始，我们有了一系列的解决方案，我们将动手搭建新系统吧。 用户的体验已经需要越来越注重，这次我们是左右分栏，左边是系统菜单，右边是一个以tabs页组成的页面集合，每一个t...

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

用户的体验已经需要越来越注重，这次我们是左右分栏，左边是系统菜单，右边是一个以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视图

　　ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享

先下载easyui1.3.2：http://www.jeasyui.com/download/index.php

最高版本是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.把素材放到content目录下，我已经为大家准备好这个项目所要用到的图片素材，不够我们再添加

6.把controllers的accountcontroller.cs,homecontroller.cs删除

7.把view视图自带的cshtml删掉。

8.把script无关或者不是压缩的我都删掉了，因为我认为不必要调试。以后我们遇到问题，用其他工具来辅助调试，如httpanalyes软件等

好了，我们开始搭建

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

index代码

<!doctype html>

<html>
<head>
 <title>index</title>
 <meta name="viewport" content="width=device-width" />
 <script src="@url.content("~/scripts/jquery.min.js")" type="text/javascript"></script>
 <script src="@url.content("~/scripts/jquery.easyui.min.js")" type="text/javascript"></script>
 @styles.render("~/content/css")
 @styles.render("~/content/themes/blue/css")
 @scripts.render("~/bundles/home")
</head>
<body class="easyui-layout">
 <div id="overtimelogin" class="easyui-dialog" data-options="closed:true,modal:true">
 <iframe width="726px" scrolling="no" height="497px" frameborder="0" id="iovertimelogin"></iframe>
 </div>
 <div data-options="region:'north',border:false,split:true" style="height: 60px;">
 <div class="define-head">
  <div class="define-logo">
  <div id="logintopline">system manage</div>
  <div id="loginbotoomline">mvc4+ef5.0+easyui</div>
  </div>
  <div class="define-account">
   
  </div>
 </div>
 </div>
 <div data-options="region:'west',split:true,title:'菜单列表'" style="width: 200px; height:100%; padding-top: 2px; background-color:#fff; overflow:auto">
 <div id="righttree" style=" background-color:#fff;">
  <div class="panel-loading">加载中...</div>
 </div>
 </div>
 <div data-options="region:'south',border:false" style="height: 20px;">
 <div class="define-bottom">
  

 </div>
 </div>
 <div data-options="region:'center',border:false">
 <div id="maintab" class="easyui-tabs" data-options="fit:true">
  <div title="我的桌面" data-options="closable:true" style="overflow: hidden; background:#fff">
  <iframe scrolling="auto" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
  </div>
 </div>
 </div>
 <div id="tab_menu" class="easyui-menu" style="width: 150px;">
 <div id="tab_menu-tabrefresh" data-options="iconcls:'icon-reload'">
  刷新</div>
 <div id="tab_menu-openframe">
  在新的窗体打开</div>
 <div id="tab_menu-tabcloseall">
  关闭所有</div>
 <div id="tab_menu-tabcloseother">
  关闭其他标签页</div>
 <div class="menu-sep">
 </div>
 <div id="tab_menu-tabcloseright">
  关闭右边</div>
 <div id="tab_menu-tabcloseleft">
  关闭左边</div>
 <div id="tab_menu-tabclose" data-options="iconcls:'icon-remove'">
  关闭</div>
 <div id="menu" class="easyui-menu" style="width: 150px;">
 </div>
 </div>
</body>
</html>

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

$(function () {
  $('#tab_menu-tabrefresh').click(function () {
  /*重新设置该标签 */
  var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
  $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src", url);
  });
  //在新窗口打开该标签
  $('#tab_menu-openframe').click(function () {
  var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
  window.open(url);
  });
  //关闭当前
  $('#tab_menu-tabclose').click(function () {
  var currtab_title = $('.tabs-selected .tabs-inner span').text();
  $('#maintab').tabs('close', currtab_title);
  if ($(".tabs li").length == 0) {
   //open menu
   $(".layout-button-right").trigger("click");
  }
  });
  //全部关闭
  $('#tab_menu-tabcloseall').click(function () {
  $('.tabs-inner span').each(function (i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
   var t = $(n).text();
   $('#maintab').tabs('close', t);
   }
  });
  //open menu
  $(".layout-button-right").trigger("click");
  });
  //关闭除当前之外的tab
  $('#tab_menu-tabcloseother').click(function () {
  var currtab_title = $('.tabs-selected .tabs-inner span').text();
  $('.tabs-inner span').each(function (i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
   var t = $(n).text();
   if (t != currtab_title)
    $('#maintab').tabs('close', t);
   }
  });
  });
  //关闭当前右侧的tab
  $('#tab_menu-tabcloseright').click(function () {
  var nextall = $('.tabs-selected').nextall();
  if (nextall.length == 0) {
   $.messager.alert('提示', '前面没有了!', 'warning');
   return false;
  }
  nextall.each(function (i, n) {
   if ($('a.tabs-close', $(n)).length > 0) {
   var t = $('a:eq(0) span', $(n)).text();
   $('#maintab').tabs('close', t);
   }
  });
  return false;
  });
  //关闭当前左侧的tab
  $('#tab_menu-tabcloseleft').click(function () {

  var prevall = $('.tabs-selected').prevall();
  if (prevall.length == 0) {
   $.messager.alert('提示', '后面没有了!', 'warning');
   return false;
  }
  prevall.each(function (i, n) {
   if ($('a.tabs-close', $(n)).length > 0) {
   var t = $('a:eq(0) span', $(n)).text();
   $('#maintab').tabs('close', t);
   }
  });
  return false;
  });

 });
$(function () {
 /*为选项卡绑定右键*/
 $(".tabs li").live('contextmenu', function (e) {
 /*选中当前触发事件的选项卡 */
 var subtitle = $(this).text();
 $('#maintab').tabs('select', subtitle);
 //显示快捷菜单
 $('#tab_menu').menu('show', {
  left: e.pagex,
  top: e.pagey
 });
 return false;
 });
});




function addtab(subtitle, url, icon) {
 if (!$("#maintab").tabs('exists', subtitle)) {
 $("#maintab").tabs('add', {
  title: subtitle,
  content: createframe(url),
  closable: true,
  icon: icon
 });
 } else {
 $("#maintab").tabs('select', subtitle);
 $("#tab_menu-tabrefresh").trigger("click");
 }
 $(".layout-button-left").trigger("click");
 //tabclose();
}
function createframe(url) {
 var s = '<iframe frameborder="0" src="' + url + '" scrolling="auto" style="width:100%; height:99%"></iframe>';
 return s;
}


 $(function () {
 $(".ui-skin-nav .li-skinitem span").click(function () {
  var theme = $(this).attr("rel");
  $.messager.confirm('提示', '切换皮肤将重新加载系统！', function (r) {
  if (r) {
   $.post("../../home/setthemes", { value: theme }, function (data) { window.location.reload(); }, "json");
  }
  });
 });
 });

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

using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.http;
using system.web.mvc;
using system.web.optimization;
using system.web.routing;

namespace app.admin
{
 // 注意: 有关启用 iis6 或 iis7 经典模式的说明，
 // 请访问 http://go.microsoft.com/?linkid=9394801

 public class mvcapplication : system.web.httpapplication
 {
 protected void application_start()
 {
  arearegistration.registerallareas();

  webapiconfig.register(globalconfiguration.configuration);
  filterconfig.registerglobalfilters(globalfilters.filters);
  routeconfig.registerroutes(routetable.routes);
  //启用压缩
  bundletable.enableoptimizations = true;
  bundleconfig.registerbundles(bundletable.bundles);
  authconfig.registerauth();
 }
 }
}

在bundleconfig.registerbundles(bundletable.bundles);前面加入

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

ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享

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

修改为@styles.render("~/content/themes/gray/css")即可

ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享

其实这一些没什么好说的，只是为系统搭建了一个简单的框架。如果用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"));





 }
 }
}

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

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

作者：ymnets
出处：

上一篇： foreach循环用法（foreach和for循环区别）

下一篇： jq正则表达式用法（正则表达式语法大全）

推荐阅读