Creating A New .NET Core Web Application Using Visual Studio 2015

What is .NET Core?

.NET Core is a general-purpose, modular, cross-platform and open-source implementation of the .NET Platform. It contains many of the same APIs as the .NET Framework (but .NET Core is a smaller set) and includes runtime, framework, compiler and tools components that support a variety of operating systems and chip targets.

The .NET Core implementation was primarily driven by the ASP.NET Core workloads but also by the need and desire to have a more modern runtime. It can be used in the device, cloud, and embedded/IoT scenarios.

Referenced from https://msdn.microsoft.com/en-us/library/dn878908(v=vs.110).aspx



Before starting let’s gather Tools and frameworks which we need for development.

Tools Required

1. Visual studio 2015 with Update 3
   
   URL for downloading Visual studio 2015  https://www.visualstudio.com/downloads/
   
   
   
   If you already have Visual Studio 2015 installed just download Visual Studio 2015 Update 3.
   
   URL for downloading Visual Studio 2015 Update 3 - https://go.microsoft.com/fwlink/?LinkId=691129
   
   
   
   
2. NET Core 1.0.1 framework
   
   For downloading .NET Core 1.0.1 tools Preview 2 framework.
   
   URL https://www.microsoft.com/net/core#windowsvs2015
   
   
   
   
   
   After installing visual studio and framework you are ready to work with New. NET Core 1.0.1.

Getting Started Creating .Net Core web application

Open visual studio 2015 IDE.



Start page of Visual studio IDE

Before moving forward let's confirm we have updated new visual studio update properly.

For doing that choose Help menu from start page of Visual studio IDE and inside that menu choose About Microsoft visual studio.

An About Microsoft Visual Studio dialog will pop up as shown below.



Check Visual studio installed version

 We have confirmed update is proper now let’s create a web application.

From Visual IDE choose File Menu inside that choose New, then choose Project.



Add Project
After choosing Project menu a new dialog will pop up with name “New Project” as shown below.



 Naming Project

 First, think to look in new project dialog in .Net framework Version dropdown, it must be above Net framework 4.

In this dialog just have a look on left pane [Templates], inside that you will see new option [.Net Core] just choose [.Net Core] after that in middle pane you will find all project templates related to .Net Core from this templates we are going to choose “ASP.NET Core Web Application (.Net Core)” template because we are going to learn how to create a web application using .Net Core.

Next step after choosing template is to Name Project here we are creating the first application with .Net Core that's why I am going to name this project as “HelloCore” and finally click on OK button to create a project.

After clicking on the OK button I will pop up a new dialog for choosing templates.

Choosing Templates

In this dialog, we have 3 templates to choose from.

1. Empty
2. Web API
3. Web Application

Empty Template

The Empty template Contains only empty wwwroot folder along with basic configuration files.
In case if we select Empty Template for project our folder structure looks as shown below



Empty template

WEBAPI Template

The WEBAPI template contains an empty wwwroot folder and along with that, it has Controllers folder with ValuesController in it along with basic configuration files.



WEBAPI template

Web Application Template

The Web Application template contain a wwwroot folder and along with that it has Controllers folder with default HomeController and Views folder contains Home and Shared folder , the Home folder contains Views related to Home Controller and Shared Folder has Layout and error view in it.



Web Application template



Choosing Project template

 We want to create a web application, and for that we are going to choose web application template and click on OK button to create a project.

After clicking on the OK button, it will create a project and show Project_Readme.html file as shown below.

This file has a useful link to learn .Net core basics.



Project Readme HTML file

 Next step --  let’s have a look at Project structure which is created.

Project Structure

This is project structure which is created after choosing web application template.



 Project View after creating a new project.

 Now just save the application and run.



The first view of .Net core application

Adding Controller

For adding controller just right click on Controller folder then select Add -- inside that select New Item.



Steps for Adding Controller

Note

If you compare this with MVC 4 or MVC 5 you will see something different --  in the process of adding a controller in MVC 4 and 5 we have controller option directly to choose from --  here we do not have it.
After selecting New Item a new dialog of Add New Item will pop up.
Inside that just choose “MVC Controller Class” then name Controller as DemoController and Click on Add button to create Controller.



Choosing Controller class and Naming Controller [Demo]

 After we have clicked on Add button it has created DemoController as shown in below view.



Code snippet of Demo Controller

Adding View

 For adding View, we cannot use our old style just right click inside action Method then choose Add View.

In .Net Core for adding View just Right click on the Views folder, and then Add à New Folder and name the folder “Demo”



Steps for Adding “Demo “Folder



Project structure after adding Demo folder

 After adding Demo folder now we are going to add View inside this folder.

For adding View Right click on the Demo folder which we have added and then select Add -- inside that select New Item then a new dialog with Name of Add New Item will pop up.



Choosing MVC View page template and naming it.

From Add New Item dialogues just choose “MVC View Page” for adding View, then next step is to giving name to View, the View name must be the name same as Action method name, we are going name it as “Index” [“Index.cshtml”] and click on Add button to add View.

Project View after adding Index View



Project View after adding Index View

After generating Index View it is blank I have just added simple text to it.

Index.cshtml View



Index.cshtml View

Now save and run the application.

To access newly created View URL  http://localhost:####/demo/index 



Access newly created index.cshtml View

Finally, we have learned how to install and create .Net core application.