ASP.NET 5

Firstly, we will understand what are the additional features provided in ASP.NET 5. The basic advantage is that ASP.NET 5 easily runs on Windows OS. The other difference is we can able to see that the concept of web Form is removed.

Step 1: Create new project in visual studio and select web Application.

Then you can able to see the following screen.

Empty

Now you can see ASP.NET 5 Templates.

Note: If you are unable to see the ASP.NET 5 Templates, then ASP.NET 5 is not installed on your machine.

Please go through URL.

There are 3 options available: empty, web API, and Web Application.

I am selecting empty option. Please find the following screenshot for solution explorer that is giving the clear picture of folder and file structure in ASP.NET 5 application.

There are two main parts present,

1. Solution Items

  1. global.json
  2. NuGet.Config

2. Src

  1. Application solution,

    Application solution

Now, we will go through more details about those files,

global.json

If you open this file then it contents,

  1. {
  2. "projects": [ "src", "test" ],
  3. "sdk": {
  4. "version": "1.0.0-beta7"
  5. }
  6. }
src means Application Solution and also include version of the application.

NuGet.Config

This is config file like web.config or App.config and maintains the neget packages data. As all of us know the nuget packages are the online dot net references that we can manage in our application using nuget.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <configuration>
  3. <packageSources>
  4. <!--To inherit the global NuGet package sources remove the <clear/> line below -->
  5. <clear />
  6. <add key="api.nuget.org" value="https://api.nuget.org/v3/index.json" />
  7. </packageSources>
  8. </configuration>
Now we can move towards application

Solution explorer

What is DNX?

Simple word DNX means .NET Execution Environment (DNX). This is useful for cross platform building the ASP.NET application.

Startup.cs

This is new file included in ASP.NET 5 and is the startup file of application.
  1. public class Startup
  2. {
  3. public void ConfigureServices(IServiceCollection services)
  4. {
  5. }
  7. public void Configure(IApplicationBuilder app)
  8. {
  9. app.Run(async (context) =>
  10. {
  11. await context.Response.WriteAsync("Hello World!");
  12. });
  13. }
  14. }
Configure function is the place where we can specify the default code that should get executed first. It is same like previously we are mentioning this part in global.asax file.

wwwroot

This folder contains all files like images, css, js.

Also we can add Bower, NPM in wwwroot

Explorer

We can go one by one with this

Client-Side Development

Npm and bower both are used to add online JavaScript in our application. Just like nuget packages we are adding for downloading the .net references for our application.

What is Bower?

Right click on the web project's name in the src folder and choose Add » New Item.

Configuration

bootstrap
  1. {
  2. "name": "ASP.NET",
  3. "private": true,
  4. "dependencies": {
  5. "jquery": "2.1.4",
  6. }
  7. }
What is npm?

npm
  1. {
  2. "version": "1.0.0",
  3. "name": "ASP.NET",
  4. "private": true,
  5. "devDependencies": {
  6. }
  7. }
What is grunt and gulp?

Gulp is javascript task runner.

The following are the tasks done by Gulp:

  • Bundling and minifying libraries and style sheets.
  • Refresh browser as save a file.
  • Running unit tests.

Gulp

Please find the following gulp file for reference:

  1. /// <binding Clean='clean' />
  3. var gulp = require("gulp"),
  4. rimraf = require("rimraf"),
  5. concat = require("gulp-concat"),
  6. cssmin = require("gulp-cssmin"),
  7. uglify = require("gulp-uglify"),
  8. project = require("./project.json");
  10. var paths = {
  11. webroot: "./" + project.webroot + "/"
  12. };
  14. paths.js = paths.webroot + "js/**/*.js";
  15. paths.minJs = paths.webroot + "js/**/*.min.js";
  16. paths.css = paths.webroot + "css/**/*.css";
  17. paths.minCss = paths.webroot + "css/**/*.min.css";
  18. paths.concatJsDest = paths.webroot + "js/site.min.js";
  19. paths.concatCssDest = paths.webroot + "css/site.min.css";
  21. gulp.task("clean:js", function (cb) {
  22. rimraf(paths.concatJsDest, cb);
  23. });
  25. gulp.task("clean:css", function (cb) {
  26. rimraf(paths.concatCssDest, cb);
  27. });
  29. gulp.task("clean", ["clean:js", "clean:css"]);
  31. gulp.task("min:js", function () {
  32. gulp.src([paths.js, "!" + paths.minJs], { base: "." })
  33. .pipe(concat(paths.concatJsDest))
  34. .pipe(uglify())
  35. .pipe(gulp.dest("."));
  36. });
  38. gulp.task("min:css", function () {
  39. gulp.src([paths.css, "!" + paths.minCss])
  40. .pipe(concat(paths.concatCssDest))
  41. .pipe(cssmin())
  42. .pipe(gulp.dest("."));
  43. });
  45. gulp.task("min", ["min:js", "min:css"]);
What is the use of gulp file

Task runner explorer

Web application

Run

This document only gives you overall ASP.NET 5 understanding and the new features added.