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.
 
Fundamentals In ASP.NET Core 3 Razor Pages 
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages 
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
Inside _ViewStart.cshtml, we can define the master page that we will use for our application.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 

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.
 
Fundamentals In ASP.NET Core 3 Razor Pages
 
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. 


Similar Articles