A Brief Introduction To ASP.NET Core

Let’s understand with a diagram.

diagram

From the above diagram, we can see that ASP.NET has two variations, one is .NET framework which is now updated to 4.6 or later. In this framework, we can create Windows based applications, ASP.NET Web forms, and Web API. The other one is newly created web source which is .NET Core that runs and can develop cross platform applications which include Windows, Mac, and Linux.

In the above diagram, .NET Core has again two variations on which we can run our apps by targeting .NET Core and .NET Framework. As .NET Core is in the initial stage (not fully matured), it doesn’t have all the features of .NET Framework.

Let’s differentiate both, .NET Framework and .NET Core.

.NET Framework	.NET Core
Built on .NET Framework run time	Built on .NET Core and .NET Framework
Developed and run on Windows Platform only	Developed and run on Cross platform
MVC,WebAPI,SignalR,Dependency Injection supported	Built in Dependency Injection
MVC and WebAPI controllers are separated	MVC and WebAPI controllers are unified, inherited from same base class.
No new tooling	New tooling tools (Bower, grunt, and gulp) are introduced

Let's get started with .NET Core. First, you need to install Visual Studio 2015 with Updates 3. You can download it from here. After that, download the .NET Core SDK which you can download from here. Install VS and .NET Core SDK on your PC/Laptop .

Now, let's create a simple project.

Open Visual Studio ->File->New->Project.

diagram

Click OK and let's choose and Empty template.

diagram

Click on OK. Our sample demo will be created.

diagram

Now, in our solution folder, we have two folders which are Solution Items and Src. Let's try to understand each of them one by one.

diagram

In Solution Items folder, there is a file, global.json, which contains the following code.

diagram

Explanation

"projects": [ "src", "test" ] : This is an array which specifies the list of projects which are included in the solution.

"sdk": Specifies the information and version of the SDK. In this above snippet, the version is 1.0.0 and this has two properties - architecture and runtime.

Now here, we will edit some code and include architecture and runtime .

diagram

Here, we had added architecture and runtime. Architecture is x6 machine and runtime specifies as clr = ASP.NET 4.6 runtime and coreclr=.NET Core 1.0 runtime.

So, this folder is through Solution Items. Now, let's try to understand the other folder which is the Src folder. In that, we will understand project.json file.

diagram

Dependencies: It includes the dependencies packages that are required to run the application

Here, I have set the dependency as AspNEtCore MVC.

Frameworks
Defines the framework on which we want to build our app.
Build Options
Options that are passed to compiler.
RunTime Options
Manage GC options at runtime.
Publish Options
The file/ folder which we want to include or exclude while publishing our application.
Scripts
Specifies the script to be run during building or publishing the app .

The next file which we are going to see is Program.cs file

As you can see from the above snippet, program.cs main method uses WebHostBuilder which is used to create web application host.
UseKestrel()
Defines the Web Server. ASP.NET Core supports IIS hosting and IIS Express, for self hosting scenarios using kestrel and WebListner HTTP servers .

Two different HTTP servers
1. AspNetCore.Server.Kestrel (Kestrel, cross-platform)
2. AspNetCore.Server.WebListener (Web Listener, Windows-only, preview)
UseContentRoot(Directory.GetCurrentDirectory())
Application based path that specifies to the root directory of your application.
UseIISIntegration()
For hosting IIS and IIS Express .
UseStartup<Startup>()
Specify the startup class, F12, and see the details as
Build();
The build and run builds the IwebHost which will host the app and start it listening for incoming HTTP requests.
Run();

Now, we have covered almost all of the introductory parts of .NET Core. Let's try to build a simple app.

Here, we will create an MVC application. As per our earlier part, now let's try to modify project.json file to enable MVC 6 features.

diagram

Write this code in Project.json file. It will restore the dependencies in the references folder.

diagram

Now, let's add MVC middleware in config section in startup class file.

diagram

Now, in configure service methods, we need to add framework services.

diagram
So, our MVC folder structure is as below.

diagram

As you can notice, this folder structure is similar to our MVC folder structure. Here, the change is that the new files like _ViewImports.cshtml and _ViewStart.cshtml are responsible for setting up the namespace that can be accessed by the respective views folder in MVC6 , which was done previously by web.config file in views folder.

We are almost done setting up the application. Now, let's tune our app and see what output we get.

diagram

Now, let's see the client side dependencies of .NET Core.

Bower and NPM are package managers

Bower manages client-end dependencies. Bower also manages libraries like jQuery and AngualrJS .
NPM installs the modules and Gulp is the task runner. NPM manages the entire dependencies whereas Bower does not . It's good to use NPM over Bower.

Right click on project, go to Add > New Item > Client-side then select Bower Configuration file. Then, click Add.

diagram

If the solution does not have bower.json file, you need to implement it. Here, in my solution, bootstrap and various packages are installed.

Let's add NPM configuration file, add dependencies, and save changes.

diagram

Name it as package.json and write the dependencies.

diagram
This will install the dependencies.

Let's add gulp file and modify the code.

diagram

Click on the task runner it will install various configurations and various other dependencies to it .

diagram

Now we will update package.json file and gulp file for Angularjs2 changes

diagram

We modified the dependencies here in package.json file. It will restore the various packages that are associated with it .

Modify gulpfile.js file

diagram

After modifying the file run the taskrunner and click on copy all this will restore and install all the dependencies associated with it .

diagram

Add a typescript file name it as tsconfig.json and paste this code in that typescript file as