(Beginner Level slow) Your first razor page (Razor Pages - 2) | ASP.NET Core 5 Tutorial

Please go through our previous lecture for a brief primer on Razor pages that will help you get started. Let us write a simple razor application that displays your name on a web page. Open Visual Studio to create a new project, pick asp.net core as your starting template. This, as we have picked. And then click next. The next button is somewhere here. This screen opens. Type any name for your project and click create. Select an empty template. An empty template is the best thing to learn a new technology. Keep all these defaults. Don’t change them. These can be adjusted whenever we deploy our application to a real hosting.

01:01 - Click create once again, click create and wait for the Solution Explorer to be ready. If things go right, you will be able to get a solution Explorer like this. We have already explained this structure in good detail in our starting lectures. But if you haven’t seen the earlier lectures, there is nothing much to worry as of now. It is not much required at this stage. The only file that we are going to be concerned today is the startup dot CSS file. This is the only file that we will be working with today. We will be adding two statements in this file. But let us now begin to add a razor page because our web application is based on Razor pagees. a razor app is built with razor pages. So we have to add razor pages. Asp.net Core requires that all Razer pages be placed inside a folder called pages. So our project needs the presence of this folder. Right click the project.

To add a folder called pages 02:21 - like you’re seeing here. this is the folder that you have to add. The runtime, the asp.net core runtime looks for razor files in the pages folder. It will look for your razor files in this folder. Your requests are going to reach this. This folder and razor files will be searched here, so we have to now add our razor pages to this folder. Right click the pages folder to add a new item. Add a razor page to the pages folder. Right click on the pages folder to add a new item.

03:07 - a add new dialog, add new item dialog opens. Scroll through the list, find a razor page. Keep the name as index. Because this is the home page that we are going to create, and then click add. When you add you will see this sort of a thing opens. What is this come to the pages folder. Index dot CS html file is there index dot CS HTML dot CS file is there. This will open for you and as we explained in our basic primer, you will see files, 2 files of the same name index our razor page. They will appear under the pages folder. This is the index dot CS HTML file.

03:58 - And a class is also paired with it index dot CS HTML dot CS file. This is the paired file. Refer to the primer lecture that I gave previously. And you can see index dot CS HTML dot CS file. It contains a class that is also paired with your razor page. Today we are going to keep things as simple as possible. We will not use this class today, so we will delete this class away. We will delete this class away. We’re not going to use this one today. So select select your file and Delete it. And after you delete this screenshot is a bit wrong, so this will not be there. After you delete, open the index dot CS HTML file. You will be seeing this one this remove this statement @model. This directive remove it off because this statement.

This directive is referencing the class that we have already deleted. So remove it. And also remove any other lines because we’re only adding some static tags to our file. So after deletion and all you will see a very clean page. Like this And here you will see index dot CS HTML and this additional is there. Let’s not talk about this now. So your pages folder will contain your only razor file and this razor file is opened here. This @page. It’s called the page directive.

This must be present as the first directive of any razor file, 05:48 - so this will be present and must be shown as like this. We’re adding plain HTML to keep the things simple. We’re adding plain HTML only. We will not add any.net code. No C sharp code is added. So you must have already seen that we deleted our csharp class already. We’re adding plain HTML only. So to your razor page type any HTML Hello world or my name is XYZ. Add this to your CS HTML file. Now the last thing is to edit the startup class. We have to tell asp. net core that the requests for the index homepage. This is Localhost slash index. This request or by default simply localhost slash. This request should reach our razor page called index… for that We have to edit our startup class. Open the startup dot CSS file. You will see this code already created for you by the Visual Studio default template. We will add one statement in at this point. So this is zoomed. I have zoomed it so we have to add one statement here services dot add razor pages. We will add this line so that additional services for razor pages are added. The second thing is. That come to the configure method. This is already there.

This is make sure that this is 07:40 - available at least without these things will work, but this should be there. And in the use endpoints you will add map Razor pages. This adds razor pages as the endpoint. This ensures that the request for the index route. This is the request for the index route. It reaches your index razor page. If this is not there, then the request will not reach your razor page. So I will show you clearly this one and this one. These are important. After this.

Run the application 08:25 - and you will see hello World my name is xyz. So this is how we have created our first razor application in which a razor page has executed for us. Thank you. .