700字范文 > ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]

ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]

时间：2018-11-05 12:37:02

系列目录

前言

为了符合后面更新后的重构系统，本文于-10-31日修正一些截图，文字
我们有了一系列的解决方案，我们将动手搭建新系统吧。
后台系统没有多大的UI视觉，这次我们采用的是标准的左右分栏，左边是系统菜单，右边是一个以tabs页组成的页面集合，每一个tab都可以单独刷新和关闭

开发工具

Visual Studio （以上）

开始搭建

打开我们熟悉的VS创建一个空解决方案。我起了个名字叫Apps，类库命名空间将与Apps开头

如Apps.BLL,Apps.Web等命名

1. 新建MVC5.0的Web站点

2.前端框架EasyUI

EasyUI下载：有多新用多新/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>

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/themes/blue/css")

@Scripts.Render("~/bundles/home")

</head>

</div>

<div id="LoginTopLine">System Manage</div>

<div id="LoginBotoomLine">MVC4+EF5.0+EasyUI</div>

</div>

</div>

</div>

</div>

</div>

刷新</div>

在新的窗体打开</div>

关闭所有</div>

关闭其他标签页</div>

</div>

关闭右边</div>

关闭左边</div>

关闭</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 经典模式的说明，

// 请访问 /?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 的详细信息，请访问 /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 的开发版本进行开发和了解信息。然后，当你做好

// 生产准备时，请使用上的生成工具来仅选择所需的测试。

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

"~/Scripts/modernizr-*"));

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

}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。