ASP.NET Core Tutorial for Beginners

By | February 17, 2017
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

With this article today, we are going to start a tutorial Series on ASP.NET Core for developers having knowledge of existing Microsoft web technologies (including ASP.NET Web Forms, ASP.NET MVC, ASP.NET Web API etc.) but wanted to start the new ASP.NET Core from the very beginning. Here we will start with basic core concepts and further add more practical articles to this ASP.NET Core Tutorial Series.

ASP.NET Core Tutorial – Start as a Beginner

ASP.NET Core 1.0 or ASP.NET 5 – MVC6 is a re-write version of ASP.NET 4.6 with following key features:

  • ASP.NET Core is Open-Source.
  • It’s a framework that is Cross-platform, means can run on Linux or MacOS. Before that .NET Framework (as a whole) can only be used in Windows platform. This is considered as a huge enhancement.
  • Ideal for building Web applications, Iot apps and mobile backends.
  • Cloud ready configuration.
  • ASP.NET Core 1.0 is smaller in size as compared to ASP.NET 4.6 framework as it runs on stripped down version of .NET Framework i.e. .NET Core 1.0.ASP.NET CORE Tutorial

At a broader view, we must be clear that:

  • ASP.NET 5 is now renamed as ASP.NET Core 1.0
  • .NET Framework 5 will be known as .NET Core 1.0 and
  • Entity Framework 7 will be renamed to Entity Framework Core 1.0.

Key Features of ASP.NET 5 or ASP.NET Core 1.0:

Key Features of ASP.NET Core

Cross Platform Support:

.NET Core is Cross-platform web framework, that is more modular and cloud optimized, can be Build and Run on Windows, Mac, Linux for modular development stack.  The libraries are modular and distributed via NuGet packages. It was architected to support an optimized development framework for web application that are deployed to the cloud. Its libraries are standard that minimizes allocations and the overall memory of our system.

Open Source:

ASP.NET Core is fully open source, developed with the community and with Microsoft’s support. Not only the source code but documentation is open source available in github and docs.asp.net respectively. We developers can download, inspect, modify and enhance it. Whatever the good work we do as a ASP.NET Core community member, we can forward it to Microsoft for approval.

Performance:

Performance has always been an issue for Microsoft .NET and to overcome this issue they introduced new managed web server i.e. “Kestrel” with .NET Core. This new Web Server written in C# is designed from scratch to be the fastest available .NET Server.

Microsoft is very successful in achieving it’s goal with respect to performance as ASP.NET Core now lands among the top in the list. Below is a comparison of ASP.NET Core with other technologies:ASP.NET Core Performance

https://twitter.com/davidfowl/status/700139258279899137

Built-In Dependency Injection:

Dependency Injection is a technique used normally to achieve loose coupling between objects and their dependencies. Using DI, an object can be used with other services without having much details about it. Dependency Injection is now built-in with ASP.NET Core framework as a Dependency Injection service container with minimal features.

Single/Unified Programming Model for MVC and Web API:

Microsoft has unified ASP.NET MVC and Web API into single programming Framework, removing the overlap between these different frameworks. Unified Framework simplifies the development process by introducing a unique namespace i.e. Microsoft.AspNet.Mvc. Also making integration easier with client-side frameworks like Grunt/Bower and simplifies adding cross-cutting concerns with controller.Unified MVC and Web API

Modularity:

While working with large-scale projects, it’s mostly difficult to maintain code as project grows. So, package based development helps maintain and update projects easier. NuGet package is now the default standard for adding new functionality to ASP.NET Core applications, that includes adding frameworks, libraries and even core features of ASP.NET.

Project.json:

The Project.json file is used for .NET Core projects to define project metadata, compilation information, and dependencies.

Followings are some of the important properties of Project.json:

Name Description Example
 name It is the name of the package, used in the assembly name. The data type name is string.  { “name”: “WebDevDemo” }
 version The data  type version is string. It is used for the NuGet package.  { “version”: “1.0.0-*” }
description It is used in the assembly to a longer description of the project. { “description”: “A Demo for my ASP.NET Core Project”}
copyright It is also used in the assembly properties , used to copyright information on project. { “copyright” : “WebDevTutorial 2017”  }
title It is not allowed when using name property. It gives the heading of the project. { “title” : “My Library” }
entryPoint The entrypoint method for the project. Main by default. { “entryPoint” : “ADifferentMethod” }
testRunner The test Runner is NUnit or xUnit . The data type of the testRunner is string. {“testRunner”: “NUnit”}
authors Data type of the authors is string [] . Authors is the array of strings of the project . {“authors”: [“Muhammad Ahmad”]}

Appsettings.json:

With ASP.NET Core, web.config is replace with Appsettings.json file for keeping all settings including connection strings, custom application settings, logging etc. Also the format is JSON instead of XML now.

Previously, we were keeping settings in web.config in XML format as:

Now, following JSON in Appsettings.json will replace the above:

Startup.cs:

Startup.cs in ASP.NET Core is basically a replacement for Global.asax in ASP.NET. Every ASP.NET Core Application requires a Startup class but it can be different for different environments. Appropriate startup.cs with respect to the environment is selected at runtime.Startup.cs in ASP.NET Core

Once the application get started, it calls the following methods as:

  • Optional ConfigureServices method to add framework services.
  • Compulsory Configure method to add the services to the container.

Have a look into complete Startup.cs as below:

Grunt, Gulp and Bower:

Grunt and Gulp are JavaScript Task Runner while Bower is web Package Manager.

Grunt:

  • Grunt is a JavaScript Task Runner.
  • It is used to automate common tasks like Bundling and Minification of JavaScript and CSS files.
  • We can use Node Project Manager(NPM)  to install Grunt as follows:
  • We can configure with ASP.NET Core with name Gruntfile.js that shouldn’t be changed.

Gulp:

  • Gulp is also a JavaScript Task Runner.
  • The Operations has to be defined in a file named Gulpfile.js.
  • It is no longer the default choice for ASP.NET Core application as it’s replaced by BuilderMinifier.
  • Gulp has to be installed globally as well as using the following command:

Bower:

  • Bower is used to manage front-end packages in a ASP.NET Core application.
  • Bower has to be installed using following command:

MVC Tag Helpers:

Tag Helpers is a way of extending functionality of HTML in Razor View engine. With tag helpers, different functionalities are added in Razor which makes development easier. It’s not only the syntax change but it really makes the Razor forms more readable.

Consider the below simple link using HTML Helper as:

The output HTML produced by above will be:

Now, we can achieve the same with Tag Helpers as follows:

If we compare syntax of both HTML Helper to Tag Helper, it’s undoubtedly more readable for developers as well as web designers or front-end developers (as they don’t need to understand C#).

More practical examples of using Tag Helpers instead of HTML Helpers are:

Simplified Tag Helper syntax will be:

Further you can find good details about MVC Tag Helpers by Dave Callan here.


ASP.NET Core with Angular 2
Build a Real-world App with ASP.NET Core and Angular 2 (4+)

  • Build a full-stack web app with ASP.NET Core, Entity Framework Core and Angular 2 & 4.
  • Implement a Clean & Decouple Architecture.
  • Properly implement the repository and unit of work patterns.
  • Troubleshoot common runtime errors.
  • Test APIs using PostMan.
  • Integrate ASP.NET MVC/Core with Angularjs.
  • Understand and apply the Dependency Inversion Principle (DIP).
  • Use the new dependency injection feature in ASP.NET Core.
  • Build APIs with ASP.NET Core
  • and more….

Your First ASP.NET Core Application

Let’s create a basic ASP.NET Core MVC Application by following a step by step approach.

Step 1:

  • Open Visual Studio 2015 and Select → File → New->Project (It will open the Project Template).
  • Select → .NET CoreASP.NET Core Web Application(.NET Core) and name the project.
  • Choose the location where we want to save and press the OK button as we used to do previously.Visual Studio 2015 Create Project
  • Next It will open the Project Template wizard. Select Empty template and View Engine as Razor.
  • Click OK, Solution Explorer and working environment will be opened.

Step 2:

Let’s add a Controller in our application. This controller file is just like C# classes which contains multiple public methods also called action methods. It’s the controller’s responsibility to process the request, building the appropriate model and redirecting to a particular View. To keep this example, we are not using Model but just rendering the text response to View.

  • To add a new Controller, In Solution Explorer → right click the Controllers folder, select Add → New Item → Controller.
  • Named the Controller as “TestAssignment” and click Add.ASP.NET MVC Controller
  • Under the Controllers file (TestAssignment), having the following default code.Controller to View
    The above code defines a public method Index inside our TestAssignmentController and returns a View object.

Step 3:

  • In this default code, Right click on View() method.
  • Select → AddView.Add a View to ASP.NET Core App
  • Give the Name to View as “Index”  and View Engine as Razor (.cshtml). Click “Add” button.ASP.NET Core View
  • After clicking Add button , The Solution explorer will be updated as follows:Visual Studio 2015 Solution Explorer
    It added a new .cshtml file inside Views/TestAssignment folder with the following code:Index in Visual Studio 2015
  • We have to update the Body of the HTML tag , As whatever we want to get.

Step 4:

  • Finally run the application by Click run Button.
  • The following output in the browser, the application first calls the Controller which in revert back calls this View and gives this  output which is expected as follows:ASP.NET Core App Running

Purpose of this basic ASP.NET Core Example is to familiarize you with environment. More practical applications with extensive use of technology will be followed.

This ASP.NET Core Tutorial is just the beginning explaining core concepts and creating a basic ASP.NET Core Web application. You will find more detailed practical examples on ASP.NET Core soon here. You can follow below for more helpful material regarding related technologies here:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest
  • Jaimini Thakker

    Dear Team, Do we have a tutorial to follow for this? Or any good link to continue after this tutorial. I am looking for complete CRUD operations using APIs and asp.net core