Shulou(Shulou.com)06/03 Report--

ASP.NETMVC4+EF5+EasyUI+Unity2.x injection of the background management system in the front-end page framework construction source code example analysis, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

At first, we have a series of solutions, and we will start to build a new system.

The user experience needs to be paid more and more attention. This time we have left and right columns, the left side is the system menu, and the right side is a collection of pages composed of tabs pages. Each tab can be refreshed and closed separately, because they will be an iframe.

Sharp tools make good work. The following tools are needed.

Visual Studio 2012

You can install MVC4 for vs2010 to develop with VS2010, but it looks like you won't be able to use EF5.0 will be the EF4.4 version, but it doesn't matter.

MVC4 will be mounted on the .NET Framework4.5.

good!

Open the familiar VS to create an empty solution. I have a name called AppSolution, and the class library namespace will start with App, such as App.BLL,App.Web, etc. If you like cool friends, you can use the same name.

Like Joy.BLL,Jason.BLL,zhangsan.BLL, whatever you want. It is also possible to use BLL directly.

We will create a project

1. MVC4.0 's App.Admin website Internet option, select the Razor view

Download Easyui1.3.2: http://www.jeasyui.com/download/index.php first

The highest version is 1.3.4. We chose 1.3.2 because those above 1.3.2 are jquery 2.0.

Jquery2.0 will not support IE8. If you have abandoned IE8, you can experience a higher version and a smaller and faster js library. (that's what he said officially.)

Delete unnecessary things, because there are some things we want, some keep, copy easyui to the appropriate directory, I like to separate scripts and styles.

1. Put jquery.easyui.min.js in the scripts directory

two。 The theme themes is put under content. Here I only keep the gray and blue themes. My aesthetic appreciation of other themes is limited. You can download the new theme at easyui official.

3. Move the Images folder to content

Delete the 4.Filters file

5. Put the material in the content directory. I have prepared the picture material for this project, which is not enough for us to add.

6. Delete the AccountController.cs,HomeController.cs of controllers

7. Delete the cshtml that comes with the View view.

8. I deleted script irrelevant or not compressed, because I didn't think it was necessary to debug. When we encounter problems in the future, we will use other tools to assist debugging, such as httpAnalyes software.

All right, let's start building.

Or create a new "empty" controller and add an index view

Index code

Index @ Styles.Render ("~ / Content/css") @ Styles.Render ("~ / Content/themes/blue/css") @ Scripts.Render ("~ / bundles/home") System Manage MVC4+EF5.0+EasyUI loading. Refresh when the new form opens and closes all closes other tabs closes the right closes the left closes

Here we see the head@Styles.Render ("~ / Content/css") code, which is MVC4's bundle compression technology that outputs css and javascript compression to the page. I've already done it, so all you have to do is take a look. You can also Google his principles. Many prawns in the blog park also gave the answer. Its file is BundleConfig.cs under App_Start.

(function () {$('# tab_menu-tabrefresh') .click (function () {/ * reset the tag * / var url = $(".tabs-panels .panel") .eq ($('.tabs-selected') .index ()) .find ("iframe") .attr ("src") $(".tabs-panels .panel") .eq ($('.var url) .index ()) .find ("iframe") .attr ("src", url);}); / / Open the label $(' # tab_menu-openFrame') .click (function () {var url = $(".tabs-panels .panel") .eq ($('.tabs-selected') .index ()) .find ("iframe") .attr ("src") Window.open (url);}); / / close the current $('# 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") }}); / / close all $('# 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");}); / / close 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);});}) / / close the current TAB $('# tab_menu-tabcloseright') .click (function () {var nextall = $('. Tabs-selected'). NextAll (); if (nextall.length = = 0) {$.messager.alert ('prompt','no more!, 'warning'); return false } nextall.each (function (I, n) {if ($('a.tabsmurf closeboxes, $(n)). Length > 0) {var t = $(' a:eq (0) span', $(n)) .text (); $('# mainTab'). Tabs ('tabsmurt);}}); return false;}) / / close the current left TAB $('# tab_menu-tabcloseleft') .click (function () {var prevall = $('.tabs-selected'). PrevAll (); if (prevall.length = = 0) {$.messager.alert (' prompt','no more!, 'warning'); return false } prevall.each (function (I, n) {if ($('a.tabsmurf closeboxes, $(n)). Length > 0) {var t = $(' a:eq (0) span', $(n)) .text (); $('# mainTab'). Tabs ('tabsmurt);}); return false;});}) Live ('contextmenu', function (e) {/ * select the tab that triggers the current event * / var subtitle = $(this). Text (); $(' # mainTab'). Tabs ('select', subtitle); / / display shortcut menu $(' # 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 ='; return s;} $(function () {$(".ui-skin-nav. Li-skinitem span") .click (function () {var theme = $(this) .attr ("rel"); $.messager.prompt, 'switching skins will reload the system!' , function (r) {if (r) {$.post (".. /.. / Home/SetThemes", {value: theme}, function (data) {_ window.location.reload ();}, "json");}})

The script for index, the script for this home view, he integrated the right-click menu of the tab page I have integrated into the system. Enable compression on Global.asax before running

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 {/ / Note: for instructions on enabling IIS6 or IIS7 Classic mode, / / visit 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); / / enable compression BundleTable.EnableOptimizations = true; BundleConfig.RegisterBundles (BundleTable.Bundles); AuthConfig.RegisterAuth ();}

Add before BundleConfig.RegisterBundles (BundleTable.Bundles);

/ / enable compression

BundleTable.EnableOptimizations = true

Okay, let's see how it works!

If you want to enable the gray theme, then put @ Styles.Render ("~ / Content/themes/blue/css")

Just change it to @ Styles.Render ("~ / Content/themes/gray/css")

In fact, there is nothing to say, but to build a simple framework for the system. If you use easyui, it will be difficult to build it in a few hours, but don't worry, I have prepared the original code for you.

Download code download source code some students have problems with running, please change the BundleConfig.cs under App_Start to

Using System.Web;using System.Web.Optimization;namespace App.Admin {public class BundleConfig {/ / for more information about Bundling, visit 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")); / / use the development version of Modernizr for development and information. Then, when you are ready for production, use the build tool on http://modernizr.com to select only the required tests. Bundles.Add (new ScriptBundle ("~ / bundles/modernizr"). Include ("~ / Scripts/modernizr-*"); bundles.Add (new StyleBundle ("~ / Content/css"). Include ("~ / Content/site.css");}} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.