asp.net mvc4+ef5+easyui+unity2.x injection Background Management System front-end page framework to build source sharing _ practical skills

In the beginning, we have a series of solutions, we will start to build a new system.

The user's experience already needs to pay more and more attention, this time we are the left and right column, the left-hand side is the system menu, the right-hand side is a Tabs page composition page collection, each tab can refresh and close individually, because they will be an IFRAME

工欲善其事 its prerequisite. The following tools are required.

Visual Studio 2012

You can install MVC4 for vs2010 with VS2010, but it seems like you will not be able to use EF5.0 will be EF4.4 version, but this is not much of a relationship.

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

Good!

Open our familiar vs to create an empty solution. I got a name called Appsolution, the class library namespace will be named after the App, such as App.bll,app.web, like a cool friend you can name

such as Joy.bll,jason.bll,zhangsan. BLL, whatever you want. It's directly BLL.

We will create the project

1. MVC4.0 's app.admin Web site internet option, select Razor View

　　

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

The highest version is 1.3.4 we chose 1.3.2 because 1.3.2 above is jquery 2.0

Jquery2.0 will not support IE8. If you have abandoned IE8, you can experience a higher version and a smaller, faster JS library. (as the official said)

Delete unnecessary things, because some things we want, some reservations, copy Easyui to the corresponding directory, I like to open the script and style.

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

2. Subject themes to the content here I only keep the gray and blue theme, other topics my aesthetic has limits, you can go to Easyui official download new theme

3. Move the images folder to the content

4.Filters File Erase

5. Put the material into the content directory, I have prepared for everyone this project to use the picture material, not enough we add

6. Remove the Controllers Accountcontroller.cs,homecontroller.cs

7. Delete the cshtml from the view.

8. I have deleted the script or not the compression, because I think it is unnecessary to debug. Later we encounter problems, with other tools to assist debugging, such as Httpanalyes software, etc.

All right, let's get this built.

Or create a new "empty" controller, add the index view

Index Code

<! DOCTYPE html>  

Here we see the code for Head@styles.render ("~/content/css"), which is the MVC4 compression technology that compresses CSS and JavaScript to the page. I've done it, so you can just look at it. Google can also make a few of his principles. Blog Park A lot of prawns are also given the answer. Its file is BundleConfig.cs

under App_start.

$ (function () {$ (' #tab_menu-tabrefresh '). Click (function () {/* * reset the label/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);
  }); Open the label in a new Window $ (' #tab_menu-openframe '). Click (function () {var url = $ (". Tabs-panels. Panel"). EQ ($ ('. tabs-selected '). Ind
  EX ()). Find ("iframe"). attr ("src");
  window.open (URL);
  });
  Closes 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 (l, N) {if ($ (this). Pare
   NT (). Next (). is ('. Tabs-close ')} {var t = $ (n). text ();
   $ (' #mainTab '). Tabs (' Close ', t);
  }
  }); Open Menu $ (". Layout-button-right"). Trigger (" click ");
  }); Closes tab $ (' #tab_menu-tabcloseother ') except for the current. Click (function () {var currtab_title = $ ('. tabs-selected. Tabs-inner span ')
  ). text ();
   $ ('. Tabs-inner span '). each (function (i, n) {if (). () () () () () (). Next ().
   if (t!= currtab_title) $ (' #mainTab '). Tabs (' Close ', t);
  }
  });
  });
  Closes the currently right tab $ (' #tab_menu-tabcloseright '). Click (function () {var nextall = $ ('. tabs-selected '). Nextall ();
   if (nextall.length = 0) {$.messager.alert (' hint ', ' Front no! ', ' 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;
  });
  Closes the currently left Tab $ (' #tab_menu-tabcloseleft '). Click (function () {var prevall = $ ('. tabs-selected '). Prevall ();
   if (prevall.length = 0) {$.messager.alert (' hint ', ' behind no! ', ' 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 () {/* is the tab binding right/$ (". Tabs Li"). Live (' ContextMenu ', function (e) {/* Select the tab of the current triggering event/var subtitle = $ (This)
 . text ();
 $ (' #mainTab '). Tabs (' select ', subtitle);
 Displays the 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 ', {titl
 E: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%; h
 eight:99% "></iframe>";
return s; } $ (function () {$(". Ui-skin-nav. Li-skinitem span"). Click (function () {var theme = $ (this). attr ("rel"); $.messager.confirm (' Hint ', ' toggle skin will reload the system! ', function (r) {if (R) {$.post ("... /..
  /home/setthemes ", {value:theme}, function (data) {window.location.reload ();}," JSON ");
 }
  });
 });
 });

Index script, this home view script, he integrates the tab page of the right button menu I have integrated into the system. To enable compression in 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,
 //please 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 ();}}

In Bundleconfig.registerbundles (bundletable.bundles);

Enable compression
Bundletable.enableoptimizations = true;
OK, let's see the effect!

If you want to enable the gray theme then in the @styles.render ("~/content/themes/blue/css")

Modify 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 not less than a few hours is very difficult to build up, but don't worry, I prepared the original code for Everyone

Code download Download the source of some students run a problem please app_start under the BundleConfig.cs change to

Using System.Web;

Using System.Web.Optimization; Namespace App.admin {public class Bundleconfig {//For more information about bundling, please 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")); Develop and understand information using the Modernizr development version.
  Then, when you are ready to prepare//production, use the build tools on the http://modernizr.com to select only the tests you want. Bundles. ADD (New Scriptbundle ("~/bundles/modernizr").

  Include ("~/scripts/modernizr-*")); Bundles. ADD (New Stylebundle ("~/content/css").





 Include ("~/content/site.css"));
 }
 }
}

About code: The code does not upload the entire solution, you download decompression, only need to refer to the existing class library can, about the inside of the material, do not understand can ask me, which contains all the materials to be used in the future, please pay attention to the system of child shoes do not delete, you can modify

Next announcement: a nice landing page

Author: ymnets
Source: http://ymnets.cnblogs.com/