Join Jess Chadwick for an in-depth discussion in this video Creating Razor Pages, part of ASP.NET Core: Razor Pages.
- [Narrator] Now that I've got my ASP.NET Core application all set up to host Razor Pages, it's time to actually create a few. There are two things that are required when creating a Razor Page. First is a simple text file in the pages folder, or one of its subfolders, with the .cshtml file extension. To create one I'll right click on the pages folder and add a new item from the ASP.NET Core category.
You might notice that one of the options here is called a Razor Page. I will be using that later on. But to demonstrate just how simple a Razor Page is to create, I'm going to select the text file option. Then I'll name my page Index.cshtml, making sure to include that very important .cshtml file extension, and then click add. The second requirement of a Razor Page is that the first line of the file start with the text @page.
That's it, now we can right whatever HTML we want and ASP.NET Core will render it for us. That's all you need to create a Razor Page. With this markup in place, I can run the site by hitting F5 or control+F5 to see my work in action.
Now that I've shown some very basic HTML, I'll update it with some more complex and realistic markup. Because that markup is pretty long, I'm actually just going to copy it and paste it from a template in the artifacts folder in the exercise files. But don't worry, there's no magic or tricks going on here. This is all just plain HTML. However, before I run this to show that it actually works, let me create one more page in the site so that we have something to navigate to: the recipe page.
I can do this by either creating a new text file, just like I did for this index page, or I'll just copy this index page and replace the one section of content that's different between the two of them. I'll copy the content from the Recipes.cshtml file in the exercise files, then paste this markup into the recipes page in my project, replacing the hard-coded content that was already there.
Finally, I'll update the title of the page to Recipe Details to indicate that this is the recipe details page. Now that I've got these two pages, I can run the site by just saving them and switching back to the browser to refresh. Notice that the index page is displayed even though the URL points to the root of the site. That is because ASP.NET Core continues the age-old web convention of treating files called Index as the default page for the site.
If I wanted to, I could get the same page by typing the path of the Razor Page without its file extension. In other words, /Index. Likewise, clicking on the link to the recipe page will bring me to the URL /Recipe, which Razor Pages maps to the Recipe.cshtml page in my pages folder. There you have it. With a few lines of code and a couple of text files, I've now got two webpages up and running.
- Creating a new application
- Setting up pages
- Rendering dynamic content
- Reusing markup with layouts
- Increasing the maintainability of pages
- Processing data
- Validating input
- Securing an application