A Brief Introduction To ASP.NET Core

Let’s understand with a 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.



Click OK and let's choose and Empty template.



Click on OK. Our sample demo will be created.



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.



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



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 .



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.

• 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.



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



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



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


So, our MVC folder structure is as below.



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.



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.



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.



Name it as package.json and write the dependencies.


This will install the dependencies.

Let's add gulp file and modify the code.



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



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



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

Modify gulpfile.js file



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



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

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",

        //add this to compile app component
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "module": "system",
        "moduleResolution": "node"
    },
    "exclude": [
        "node_modules",
        "wwwroot/lib"
    ]
}

Now, let's add bootstrap and component module.

Bootstraping



Component

Imports the component from Angular JS 2 library.



Now, just reference the scripts View page and Index Page.



Index Page



 Now, let's run the app and see the output.