Page 43 - MSDN Magazine, September 2017

Figure 1 ASP.NET Core 2.0 Web Application with Razor Pages Template
These features greatly reduce the number of separate folders and files required to work with a given page on a Web app. Figure 3 compares the folders and files required for a typical MVC-based approach with the Razor Pages approach.
To demonstrate Razor Pages in the context of an ASP.NET Core MVC app, I’m going to use a sim- ple sample project.
A Sample Project
To simulate a project with a little bit of complexity and some different feature areas, I’m going to return to the sample I used for my Feature Slices article. This sample involves viewing and managing a num- ber of different kinds of entities, including ninjas and ninja swords, as well as pirates, plants, and zom-
free to use folders within the Pages root folder to organize pages in whatever way makes sense for your application. Razor Pages allow developers to combine the code-quality features of the MVC pattern with the productivity benefits of grouping together things that tend to change together.
Note that Pages is part of ASP.NET Core MVC in version 2. You canaddsupportforPagestoanyASP.NETCoreMVCappbysim- ply adding a Pages folder and adding Razor Pages files to this folder.
Razor Pages use the folder structure as a convention for routing requests. While the default page in a typical MVC app can be found at “/,” as well as “/Home/” and “/Home/Index,” the default Index pageinanappusingRazorPageswillmatch“/”and“/Index.”Using subfolders, it’s very intuitive to create different sections of your app, with routes that match accordingly.
bies. Imagine the app is a companion for a casual game and helps you manage in-game constructs. Using the typical MVC organi- zational approach, you’d most likely have many different folders holding controllers, views, viewmodels, and more for each of these kinds of constructs. With Razor Pages, you can create a simple folder hierarchy that maps to your application’s URL structure.
Inthiscase,theapplicationhasasimplehomepageandfourdif- ferent sections, each with its own subfolder under Pages. The folder structure is very clean, with just the homepage (Index.cshtml) and some supporting files in the root of the Pages folder, and the other sections in their own folders, as Figure 4 shows.
Simple pages often don’t need separate page models. For example, the list of ninja swords shown in /Ninjas/Swords/Index.cshtml sim- ply uses inline variables, as Figure 5 shows. Variables declared in Razor blocks are in scope on the page; you’ll see how you can declare functions and even classes via @ functions blocks in the next section. Note the use of the new asp-page tag helper in the link at the bottom of the page. These tag helpers reference pages by their routes, and support absolute and relative paths. In this example, “/Ninjas/Index” could also have been written as “../Index” or even just “..” and it would route to the same Index.cshtml Razor Page in the Ninjas folder. You can also use the asp-page tag helper on <form> elements to specify a form’s destination. Because the asp-page tag helpers build on top of the powerful ASP.NET Core routing support, they support many URL generation scenarios
beyond simple relative URLs.
Each folder can have an Index.cshtml file to act as its root page.
Looking at an individual Page, you’ll find there’s a new page directive, @page, that’s required on Razor Pages. This directive must appear on the first line of the page file, which should use the .cshtml extension. Razor Pages look and behave very similarly to Razor-based View files, and a very sim- ple page can include just HTML:
@page
<h1>Hello World</h1>
Where Razor Pages shine is in encapsu- lating and grouping UI details. Razor Pages support inline or separate class-based page models, which can represent data elements the page will display or manipulate. They also support handlers that eliminate the need for separate controllers and action methods.
msdnmagazine.com
Figure 2 Razor Pages Project Template Organization
September 2017 35