Getting Started with ASP.NET

#aspnet #webdev #csharp #programming

This is the first post in the series of posts on building an ASP.NET web application. It covers getting up and running with ASP.NET framework.

After reading this post, you will understand:

how to install .NET framework and create a new ASP.NET application.
the general layout of an ASP.NET application.
how to quickly generate the starting pieces of an ASP.NET application.

What is ASP.NET?

ASP.NET is an open source, cross-platform web application framework, which makes programming web applications easier. It does this by following convention over configuration approach, which was invented and popularized by Ruby on Rails framework [1].

As the Rails doctrine says,

... by giving up vain individuality, you can leapfrog the toils of mundane decisions, and make faster progress in areas that really matter.

ASP.NET runs on C# programming language. C# is a compiled, statically-typed, object-oriented programming language. If you haven't programmed in C# before, a good book to start with is Essential C#, by Eric Lippert.

You might have come across the term Dotnet or .NET before. So, what's the difference between ASP.NET and .NET? .NET is a platform for building many different types of applications, such as desktop apps, web apps, mobile apps, etc. ASP.NET sits on top of .NET and helps with building web applications. The following diagram should make it clear.

Before you begin with ASP.NET, you need to install the .NET software development kit (SDK), using the following link.

Download .NET SDK

To check if everything is installed correctly, open a new terminal window and run the following command:

$ dotnet --version

If the installation was successful, the program should report its version, e.g. 5.0.100.

Create your App

Now that you have installed the framework, you will create a simple weblog, similar to the blog that you are reading this tutorial on. Now, .NET comes with a number of pre-configured generators that are designed to make the developer's life easier by creating everything that's necessary to start working on a project.

To see all the available generators, run the dotnet new command in a terminal. You should see following output.

$  ~ dotnet new

Templates                             Short Name               Language          Tags
--------------------------------      -------------------      ------------      ----------------------
Console Application                   console                  [C#], F#, VB      Common/Console
Class library                         classlib                 [C#], F#, VB      Common/Library
ASP.NET Core Empty                    web                      [C#], F#          Web/Empty
ASP.NET Core Web App (Model-V...      mvc                      [C#], F#          Web/MVC

... and much more

The focus of this tutorial is on using ASP.NET to build a web application that uses model-view-controller (MVC) pattern, which we will learn about later. We will use the mvc generator to scaffold a complete web application, using the following command.

$ dotnet new mvc -o weblog

This will create an ASP.NET MVC application called weblog in a weblog directory. The -o parameter creates a directory named weblog where your app is stored. You can see all the command line options that the dotnet new command has by running

$ dotnet new --help

After your weblog application is scaffolded, switch to the directory.

$ cd weblog

The weblog directory will have a few folders and files that make up an ASP.NET web application. Here's a quick summary of each of the file and folder that the generator creates by default. The names ending with a forward slash indicate a directory.

Models/ : Contains the classes representing the business data and logic for your application.

**Views/ : Contains the views which are responsible for building the response HTML that's sent to the end user, using the data from the models.

Controllers/ : Contains the controllers for your application. Controllers are the glue between models and views. When a user navigates to your app in a browser, the controllers accept the request, find the required data from the models, and convert them into views to be sent back to the user.

Properties/ : Includes the launchSettings.json file which includes the settings that tell the IDE which URLs to use.

wwwroot/ : Contains static files and compiled assets. This is the only folder in the entire project that's exposed as-is to the browser.

appsettings.json : Contains the configuration settings that allows you to configure your application to behave differently based on the setting.

Program.cs : This is the entry-point of the application. An ASP.NET application is started in the same way as a console application, from a static void Main() function. This is where we configure the web host that will serve the requests.

Startup.cs : This is where you configure the services required by your app, such as logging, database, etc. The middleware, i.e. the pipeline in which an HTTP request is processed is also configured here.

weblog.csproj : This is the project file for .NET applications, and contains all the information required by the dotnet tools to build your project, including the type of the project and the versions of the dependencies.

Run your app

Let's get something up and running on the browser. In the terminal, run the following command, which first restores all the dependencies, then builds the project and finally runs the application.

$ dotnet run

Building...
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /tutorial/weblog

To see your application in action, open a new browser window and go to https://localhost:5001. You should see the default ASP.NET welcome page.

Note: To keep things simple, I have removed the default header and footer html that was generated by the dotnet generator, from the _Layout.cshtml file.

If you want to stop the application, type Ctrl+C in the terminal window.

Congratulations!! You have just created and launched your first ASP.NET web application successfully. In the next post, we will learn how the MVC pattern, which forms the core of ASP.NET framework, works.

Please let me know in the comments what you think of this tutorial, or any thoughts on how it can be improved. Any feedback is really appreciated.

[1] In fact, this tutorial is inspired from rails guides. When I started learning ASP.NET, I wished there was guides similar to rails, but I couldn't find one. Hence I am writing one.