Asp.net mvc5 references ExtJS6 [starting from the whole network] And mvc5extjs6

Asp.net mvc5 references ExtJS6 [starting from the whole network] And mvc5extjs6

Abstract: How does VisualStuio2015 asp.net mvc reference ExtJS6 and use BundleConfig.

First download the ExtJS6.0 gpl version. ExtJS has its own program framework, but we need asp.net mvc5. ExtJS is only used as the interface library.

Next, extract the core part of the downloaded ExtJS6. The directory structure is as follows:

All the items to be referenced are under the build directory. The directory contains more than 400 mb, which is too large for the vs project reference. Copy the build directory to the VS project directory and rename it ExtJS60.

1. delete the file index.html?release-notes.html.

2. Delete the debugging files. This directory contains many * debug. js and * debug. scss files to delete. Use Everything

In this case, more than 40 MB is left. Can directly use the http://pan.baidu.com/s/1qYMtE0W password I handled: 1q14.

Next, use @ Scripts. Render and @ Styles. Render to reference ExtJS. MVC provides the BundleConfig. cs file for adding js scripts and css styles. The View can be called in a unified manner and JavaScript and css can be compressed.

\ App_Start \ BundleConfig. cs

Using System. Web; using System. Web. Optimization; namespace WebApplication1 {public class BundleConfig {// For details about binding, visit http://go.microsoft.com/fwlink/?LinkId=301862 Public static void RegisterBundles (BundleCollection bundles) {bundles. Add (new ScriptBundle ("~ /Bundles/jquery "). Include ("~ /Scripts/jquery-{version}. js "); bundles. Add (new ScriptBundle ("~ /Bundles/jqueryval "). Include ("~ /Scripts/jquery. validate * "); // use the development version of Modernizr to be used for development and learning. Then, use http://modernizr.com To select only the required test. Bundles. Add (new ScriptBundle ("~ /Bundles/modernizr "). Include ("~ /Scripts/modernizr-* "); bundles. Add (new ScriptBundle ("~ /Bundles/bootstrap "). Include ("~ /Scripts/bootstrap. js ","~ /Scripts/respond. js "); bundles. Add (new StyleBundle ("~ /Content/css "). Include ("~ /Content/bootstrap.css ","~ /Content/site.css ")); // *********************************** ScriptBundle Ext_ScriptBL = new ScriptBundle ("~ /ExtJS "); Ext_ScriptBL.Include ("~ /ExtJS60/ext-all.js "); Ext_ScriptBL.Include ("~ /ExtJS60/classic/locale/locale-zh_CN.js "); // Chinese Resource ScriptBundle jquery_ScriptBL = new ScriptBundle ("~ /Jquery "); jquery_ScriptBL.Include ("~ /Scripts/jquery-2.1.4.min.js "); Ext_ScriptBL.Transforms.Clear (); bundles. add (jquery_ScriptBL); bundles. add (Ext_ScriptBL); CssRewriteUrlTransformWrapper crut = new CssRewriteUrlTransformWrapper (); StyleBundle StyleBL = new StyleBundle ("~ /Extjs_css_tron "); StyleBL. Include ("~ /ExtJS60/classic/theme-tron/resources/theme-triton-all_1.css ", crut); StyleBL. Include ("~ /ExtJS60/classic/theme-tron/resources/theme-triton-all_2.css ", crut); StyleBundle StyleBL2 = new StyleBundle ("~ /ExtJS_CSS_neptune "); StyleBL2.Include ("~ /ExtJS60/classic/theme-neptune/resources/theme-neptune-all_1.css ", crut); StyleBL2.Include ("~ /ExtJS60/classic/theme-neptune/resources/theme-neptune-all_2.css ", crut); StyleBundle StyleBL3 = new StyleBundle ("~ /ExtJS_CSS_gray "); StyleBL3.Include ("~ /ExtJS60/classic/theme-gray/resources/theme-gray-all.css ", crut); bundles. add (StyleBL); bundles. add (StyleBL2); bundles. add (StyleBL3 ); ************************}} public class CssRewriteUrlTransformWrapper: IItemTransform {public string Process (string includedVirtualPath, string input) {return new CssRewriteUrlTransform (). process ("~ "+ VirtualPathUtility. ToAbsolute (includedVirtualPath), input );}}}

Right-click the Controllers directory → add → controller → mvc5 controller is empty. The Controller name ExtTest. Add view (do not layout the page)

\ Views \ ExtTest \ Index. cshtml

@ {Layout = null ;}<! DOCTYPE html> 
Run to see the effect: