ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]
前言
为了符合后面更新后的重构系统，本文于2016-10-31日修正一些截图，文字
我们有了一系列的解决方案，我们将动手搭建新系统吧。
后台系统没有多大的UI视觉，这次我们采用的是标准的左右分栏，左边是系统菜单，右边是一个以tabs页组成的页面集合，每一个tab都可以单独刷新和关闭
开发工具
Visual Studio 2012（以上）
开始搭建
打开我们熟悉的VS创建一个空解决方案。我起了个名字叫Apps，类库命名空间将与Apps开头
如Apps.BLL,Apps.Web等命名
1. 新建MVC5.0的Web站点
2.前端框架EasyUI
EasyUI下载：有多新用多新http://www.jeasyui.com/download/list.php
关于素材的存放，我列了下面
- 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删掉。
3.新建Home控制器
还是新建一个“空”的控制器，添加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")这些代码，这是MVC的捆版压缩技术，将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")); }
}
}
关于代码：代码没有上传整个解决方案，你下载解压后，只需要引用现有类库即可，关于里面的素材，不懂的可以问我，里面包含里以后所有要用到的素材
ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]的更多相关文章
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
- [c#]asp.net开发微信公众平台(7)前6篇的整体框架demo源码
这里给出的demo是具备整体框架的微信公众平台源码, 所谓demo就是拿过去就可以直接演示使用的东西, 当然不会具备非常详细的具体到业务层面.数据层面的东西, 每个人都可以在此基础上自由发挥, 只 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（61）-如何使用框架来开发
系列目录 前言: 有些园友经常问如何正确快速开发,但是我告诉你没有什么帮助文档比自己动手做更加实在,不用代码生成器 这一节专门抽了些时间来非常非常详细演示这个框架的数据流,废话不多说,现在开始!下面看 ...
- Asp.net MVC验证哪些事（3）-- Remote验证及其改进(附源码)
表单中的输入项,有些是固定的,不变的验证规则,比如字符长度,必填等.但有些是动态的,比如注册用户名是否存在这样的检查,这个需要访问服务器后台才能解决.这篇文章将会介绍MVC中如何使用[RemoteAt ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 任务调度系统界面 http: ...
- 构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统
开篇:从50开始系统已经由MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+EF6+Unity4.x+Quartz 2.3 +easyui 1.4. ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（转）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 日程管理 http://ww ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出-自定义表模导入
系列目录 前言 上一节使用了LinqToExcel和CloseXML对Excel表进行导入和导出的简单操作,大家可以跳转到上一节查看: ASP.NET MVC5+EF6+EasyUI 后台管理系统(6 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（51）-系统升级
系统很久没有更新内容了,期待已久的更新在今天发布了,最近花了2个月的时间每天一点点,从原有系统 MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+E ...
随机推荐
- NiceMark——我的Markdown编辑器
NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...
- 【分享】标准springMVC+mybatis项目maven搭建最精简教程
文章由来:公司有个实习同学需要做毕业设计,不会搭建环境,我就代劳了,顺便分享给刚入门的小伙伴,我是自学的JAVA,所以我懂的.... (大图直接观看显示很模糊,请在图片上点击右键然后在新窗口打开看) ...
- ASP.NET Aries 入门开发教程4：查询区的下拉配置
背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式 ...
- Visaul Studio 常用快捷键的动画演示
从本篇文章开始,我将会陆续介绍提高 VS 开发效率的文章,欢迎大家补充~ 在进行代码开发的时候,我们往往会频繁的使用键盘.鼠标进行协作,但是切换使用两种工具会影响到我们的开发速度,如果所有的操作都可以 ...
- 【原】FMDB源码阅读（一）
[原]FMDB源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 说实话,之前的SDWebImage和AFNetworking这两个组件我还是使用过的,但是对于 ...
- css实现单行，多行文本溢出显示省略号……
1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...
- Android数据存储之Android 6.0运行时权限下文件存储的思考
前言: 在我们做App开发的过程中基本上都会用到文件存储,所以文件存储对于我们来说是相当熟悉了,不过自从Android 6.0发布之后,基于运行时权限机制访问外置sdcard是需要动态申请权限,所以以 ...
- SQL Server 2016白皮书
随着SQL Server 2016正式版发布日临近,相关主要特性通过以下预览学习: Introducing Microsoft SQL Server 2016 e-bookSQL Server 201 ...
- Entity Framework 延伸系列目录
1.采用MiniProfiler监控EF与.NET MVC项目 2.采用EntityFramework.Extended 对EF进行扩展 3.EntityFramework执行存储过程中遇到的那些坑 ...
- go语言：多个[]byte数组合并成一个[]byte
场景:在开发中,要将多个[]byte数组合并成一个[]byte,初步实现思路如下: 1.获取多个[]byte长度 2.构造一个二维码数组 3.循环将[]byte拷贝到二维数组中 package gst ...