Understanding ASP.NET Core 3 Razor Pages Project Files

Introduction

In this article, a new project has been created through which we will understand all the default files and folder structure available inside an ASP.Net core 3 Razor pages application.

Fundamentals In ASP.NET Core 3 Razor Pages

Click on create a new project, then a new dialog box will be opened displaying all the templates available. Of all the templates, we can select ASP.NET Core Web Application. We can also search for any available templates on the top. Once you've selected the desired template, click on the Next button.

Next, we need to write the project name. We can also change the location of the project. After that click on the Create button.

Then, we need to select the .NET Core framework along with the version in which we want our project to be created.

After that, select the Web Application template to create ASP.NET Core applications using ASP.NET Razor Pages. We can also select individual user accounts for authentication purposes as well. Make sure that the source is .NET Core 3.1 and click on the create button.

Now we will take a look at all the files and folders that have been created.

Project Configuration File

In order to open the project configuration file, double click on the project BookList. The file name will be the project name and the extension will be .csproj. The format of the file and how it works is different in .NET Core 3. In the previous versions of ASP.NET Core, there were files called project.json and .xproj. The new .csproj file replaces both the files.

As we can see, inside the PropertyGroup tag, there is a TargetFramework which is netcoreapp 3.0. The target framework is also called node. If we add more packages to the project solution, then those packages will be added as a package reference inside the ItemGroup tag to the .csproj file by default.

So every time a new NuGet package is added, a package reference entry would be added inside csproj file. So a csproj file is used to reference all the NuGet packages and the target framework.

Launchsettings.json

Now we will be discussing the properties folder inside the project. Inside properties, there is a file called Launchsettings.json. This file tells Visual Studio what to do when you press the run button. By default, a few profiles are available inside the JSON file. One of them is IIS Express, which will launch IIS Express that will host the application and start the browser that will open the URL. It also sets the environment variables to development.

We can detect the environment variables and make changes based on that. For example, if it is development, then we will load the full CSS. If it is production, then we can load the minified version of CSS.

There is also a section to configure the IIS Express where we can set the launch variables.

There is another profile at the bottom called BookList which is the project name. It will run the application as a command line application so the internal kestrel which is an internal web server will be used. Then a browser will start which will hit the URL.

These profiles can also be set by going into the properties of the project, then by going inside the debug section. Here we can set different profiles at the top. We can also set and add environment variables as well as other configurations, like URL and SSL.

We can also set profile from the run dropdown menu at the top, so we can select any profile to run our application.

AppSettings.json

All the application settings are contained inside this file. Any changes made inside the appsettings.json file will require restarting the “Microsoft IIS Administration” service to take effect.

Inside appsettings.json we can see there are few details available such as logging, log level, default, etc. we can also add connection string settings here while creating an application. Security keys related to dependency can also be added here. We can access all these variables inside the startup.cs file upon using dependency injection.

wwwroot

Inside the wwwroot folder, we can find folders for CSS files, javascript files and library files. In the wwwroot folder, we can place all the static files like images, CSS and Javascript files.

This is the root folder for our project. We cannot place any C# and razor files here. This folder has been created to separate code files with static files.

Since we have created a project using the Razor template, we can see that Visual Studio has already placed some bootstrap, CSS and JavaScript files inside the wwwroot folder. If we expand the CSS folder, we can see site.css, and inside js, we can see site.js and inside lib, there are folders for bootstrap as well as for jquery.

We have all these CSS and javascript files inside our application by default because we have created a web application as a razor page.

If we want to add some additional CSS and Javascript files, then we need to add them inside the wwwroot folder.

Pages Folder

The main folder inside any razor projects is the pages folder. Inside of the pages folder, all pages required for our project are available. Inside the pages folder, there is a shared folder containing razor pages. These razor pages are _Layout.cshtml and _ValidationScriptsPartial.cshtml. The name of these two razor pages starts with _, which means they are partial views.

Partial pages are like user components which means that we can reuse them in multiple places in our application.

The _Layout.cshtml is the default master page for our application. Inside this file, we have a header, main part, and a footer for our application. There are scripts as well that we want in our application.

The _ValidationScriptsPartial.cshtml file contains the javascript and jquery that we need for our application. In the pages where we want to include these, we can just include _ValidationScriptsPartial.cshtml file.

Inside _ViewImports.cshtml, we can define that we want to include tag helpers by adding @TagHelper inside _ViewImports.cshtml file. Inside this file, we can also add custom tag helpers.

Inside _ViewStart.cshtml, we can define the master page that we will use for our application.

The Error, Index and Privacy.cshtml are the actual razor pages that act as a view. The Index.cstml file contains HTML and CSS code. For this file, the model is defined inside index.cshtml.cs file.

Inside the Index.cshtml file, model is declared using @ directive. This model would be defined inside index.cshtml.cs file which will be inheriting from PageModel class. For example, as we can see, the default IndexModel is defined inside index.cshtml.cs file which is inheriting from PageModel class.

Startup.cs

The run time executes the main, which configures the Startup.cs class. The runtime will call methods ConfigureServices and Configure. Inside we have an IConfiguration object that is being passed as dependency injection to the Startup class.

ConfigureServices method gets called by the runtime and is used to add services to the container. This method configures dependency injection. The ConfigureServices method adds services to the application to make them available. The IServiceCollection object is injected into the method as a parameter.

Then we can use this object to build services to be available to the application. Examples of services can be entity framework core, identity service, and MVC.

The Configure method is used to configure the HTTP request pipeline. The pipeline specifies how the application should respond to HTTP requests.

Summary

In this article, the folder structure and all the default files of an ASP.Net Core 3 Razor Pages application have been discussed.