Interpretation of the ASP.net 5 & MVC6 Series (2): First-Learn the project _ self-study process

First-Knowledge Project

Open VS2015, create a Web project, select ASP.net Web application, and select the ASP.net 5 website template to create the project in the pop-up window, as shown here:

As we can see, the Web forms\mvc\web API checkbox is not available at this time because a lot of changes have been made in asp.net 5, removing the Web Forms feature, bringing together the features of MVC, Web APIs, Web pages, So naturally there is no need for these check boxes. In addition, the creation of a unit test project is not currently available because it is a CTP version.

The directory structure of the solution directory structure and the actual folder for the newly created project is as follows:

Note: The image above is a screenshot of the VS Preview version, in which the default client-side build tool becomes gulp (that is, the configuration file is Gulpfile.js) rather than the original grunt.

The difference between the two graphs is very large, so let's analyze the differences.

Project Structure Differences

By illustration, we can see that in the root directory, not only the project file from csproj to Xproj, but also a lot less than the previous files (such as Web.config), but also a lot of different files and folders, we first list these different file box folders, and then one by one to explain the content.

Files/Folders	function Description
Config.json	The configuration file for the program, similar to web.config.
Project.json	The main configuration of the project is responsible for the assembly, project deployment and so on. Some functions are similar to the previous package.config.
Package.json	NPM's configuration file, NPM is a Nodejs package manager.
Bower.json	Bower Manager's configuration file, Bower is a package manager specifically for managing front-end projects.
Gulpfile.js	is a gulp configuration file, Gulp is a Nodejs based JavaScript Task Manager, and is primarily used to manage content in NPM and Bower in Asp.net5.
Stratup.cs	Program launch entry, similar to Global.asax.
Project_readme.html	The project documentation is of no use.
Wwwroot	static resource files (such as CSS, pictures, JS) storage directory.
Dependencies	Bower and NPM's dependency Management Pack.
References	assembly references, similar to previous, but now have version points (such as ASP.net 5.0 and ASP.net Core 5.0).

Project.json

The Project.json is the core configuration file for the project, as shown in the following example:

{"Webroot": "Wwwroot", "Version": "1.0.0-*", "dependencies": {"Microsoft.AspNet.Diagnostics": "1.0.0-beta4", "MICR Osoft. Aspnet.mvc ":" 6.0.0-beta4 "," Microsoft.AspNet.Mvc.TagHelpers ":" 6.0.0-beta4 "," Microsoft.AspNet.Server.IIS ":" 1.0.0 -beta4 "," Microsoft.AspNet.Server.WebListener ":" 1.0.0-beta4 "," Microsoft.AspNet.StaticFiles ":" 1.0.0-beta4 "," Microsoft.AspNet.Tooling.Razor ":" 1.0.0-beta4 "," Microsoft.Framework.ConfigurationModel.Json ":" 1.0.0-beta4 "," MICROSOFT.FRAMEWORK.CODEGENERATORS.MVC ":" 1.0.0-beta4 "," Microsoft.Framework.Logging ":" 1.0.0-beta4 "," Microsoft.Framework.Logging.Console ":" 1.0.0-beta4 "," Microsoft.VisualStudio.Web.BrowserLink.Loader ":" 14.0.0- Beta4 "," Microsoft.Framework.ConfigurationModel.UserSecrets ":" 1.0.0-beta4 "}," commands ": {" Web ":" Microsoft.aspnet . Hosting--server Microsoft.AspNet.Server.WebListener--server.urls http://localhost:5000 ", gen": " Microsoft.Framework.CodeGeneration "}," Frameworks ": {" dnx451 ": {}," Dnxcore50 ": {}
 }, "Exclude": ["Wwwroot", "Node_modules", "bower_components"], "publishexclude": ["Node_modules", "Bower_comp Onents "," **.xproj "," **.user "," **.VSPSCC "]," scripts ": {" Postrestore ": [" NPM Install "," Bower Install "]," pre Pare ": [" Gulp Copy "]}}

As the detailed parameters of the file are very many, please refer to the details of http://go.microsoft.com/fwlink/?LinkID=517074, where we mainly explain the following 3 types of content.

Webroot

Webroot is the static file address that specifies the Web project, and is currently used to speak the correct location of internal publishing in the directory at the time of publication (details can be found in the Deployment Release section). Note the directory with the Earth icon in the bookstore solution wwwroot is the real folder path, and we can modify it, such as modifying it to wwwroot1 , then the corresponding Webroot value should also be modified to wwwroot1 , because the Gulpfile.js code is passed project.webrootto use the directory so that you can copy the bower-managed front-end libraries to the correct directory.

Assembly Management

At the References node of the solution, we see two categories: DNX 4.5.1 and DNX Core 5.0, where DNX Core 5.0 is what we call the Cloud Optimizer (the Cross-platform version that can be deployed under other operating systems), and DNX 4.5.1 is the same as the previous version of the full functional version, these two versions of the assembly is dependencies managed through the node.

At the first level dependencies , the main definition is the generic assembly reference and version of the project, while the different versions of the assemblies are framworks maintained by the nodes under each version, dependencies such as:

"Frameworks": {"dnx451": {"dependencies": {"
 log4net": "2.0.3"}//* Only in full feature version of the introduction of the Log4net assembly */

 },
 " Dnxcore50 ": {}
}"

Both of these types of assemblies are maintained, have smart hints (including assembly name and version number), after you have defined the assembly you want to use and maintain it, the system automatically downloads the required assemblies from the NuGet, and you can also select restore by right-clicking references Packages to update all assembly references. At the same time you can still manage these assemblies through NuGet in the form of the right key references.

Script Events

The new version of VS2015 allows us to execute a number of custom-based Nodejs events before, after, before, after, before and after the Assembly, before and after the assembly is updated. The definition node for this event in Project.json is scripts, as shown in the following example:

"Scripts": {"
 postrestore": ["NPM Install"],//The NPM install event "prepare" is executed before all assemblies are updated
 : [Gulp Copy]//
 on Open Before the solution, perform the Gulp task and invoke the Bower install method.
}

The specific event names are as follows:

Timing	Description
Prebuild	Execute before Build
PostBuild	Execute after Build
Prepack	Packing before execution
Postpack	Execute after packing
PreRestore	Restoring packages before execution
Postrestore	Execute after restoring packages

Package.json

package.jsonIs the NPM manager's configuration file, because it is deeply integrated by default in VS2015, and it is Nodejs NPM Nodejs The default package manager, so all based Nodejs packages are configured here. The default configuration for this configuration file is as follows:

{
 ' name ': ' asp.net ', '
 version ': ' 0.0.0 ',
 ' devdependencies ': {
 ' gulp ': ' 3.8.11 ',//gulp Task Manager
 "Rimraf": "2.2.8"//Nodejs Package} for deleting files recursively
 }

The above code rimraf is a recursive delete file Nodejs package, we can also refer to other plug-ins, like the project.json file Management assembly, in the package.json file to manage the various packages of front-end programs, such as Jquery,bootstrap and so on, For example, to install a express package, simply add a express string key to the JSON file and select the version, and the system downloads the NPM package automatically and displays it under the solution's Dependencies->NPM node.

Note: Packages that have already been installed cannot be automatically removed (that is, they cannot be removed by removing the configuration in JSON), the package needs to be right-executed and unloaded manually.

Bower.json

All front-end packages are configured with Bower.json files, such as the jquery, bootstrap, angular, and so on that you need, It is managed in the same way as in Project.json and Package.json, and is implemented by declaring the name and version of the package under the Dependencies node.

We can declare a angular package here, after saving it can be seen in the solution dependencie->bower node the angular has been automatically downloaded, compile the project, you can see the wwroot/ Lib can also see the angular folder and the corresponding file.

It is important to have a exportsoverride node in Bower.json that extends the original Bower front-end file copy mechanism, by default bower only copies the files defined by the main node. But sometimes the files we're copying may be more than that, so the Grunt-bower-task plugin expands the functionality, defines the Exportsoverride node, and uses the following rules:

If the Bower package defines the main file node, it is copied to the Wwwroot/lib. If the main node defined by the Bower package is empty, the entire package's directory is copied to wwwroot/lib. If the Exportsoverride node is defined, only the files specified by the node are copied to the Wwwroot/lib.

Note that the key/value defined in the Exportsoverride node, where key represents a subdirectory to which the file is to be copied (that is, under Wwwroot/lib), and value represents the source file directory or file. For example:

"Bootstrap": {
 "js": "Dist/js/*.*",///All files under dist/js/, copy to Wwwroot/lib/bootstrap/js directory
 "CSS": "Dist/css/*.*" , "
 fonts": "Dist/fonts/*.*"
},
"jquery": {"
 :" jquery.{ JS,MIN.JS,MIN.MAP} "//copy jquery.js,jquery.min.js,jquery.min.map file to wwwroot/lib/jquery directory
},

Note: Similar to NPM, the configured packages in the Bower.json are not automatically removed, the packages need to be unloaded from Bower, and the associated files are removed from the wwwroot/lib.

Gulpfile.js

Gulpfile.js is a configuration file for Gulp Task Manager, which, by default, wwwroot/lib clears all files in the directory (clean Task) and then copies a copy from the bower_components directory (copy Task).

Changes to the file configuration affect the display in VS, as shown in the Task Runner Explorer following illustration:

Take the default configuration for example, the configuration file registered two tasks under the task directory, clean and copy, and by default after the VS solution clears the compilation, and then performs the cleaning task again, but we can also bind any one of the execution points to the task, and we can right-click the task-> binding- > before building, and then clicking on the Refresh button on the left side of the panel, the binding content is kept synchronized in the first line of the Gulpfile.js code as follows:

<binding beforebuild= ' copy ' clean= ' clean '/>

At this point, deleting all the files in the Wwwroot/lib directory and recompiling the bookstore project automatically generates all the required files in the Wwwroot/lib directory, and the various packages defined in Bower.json are copied to the directory according to the configuration requirements.

Clean task

The main role of the clean task is to delete all the front-end files in the Lib directory before compiling or cleaning up the solution to copy the new files. The specific analysis is as follows:

var gulp = require ("Gulp"),//reference gulp
 Rimraf = require ("Rimraf"),//reference Rimraf
 fs = require ("FS");//reference file system

Eva L ("var project =" + Fs.readfilesync ("./project.json")); Read Project.json profile

var paths = {
 bower: "./bower_components/",
 Lib: "./" + Project.webroot + "/lib/"
};

Gulp.task ("Clean", function (CB) {//Registered Clean Task
 Rimraf (Paths.lib, CB);///delete all files in the Lib directory recursively)
;

Copy Task

The copy task is very simple, the Bower_components directory under the eligible files copied Lib directory, analyzed as follows:

Gulp.task ("Copy", ["clean"], function () {//Register copy task
 var bower = {//directory correspondence
 "bootstrap": "bootstrap/dist/**/*.{ Js,map,css,ttf,svg,woff,eot} ",
 " Bootstrap-touch-carousel ":" bootstrap-touch-carousel/dist/**/*.{ JS,CSS} ",
 " hammer.js ":" hammer.js/hammer*.{ Js,map} ",
 " jquery ":" jquery/jquery*.{ Js,map} ",
 " jquery-validation ":" Jquery-validation/jquery.validate.js ",
 " jquery-validation-unobtrusive ": "Jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
 } for

 (Var destinationdir in bower) {
 GULP.SRC (Paths.bower + bower[destinationdir])/Read source directory
 . Pipe (Gulp.dest (paths.lib + destinationdir));//Copy to destination folder c13/>}
});

Grunt Tasks

In VS2015, although the default support is the Gulp build tool, it also supports the grunt build tool, which is similar to gulp, and uses grunt to refer to a similar dependency package, as shown in the following example:

{
 "version": "0.0.0", "
 name": "",
 "Devdependencies": {
 "grunt": "0.4.5",//grunt Task Manager
 Grunt-bower-task ":" 0.4.0 "//Grunt Bower Admin plugin
 }
}

The above code grunt-bower-task is a management plug-in based on the grunt bower automatic execution bower of the install command to install the Bower package.

Note: Packages that have already been installed cannot be automatically removed (that is, they cannot be removed by removing the configuration in JSON), the package needs to be right-executed and unloaded manually.

Gruntfile.js is Grunt Task Manager configuration file, to use grunt, you need to create Gruntfile.js file, by default, the profile is configured only the Grunt-bower-task plug-in task execution, the plug-in will read the Bower.json configuration information, the relevant Packages bower:install are installed by command to the specified directory (the default is the Wwwroot/lib directory set by the TARGETDIR).

Changes to the file configuration affect the display in VS, as shown in the Task Runner Explorer following illustration:

Take the default configuration for example, the profile registers a task named default displayed in the panel (in the Alias Tasks list), which is also the default task name for grunt, but does not define when the task is executed, so we can then bind the task to an execution point in time , we can right-click the task-> bind-> before building, then click on the Refresh button on the left side of the panel, when the bound content is synchronized in the first line of Gruntfile.js, the code reads as follows:

<binding beforebuild= ' default '/>

At this point, deleting all the files in the Wwwroot/lib directory and recompiling the bookstore project automatically generates all of the required files in the Wwwroot/lib directory, and the various packages defined in Bower.json are replicated to the profile according to the configuration requirements. The tasks in the task are the tasks that are analyzed from the package contained in Grunt.loadnpmtasks, such as Bower.
Let's practice an example, assuming that before we compile the Site.css file in the wwwroot/css/directory to compress (compressed into site.min.css), we can install the following methods:

First, define a grunt plug-in that compresses CSS code in Package.json:

{
 "version": "0.0.0", "
 name": "",
 "devdependencies": {"
 grunt": "0.4.5",
 "Grunt-bower-task": " 0.4.0 ",
 " grunt-contrib-cssmin ":" 0.12.2 "/* New plugin */
 }
}

Then under the Grunt.initconfig Bower sibling node, add the following:

/* Compressed css*/
cssmin: {
 target: {
 options: {
  sourcemap:true,
 },
 files: {/
  * Output file path: Original file path */
  ' wwwroot/css/site.min.css ': ' Wwwroot/css/site.css
 '
 }
}}

Finally register this plugin, the code is as follows:

Grunt.loadnpmtasks (' grunt-contrib-cssmin '); /* Compression css*/

This way, you can see the Cssmin task in the Tasks Runner Explorer panel and run it, and of course you can add the task and the default task to execute before compiling the build. The code is as follows:

<binding beforebuild= ' default, Cssmin '/>

In addition, in giving some examples, one is for JS compression, one is for less compilation, the code is as follows:

/*package.json*/
"grunt-contrib-uglify": "0.9.1",
"grunt-contrib-less": "1.0.1"

/*gruntfile.js*/
/* Compressed js*/
uglify: {
 target: {
 options: {
  sourcemap:true,
 },
 files: {
  ' wwwroot/ Scripts/site.min.js ': ' Wwwroot/scripts/site.js '
 }
 }
,/
* compile less*/
less: {
 // Development version (no compression)
 development: {
 options: {
  sourcemap:true
 },
 files: {
  ' wwwroot/styles/ Site.css ': ' Wwwroot/lesses/site.less '
 }
 },
 //production version (compression)
 production: {
 options: {
  Compress:true
 },
 files: {
  ' wwwroot/styles/site.min.css ': ' Wwwroot/lesses/site.less '
 }
 }
}
/*...*/
grunt.loadnpmtasks (' grunt-contrib-uglify '); * Compression js*/
grunt.loadnpmtasks (' grunt-contrib-less ') ; /* Compile less*/

Recommendation: Do not bind the same task over multiple periods.
Recommended: Grunt also has a plug-in for monitoring file changes, such as the compatibility of CSS file changes, once modified on the call to the CSS Compression command, please refer to the grunt-contrib-watch plugin.

Config.json

Config.json is the previous web.config, but no web.config have all kinds of configuration so powerful, where the configuration of various functions are transferred to the Startup.cs file in the form of code, and the other part of the information configuration content, placed in the Config.json file in JS On to save the format.

Note that the information for this file is not automatically loaded by default, but rather it is necessary to manually load the configuration information, as follows:

Configuration = new Configuration () in the constructor of the Startup.cs class
  . Addjsonfile ("Config.json")
  . Addenvironmentvariables ();

The configuration file is loaded through the configuration instance, stored in the configuration property so that it can be used elsewhere, while the key value in use is defined hierarchically, as the following default:

{
 "AppSettings": {"Sitetitle":
 "WebDemo01"
 }
}

To get the link string, you need to use the following key value:

var connstring = configuration.get ("Appsettings:sitetitle");

It's not web.config convenient to use, but it's the only way to be compatible with other operating systems.

Note: In Asp.net5, configuration information not only supports JSON format, but also supports INI, XML and other formats, please refer to the following configuration information Management Section in detail.

Startup.cs

Startup.csis the startup portal for the entire program, similar to the Global.asax, and the Global.asax file, which plays the role of global configuration information. Let's analyze several important roles of this document.

First initialize the underlying configuration information in the constructor (refer to the Configuration Information Management Section for detailed configuration information), note that the initialized configuration information here is bound to a Configuration property so that the other two methods can be used later, if you want to use them in other classes. You need to save the instance to a different place, such as a static variable.

ConfigureServicesThe method is the core of the dependency injection, in the method's incoming parameter services, first preserving the type definition defined in the default dependency injection, and then in this method, we can continue to register the dependency injection type definition, the details of the dependency injection, and read the Dependency Injection section.

At the same time some important features need to be opened, but also need to open here, such as the addition of MVC module, you need to use such as downward sentence:

Services. Addmvc ();

The reason is because, in the new version of ASP.net 5, in addition to the most basic modules, most of the modules are pure component, this is called the middleware, and components in use, the first need to add the module before use. For example, to add an EF module, you need to call

Services. Addentityframework () method.

And another configure method, as the name implies is to configure a variety of middleware components, in general, the method of configuring the module is to invoke a similar app. Usexxx () Such a method, such as using a static file processing process, invokes the following statement:

App. Usestaticfiles ();

If you want to use the features of MVC, you need to use the app. Usemvc method, when you call these methods, you can configure and pass in the parameters of the response.

Note that the services.addxxx () type method used in Configureservices and the app.usexxx () type used in the Configure method are extension methods, addxxx () The method is extended on the Iservicecollection interface, and the Usexxx () method is extended on the Iapplicationbuilder interface.

About the dependency injection mentioned in this file, and the 3 types of parameters in the Configure method: Iapplicationbuilder, Ihostingenvironment, iloggerfactory; we'll explain in detail in the following chapters.

Other

Through the view, you can find that the views directory of the web.config also removed, in the RC version, to unify the reference namespace, need in the _viewstart.cshtml or _globalimport.cshtml file, the following chapters we will talk about.

We do not have to make any changes, F5 run the project can run, because the default is using IIS Express, so will automatically open the new site home page. If you are not IIS Express, read the following compilation and deployment chapters.

Scheme Introduction for the JSON configuration file above

For a scheme definition of the above configuration file (including Global.json, Project.json, Config.json, Package.json, Bower.json), and for the definition of the JS parameter configuration, please visit the http://schemastore.org/json/ for view.