(Beginner Level slow) Primer on Razor Pages (Razor Pages - 1) | ASP.NET Core 5 Tutorial

Let us understand the basics of a razor page. Suppose a remote client has sent a request to your application. This is a request that is coming from a remote client to your asp.net core application. Let us also suppose that the remote client has sent an year as a query-string parameter. And let us also say that our application has to send a completed HTML for a report of savings in a year. This report has to be sent back to the caller. The final HTML that has to be sent will be rendered, will be displayed as a colorful HTML table. Some parts, such as this heading, they are fixed. And some parts such as this, this, this data… these are obtained by running a program, a DOTNET code, against a database.

So how to achieve this objective? 01:19 - A developer creates a razor page consisting of intermixed html and DOTNET code combined in a one single file called a razor page. The intermixed code allows the data to be programmatically inserted into that HTML. This data that you’re seeing is programmatically inserted into the HTML with the help of the dot net code that is intermixed on the razor page. A razor page is a pair of two files having the same name but different extensions. This extension, this extension, but the name is the same. If we take the example of a page called index.

02:15 - Then you can see one file is named as index dot CS HTML. The other file is named as index dot CS HTML dot CS. This file. Index dot C SHTML. It contains HTML markup mixed with dot net code. This is sometimes alone called a razor page. This single file itself is sometimes called a razor page. It contains dotnet code and HTML mixed in this single file. A special syntax is used for mixing the html and dot net code. The syntax is called razor syntax. But we will take this syntax later on, not today. The other file is named as index dot CS HTML dot CS. This file contains A Csharp dot net class that acts as a companion to this page. The class in this file is a companion to this CS HTML page.

03:33 - The class here, it will handle page requests like GET request, POST request, and other page related events. This is an extract from the solution Explorer of some project. It will help us get introduced to Razor pages. We’re not doing the practical today. We will take the practical in later lectures. This is the solution Explorer and this is some project. This is already done, but we’re not discussing how we do it. We’re only interested in telling the location of razor files in this solution Explorer.

04:20 - Razor pages are placed in a special folder called “pages”. This name is important. The spellings, and the name are important. This folder must be present on your project and inside this folder we place all our razor pages. Pages is a folder where the runtime searches for razor pages. By default the name and location of this folder can be changed through suitable dot net code, but we will take that later on. For now. We will say that we will have to place all our razor pages in this folder called “pages”.

This is the index dot CS HTML file that you 05:11 - can see. This is placed inside the “pages” folder. And this is the index dot CS HTML dot CS file. This file is also placed in the pages folder. Let us forget about this one. We will take this sometime later. The CS file. We can open the CS file. The CS file looks like this. We’re not going to discuss the inner details of this file, but the point that we’re going to discuss is that this file contains a c-sharp dot net class. The name of that class is related to the name of the razor page. The razor page is index. And the name of this class is obtained, is made to look similar to the name of the razor page, and model has been appended to the name. The purpose is readability. You can change this name.

It is possible, but keeping this name matched to the razor 06:22 - page will make your code readable. If we open the CS HTML file, then we get a story like this. This file has to start with the page directive @page. This is the first directive that should be present in the CSS HTML file. These spellings again are important, small P A G E at the rate, this directive, it tells the runtime that this is a razor page. Then you can see that there is a directive at model. This directive is used to tell the name of the backing class. The backing class. This index model class is written in this matching file. So this this directive links your, this CS HTML file and the CS class there, and the events that are processed through that they can now be used to manipulate the content on this page. The remaining part of this page, it contains the HTML markup.

07:49 - The html markup and dot net code mixed with the help of razor syntax. So this class. and the dot net code in this file, they help us generate the HTML content dynamically and send our HTML report back to the caller. With this primer you should now get a basic understanding of razor pages. We will take all the details in later lectures. Thank you. .