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

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

用户的体验已经需要越来越注重,这次我们是左右分栏,左边是系统菜单,右边是一个以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: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;
好,我们来看看效果!

如果你要启用灰色主题那么在将@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"));

 }
 }
}

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

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

作者:YmNets
出处:http://ymnets.cnblogs.com/

时间: 2016-07-06

ASP.NET MVC+EF框架+EasyUI实现权限管系列

前言:本文开始我们便一步一步的来实现这个权限系统的初步设计-框架搭建,首先我要说的是我们需要开发工具Visual Studio 2012或者10也行,其次是我们要有SQL Server数据库,如果是Visual Studio 2010的话,你还要安装MVC4的开发文件,这个是吗?我不记得了,谁可以回答我一下的,我一直用2012,都是集成好的,所以不太清楚.因为这篇博客比较简单,只是建立一个简单的架构,所以我顺便进行一下MVC的知识补充,后面我也会这样穿插着介绍项目中遇到的技术,下面开始今天之旅.

VS2015下简单使用EF框架的方法

VS2015下如何简单使用EF框架的方法,具体内容如下 新建Model1.edmx文件 页面引用数据库Model1 如下创建AD数据库的model文件. 找到以下菜单 找到所需要引用数据库类名称. 在页面后台引用 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; name

VS2015 免费插件Refactoring Essentials

题记: 之前由SharpDevelop团队开发且用于SharpDevelop这个开源IDE中的重构插件"NR6Pack"改名为"Refactoring Essentials",被Hanselman称之为对"Web Essentials"的一种致意(通过"阅读原文"来查看Hanselman的介绍文章),而我认为这个插件也会如"Web Essentials"那样成为Visual Studio 2015上的必备插

推荐十款免费 WordPress 插件

2015必备wordpress插件列表.为了增强wordpress站点,一些优秀有效的免费wordpress 插件是必不可少的. WordPress 插件用于提升 wordpress 站点的功能.正如你所知道的,wordpress 是最流行的内容管理系统(CMS)之一,所以会有许多开发者提供支持.他们开发 wordpress 插件在提高CMS功能的同时却不会降低站点的速度.现在有许多付费和免费的 wordpress 插件,但对于你们中的大多人来说要选择哪个插件仍是个问题.所以我在这里尽量简述下一

5个最顶级jQuery图表类库插件【jquery插件库】

GraphUp jQuery plugin - 15美元 Graphup是一中非常轻量级的灵活的jQuery(v1.4+)插件用来美化你的数据表.它能够使用颜色,柱状图及其气饱来有效的展现你的数据. 支持众多选项 - 选择数据清除器和一个油漆工具:填充,柱状,气饱图:配置小数点(支持句号或者逗号):定制颜色表及其CSS类:更多其他 轻量级 - 整个插件只有4kb 可扩展 - 你可以很容易的创建你自己的清除器和油漆工具或者颜色表.而且,拥有一个callback来执行上色前对单元格的任何操作.非常灵

jquery+php实现导出datatables插件数据到excel的方法

本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法.分享给大家供大家参考.具体如下: DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 1. 自动分页处理 2. 即时表格数据过滤 3. 数据排序以及数据类型自动检测 4. 自动处理列宽度 5. 可通过CSS定制样式 6. 支持隐藏列 7. 易用 8. 可扩展性和灵活性 9. 国际化 10.动态创建表格 11.

Vue.JS项目中5个经典Vuex插件

使用 Vuex 来管理 Vue 的状态,有很多好的理由.其中之一就是,通过 Vuex 插件可以非常容易的扩展一些很酷的功能.Vuex 社区中的开发人员已经创建了大量的免费插件供你使用,有许多你能想象的功能,还有一些你可能没有想到的功能. 状态持久化同步标签页.窗口语言本地化管理多个加载状态缓存操作 1. 状态持久化 vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化.这意味着刷新页面或关闭标签页都不会删除你的数据. 一

Ruby on Rails中MVC结构的数据传递解析

如果读者已经开发过基于 Rails 的应用,但对其 MVC 间的数据传递还有诸多困惑,那么恭喜您,本文正是要总结梳理 Rails 数据传递的方法和技巧.Ruby on Rails 3(以下统称为 Rails 3)是当前的主要发布版本,本文所述及的内容和代码都基于此版本. Rails 3 简介 Ruby on Rails 是一个 Ruby 实现.采用 MVC 模式的开源 Web 应用开发框架,能够提供 Web 应用的全套解决方案.它的"习惯约定优于配置"的设计哲理,使得 Web 开发人员

25个最好的免费Eclipse插件

Eclipse提供了一个可扩展插件的开发系统.这就使得Eclipse在运行系统之上可以实现各种功能.这些插件也不同于其他的应用(插件的功能是最难用代码实现的).拥有合适的Eclipse插件是非常重要的,因为它们能让Java开发者们无缝的开发基于J2EE和服务的应用程序.Eclipse的插件也能帮助他们开发不同应用架构上的程序. 下面列出来的是25个最好的免费Eclipse插件,可以让开发者更高效的工作 . 提高代码质量的插件 1. FindBugs FindBugs可以帮你找到Java代码中的b

再分享70+免费的jquery 图片滑块效果插件和教程

jQuery Slider插件一般是由滑块与滑动按钮组成,也有一些带暂停和继续按钮的.一般使用的Slider滑块插件,按照展示方式,可以分为两种:一种是为水平滑动:另一种是垂直滑动.当然具体的特效就有很多种了,不一一解释了.大部分的都是一些类似幻灯片的效果,也有带视差效果的.实现方式也大都是基于jQuery+html5+CSS3,大部分插件的兼容性都不错. 之前其实已经分享过28款免费实用的 JQuery 图片和内容滑块插件,但是今天发现之前的草稿里面也存了一些不错的jQuery插件,而且数量还

2014年50个程序员最适用的免费JQuery插件

有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎可以解决一个网站所有的问题它可以从做一个有吸引力和创意的网站解决所有那些阻碍你的问题如果你想解决任何跨浏览器的问题,那就必须收藏使用JavaScript函数库 jQuery库是Web开发人员的重要来源.你会发现很多互联网的jQuery插件都是免费使用的,但发现这些优秀的jQuery插件,需要你花费许

40个新鲜出炉的jQuery 插件和免费教程[上]

但对于 Web 开发人员来说,他们需要掌握编写插件的方法,这样在工作中才能游刃有余.今天这篇文章收集了40个非常棒的 jQuery 插件及其制作教程,这些插件能够为你将来的项目增添各种很炫功能和效果,同时通过详细的制作教程帮助你更加深入的掌握 jQuery 库的使用. Slidesjs ( 演示 | 下载 ) Beautiful Parallax Slider With jQuery ( 演示 | 下载 ) Sweet Thumbnails Preview Gallery with jQuery