Getting Started With ASP.NET Core MVC


ASP.NET Core is a web framework which is an open source cross platform version of ASP.NET. It used to build modern Cloud-based internet connected Applications, such as Web apps, IoT apps, and mobile back-ends. It runs on the single source code, based on Windows, Linux, and OSX. It is developed from scratch parallel with .NET Framework 4.6 and has a number of architectural changes, which makes the core Web framework much leaner and more modular. It is no longer based on System.Web.dll. It runs on .NET Core or the full .NET framework.

The .NET Core is an open source cross platform version of .NET. It is a subset of the full .NET framework. It supports only a single app module that is Console App.

Why use ASP.NET Core


The .NET framework is fully tested and has a large number of collection of packages. The .NET Core has raw performance and many other advantages which are listed below.

  1. It is cross platform so it can be hosted on Windows, Linux, and Mac.
  2. ASP.NET Web API is merged with ASP.NET Core MVC so don’t need to define separate controller for Web API. Now, both ASP.NET Core MVC and ASP.NET Core Web API are inherited by Controller class.
  3. The project system is based on MSBuild so there is no need to add file reference in csproj project and not rebuild application after a change. The NuGet packages are also part of the csproj project file.
  4. When we develop loosely coupled applications then we are used to either third party inversion of control (Ninject, Autofac and Unity etc) for dependency injection or we develop our own dependency injection while ASP.NET core provides built in support for dependency injection.
  5. It supports tag helpers which make Razor markup more natural with HTML. It shows compile time errors and intelligence.

How to install .NET Core


We can develop .NET Core application using Visual Studio 2017 Version 3 and .NET Core 2.0. We need to update Visual Studio 2017 Version 2 to Version 3 using following steps.

  1. Click on ‘Visual Studio Installer’ from Start menu.
  2. Start update process of Visual Studio 2017. We have to choose these two options during updating which are ‘ASP.NET web development’ and ‘.NET Core cross-platform development’.

We can also install Visual Studio 2017 Version 3. We need to open the link https://www.visualstudio.com/downloads/. We download Visual Studio Community or purchase other versions of Visual Studio. Visual Studio Code is another IDE which is free open source and cross platform editor. It is also available as free of cost. Once we downloaded the installer for it, we run it. It installs the Visual Studio 2017 version 3. As it installs online so don’t disconnect your internet connection.

To install .NET Core, We need to follow following steps.

  1. Download .NET Core SDK from https://www.microsoft.com/net/core#windowscmd. It downloads dotnet-sdk-2.0.0-win-gs-x64.exe.
  2. Run this exe (dotnet-sdk-2.0.0-win-gs-x64.exe) and follow suggested steps. We must close all instances of Visual studio during installation.
  3. Once it installed, we must restart out development machine.

Develop ASP.NET Core MVC Application


We develop an ASP.NET Core MVC application using Visual Studio 2017 Version 3 and ASP.NET Core 2.0. We follow below steps to building this application.

  1. Start Visual Studio 2017.
  2. Go to File –> New Project –> Web and choose the ASP.NET Core Web Application template from the collection of templates, as shown in the below given figure.

Figure 1: ASP NET Core MVC Visual Studio 2017 Template

As per figure 1, It shows two templates to develop web application projects.

  1. ASP.NET Core Web Application : This web application template uses to develop the cross platform compatible project. This application runs on .NET Core framework.
  2. ASP.NET Web Application (.NET Framework): This web application template is same which used to develop the ASP.NET application in the previous version.

It’s an ASP.NET Core web application template for cross platform compatible project that runs on .NET Core framework. Source code location is defined at the bottom, such as E:\VS2017\. We click on OK button and will be greeted by a second set of web application template choices.

Figure 2: ASP.NET Core Web Application

As per preceding figure, these are predefined ASP.NET Core web application templates.These templates include Web Application with MVC pattern, Razor pages Web Application and Single Page Application (SPA). These templates are:

  1. Empty: This template doesn’t have predefined content and structure. It has only middleware. When application runs then it outputs the text “Hello World”.
  2. Web API: It holds a predefined controller named ValuesController. It uses for API development.
  3. Web Application: This template holds basic web application structure with razor engine. It contains Bootstrap UI template and jQuery libraries. The Pages folder holds layout and partial views.
  4. Web Application (Model-View-Controller): This template holds basic structure. It contains Bootstrap UI template and jQuery libraries.
  5. Angular: It is ASP.NET Core SPA template for angular application.
  6. React.js: It is ASP.NET Core SPA template for react.js application.

Now, we develop a web application using this predefined project template. We choose template Web Application (Model-View-Controller) and its set up project with the MVC pattern. Now we create a view model named EmployeeViewModel. This view model strongly binds with the view to pass data to the controller and vice-versa. The following code snippet is used for same.

To keep it simple demonstration, we don’t use RDBMS. We store data in memory.We create a class to store employee data named EmployeeData, as per the following code snippet.

Now, we create a controller named EmployeeController which has both GET and POST requests. The following code snippet for same.

This controller holds three action methods. These methods are used to handle view and add operations for an Employee entity. The GET request uses for View while POST request uses for an Add operation.

Now, Let’s develop the user interfaces for employee listing and add operation for Employee entity.

UI Design For Employee List


We create a view named Index.cshtml under Employee folder of Views as per MVC structure. When we make a request for Index action then this view returns. It shows employee listing as given in the figure 3. The following code snippet for same.

Now, Let’s run the application and calls the Index action method with a HttpGet request, then we greeted by a list of customers in the UI as shown in the below figure. This UI has a button “Add Employee” to add a new employee in the application.

Figure 3: Employee Listing

UI Design For Add Employee


Now, let’s define an another view named AddEmployee in same Employee folder. The following code snippet for AddEmployee.cshtml.

Let’s run the application and click on “Add Employee” button. It calls AddEmployee action method with GET request. We get a form UI as per below figure.

Figure 4: Add Employee UI

Now, fill up all the input fields in this form and click on Submit button. It shows in employee listing.

Conclusion


This application developed using Visual Studio 2017 and ASP.NET Core 2.0 which is a stable version so we can also use it in production. ASP.NET Core MVC is better option when web application is targeting multiple operating systems such as Windows, Linux, and Mac. This application complete source code available on GitHub. To download this application complete source code click here