Create First Web Application in ASP.NET Core

Hello friends, I hope you all are having fun. In today's tutorial, we will create our First Web Application in ASP.NET Core. It's our 2nd tutorial in ASP.NET Core series and in our previous tutorial, we have had a detailed Introduction to ASP.NET Core. We have also installed Microsoft Visual Studio Community Edition 2019 in our previous tutorial and today we will create our first web application in it. After creating this web application, we will also have a look at its files and will understand the contents. So, let's create our First Web Application in ASP.NET Core:

Creating Web Application in ASP.NET Core

  • First of all, start your Visual Studio which we have installed in previous tutorial.
  • A pop up window will open up, where you can open your recent project or can create a new project, as shown in below figure:
  • Here, click on the button says "Create a new project" and a new window will open up.
  • This new window will ask for the type of application, you want to create i.e. Console App, Web App, Blazer App etc.
  • As we want to create an ASP.NET Core Web Application so, I am going to select 3rd option in the list, as shown in below figure:
  • After selecting ASP.NET Core Web Application, now click on the Next Button.
  • On the next window, we have to provide the name & location for the project, as shown in below figure:
  • Now click on the Create Button and in the next window, we need to select the template for your web application.
  • Rite now, we are going to select the Empty Project, as I want to start from the scratch but in our incoming tutorials, we will cover almost all these templates.
  • You will also need to uncheck the check box says "Configure for HTTPS", as shown in below figure:
  • So, select the Empty Template for your ASP.NET Core web application and click the Create Button.
  • As you can see at the top of above figure that we are using ASP.NET Core 3.1 that's the latest stable .NET framework SDK.
  • When you click on the Create Button, Visual Studio will create your web application, as shown in below figure:
  • As we have selected the Empty template, that's why we don't have much files in the solution explorer and this web app won't do anything except printing " Hello World " on execution.
  • In order to execute our first web application, we need to click on the IIS Express play button, at the top menu bar.
  • Our default browser will open up and Hello World will be printed in it, as shown in below figure:
  • The link of this page is localhost:51640, as its on localhost rite now and the its port is 51640.
  • We will discuss the flow of How this web app works and what's IIS Express in our coming lectures.
So, rite now we have a simple working web application in ASP.NET MVC which simply prints Hello World. Now let's understand the files automatically created by Visual Studio in Empty Template:

ASP.NET Core Project File

  • If we have a look at the Solution Explorer, the we can see that visual studio has created few files for us, as shown in below figure:
  • In order to open the project file, we have to right click on the Project's name and then click on Edit Project File.
  • A new code file will open up with an extension .csproj, cs stands for C# & proj for project. This file is called the ASP.NET Core Project File.
  • In previous versions of ASP.NET, we have to unload our project in order to open this project file but in Core, we can simply click on this Edit option to open Project File.
  • If programming language is visual basic, then extension of project file will be .vbproj, vb for visual basic & proj for project.
  • The only element we have in our web application's project file is Target Framework and the value we have set is netcoreapp3.1.
  • This element, as the name implies, decides the target framework for our app and if you remember, while creating this project, we have selected .NET Core Framework 3.1.
  • This value inside Target Framework tag is called Target Framework Moniker (TFM ), so the TFM of .NET Core 3.1 is netcoreapp3.1.

ASP.NET Core Program File

  • Next file we are gonna open is Program.cs, its a C# class file, thus has an extension of .cs.
  • Now let's have a look at its code:
  • As you can see in above code that we have a class named Program and inside this class we have our Main Method.
  • This Main Method is the entry point of our compiler i.e. when our web App executed then this Main method is called.
  • If you have worked on any previous versions of .NET framework, then you must have seen this Main method there as well, in fact this web App executes as a console application.
  • Within this Main Method, we have called CreateHostBuilder Method, its implemented below Main Method and returns an object that implements IHostBuilder.
  • We are passing command line arguments to this CreateHostBuilder Method and then building our web host, which is going to host our web application and finally we are running our web app.
  • If we have a look at the CreateHostBuilder Method, then you can see that we are using webBuilder Method and then calling the extension Method Startup.
  • This WebBuilder Method is responsible for creating the web host on which our web app is going to host.
  • This Startup extension method is available in our next file named Startup.cs, so let's discuss it's code:

ASP.NET Core Startup File

  • Below Program File, we have Startup.cs file in our Solution Explorer.
  • So, let's open this file and here's its code:
  • This Startup Class is called by the CreateHostBuilder Method in Program File.
  • Inside this Startup class we have two methods, ConfigureServices & Configure.
  • ConfigureServices Method is used for the configuration of services, required for our web application.
  • Configure Method is used to configure the request processing pipeline for our web application.
  • This method has Hello World in it, which is actually printing on the page, we will discuss this method in coming tutorials in detail.

ASP.NET Core launchSettings,json File

  • launchSettings.json file is placed inside Properties, so open this file.
  • This file is only required for development purposes on the local machine, when we are publishing our web App then we don't need this file.
  • This file actually contain the settings for the hosting environment, as shown in below figure:
  • You can see in above code that first we have iiSettings and then profiles.
  • In profiles, we have two profiles named IIS Express & TheEngineeringProjects, which is also the name of our project.
  • When we run our project from visual studio, then this IIS Express profile is called and if you remember, the port number was same as in iisSettings i.e. 51640.
  • But if you run this app from Console, then TheEngineeringProjects profile will be called and in that case port number will be 5000.

ASP.NET Core appSettings.json File

  • That's the settings file for ASP.NET Core web application.
  • We use this file to store some hard coded values or settings etc., we will discuss it in detail later.
So, that was all for today. I hope you have completely understood the basic structure of our ASP.NET Core web application. In the next tutorial, we will have a look at Middleware in ASP.NET Core. Till then take care & have fun !!!

Introduction to ASP.NET Core

Hello everyone, I hope you all are doing great. Today, I am going to start this new series on ASP.NET Core and it's our first tutorial in this series. I will start from basics and will slowly move towards complex concepts. So, if you haven't worked on ASP.NET then you don't need to worry about that but you must have some basic knowledge of C# and object oriented programming. I will use Visual Studio 2019 for these tutorials, it's community version is free to use and I will use C# language for developing ASP.NET Core web applications. So, let's first have a look at what is ASP.NET Core:

Introduction to ASP.NET Core

  • ASP.NET Core (originally deemed as ASP.NET xNext & was going to named as ASP.NET 5) is an open source, modular, cross platform and high performance Framework used to build advanced cloud based Internet Applications i.e.
    • Web Application.
    • Android Application.
    • IOS Application.
  • It's built ( rewrite ) completely from scratch by Microsoft & its vast community (as its open source) and combines ASP.NET MVC & ASP.NET Web API in a single package, which were previously available as separate entities.
  • Although Core is a completely new framework but still it has quite a lot of resemblance with ASP.NET so if you have already worked on ASP.NET then Core won't be that difficult for you.
  • As ASP.NET Core is an open source framework, so you can download or update its code from respective repositories on Github.

Why use ASP.NET Core ?

Let's have a look at few benefits of using ASP.NET Core:
1. Cross Platform
  • The first & foremost advantage of ASP.NET Core is Cross Platform accessibility. In ASP.NET, you can only host your application on Windows platform but that's not the case with ASP.NET Core, you can host its applications across different platforms i.e.
    • Linux.
    • Windows.
    • macOS.
    • UBuntu.
    • Or any self host server.
2. Unified Programming Model
  • ASP.NET Core follows Unified Programming Model, that's why both MVC & API Controller classes inherit from single Controller base class, which returns IActionResult.
  • IActionResult, as the name implies, is an Interface and has a lot of implementations and two of most commonly used are:
    • JsonResult.
    • ViewResult.
  • In case of Web Apis, we get JsonResult and in case of Web MVC we can get both of them.
  • In previous versions of ASP.NET, we have separate Controller classes for Web MVC & Web API.
3. Dependency Injection
  • ASP.NET Core also has builtin support for dependency Injection, which makes it too flexible and conventional to use.
  • Normally we use class constructors to inject dependencies and is called Constructor Injection.
  • We will cover them in detail in upcoming tutorials, so if you are not getting this stuff then no need to worry.
4. Modular Framework
  • ASP.NET Core also follows modular framework and uses middle-ware components which makes the flow of the app smooth.
  • Microsoft has provided a lot of built-in middle-ware components for different purposes i.e. authentication, verification, File Fetching etc.
  • We can also create custom middle-ware components as well in AP.NET Core.
5. Open Source
  • ASP.NET Core is an open source framework and thus has a vast community on GitHub and Forum etc., that's why it's evolving rapidly and has become extremely powerful.
  • You can get detailed and instant help on Core online quite easily.
6. Development Environment
  • We can use Microsoft Visual Studio or Microsoft Visual Code for building our ASP.NET Core Applications.
  • We can also use third party editors i.e. sublime etc. for ASP.NET Core.

Prior Knowledge Required for this Course

  • If you haven't studied ASP.NET then no need to worry as we are gonna start from scratch and will cover all concepts.
  • But you must have good understanding of C# concepts, so if you are not that good in C# then you should first read this C# Tutorial.
  • Similarly, you should also have some basic knowledge of Html, CSS, Javascript, Jquery, XML etc. These are all simple languages so you must first their basic tutorials as well.

Setting up Environment for ASP.NET MVC

  • We can use any Integrated Development Environment (IDE) for ASP.NET MVC i.e. visual studio, visual code, sublime, atom etc.
  • We will also need to install .NET Core SDK, which is a software development kit.
  • Microsoft Visual Studio Community Edition is free to use and you can download it from its official website.
  • Once you downloaded a simple setup of around 1.5MB, you need to run that .exe file and it will start downloading the setup files, as shown in figure on right side.
  • Once it's downloaded all the required files to start the setup, a new window will open up as shown in below figure:
  • That's called workload area of Visual Studio, here you need to select which tools, you want to install on your machine.
  • I am going to select these 3 options from this list:
  • As of this tutorial, the latest version available is Microsoft Visual Studio Community Edition 2019 and .NET Framework version is 4.7.2 (latest stable version), which will be automatically installed along with visual studio.
  • If you are using any third party editor i.e. sublime, then you need to download the .NET Core SDK and install it on your machine.
  • .NET Core SDK is available for Windows, Linux, macOS and Docker.
So, that was for today. I hope you have enjoyed today's tutorial and are ready to get your hands dirty with ASP.NET Core. In our next tutorial, we will create our first project in ASP.NET Core and will write some code. Till then take care & have fun !!!
Syed Zain Nasir

I am Syed Zain Nasir, the founder of <a href=https://www.TheEngineeringProjects.com/>The Engineering Projects</a> (TEP). I am a programmer since 2009 before that I just search things, make small projects and now I am sharing my knowledge through this platform.I also work as a freelancer and did many projects related to programming and electrical circuitry. <a href=https://plus.google.com/+SyedZainNasir/>My Google Profile+</a>

Share
Published by
Syed Zain Nasir