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

2024-09-26 18:24:11

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

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

VS2015 免费插件Refactoring Essentials

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

复制代码代码如下: <% '============================================================ ' 文件名称 : /Cls_Json.asp ' 文件作用 : 系统JSON类文件 ' 文件版本 : VBS JSON(JavaScript Object Notation) Version 2.0.2 ' 程序修改 : Cloud.L ' 最后更新 : 2009-05-12 '==================================
Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)

本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial
ASP.NET2.0+SQL Server2005构建多层应用第1/4页

[推荐]ASP.NET2.0+SQL Server2005构建多层应用!!!!!@申请加分!@@! [sell=5]随着.NET 2.0的发布,将会使得使用ASP.NET 2.0来构建的Web应用越来越容易.使用ASP.NET 2.0和SQL Server 2005,将会比ASP.NET 1.1更方便地构建多层体系架构的web应用.本文,将使用ASP.NET 2.0和SQL Server 2005 (.net使用Visual Studio 2005 beta 2,SQL Server 2005使
.NET Unity IOC框架使用实例详解

.NET Unity IOC框架的使用实例,具体内容如下 1.IOC简介 IOC(Inversion of Control), 控制反转 DI (Dependency Injection),依赖注入 IOC的基本概念是:不创建对象,但是描述创建它们的方式.在代码中不直接与对象和服务连接,但在配置文件中描述哪一个组件需要哪一项服务.容器负责将这些联系在一起. 2.Unity引入 3.创建单例模式容器类 using Microsoft.Practices.Unity; using Microsoft
.net MVC使用IPrincipal进行Form登录即权限验证（3）

.net MVC使用IPrincipal进行Form登录即权限验证,供大家参考,具体内容如下 1.在MVC项目中添加用户类,可以根据实际项目需求添加必要属性 public class UserData { /// <summary> /// ID /// </summary> public int UserId { get; set; } /// <summary> /// 用户名 /// </summary> public string UserName
.net MVC使用Session验证用户登录（4）

用最简单的Session方式记录用户登录状态 1.添加DefaultController控制器,重写OnActionExecuting方法,每次访问控制器前触发 public class DefaultController : Controller { protected override void OnActionExecuting(ActionExecutingContext filterContext) { base.OnActionExecuting(filterContext); va
在ASP.Net Web Forms中使用依赖注入的步骤

目录创建 WebForm 项目创建实体和接口创建容器和类型注册 WebForms 使用依赖注入依赖注入技术就是将一个对象注入到一个需要它的对象中,同时它也是控制反转的一种实现,显而易见,这样可以实现对象之间的解耦并且更方便测试和维护,依赖注入的原则早已经指出了,应用程序的高层模块不依赖于低层模块,而应该统一依赖于抽象或者接口. 在 .Net Framework 4.7.2 中引入了对依赖注入的支持,终于在 ASP.Net Web Forms 中可以使用依赖注入机制了,这篇文章将会讨论
ASP.NET验证码实现（附源码）

首先看下效果实现(由于gif屏幕录制软件是即时找的,有些失祯) 代码主要就是绘制验证码类的实现 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Drawing; using System.IO; namespace SecurityCodePic { public class DrawingSecurityCode { /// <summary>
React 源码中的依赖注入方法

一.前言依赖注入(Dependency Injection)这个概念的兴起已经有很长时间了,把这个概念融入到框架中达到出神入化境地的,非Spring莫属.然而在前端领域,似乎很少会提到这个概念,难道前端的代码就不需要解耦吗?前端的代码就没有依赖了?本文将以 React 的源码为例子,看看它是如何使用依赖注入这一设计模式的. 二.依赖注入的基本概念在看代码之前,有必要先简单介绍一下依赖注入的基本概念.依赖注入和控制反转(Inversion of Control),这两个词经常一起出现.一句话表

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

相关推荐

随机推荐