CHAPTER 34 Web Applications using Razor Pages<\/p>\n
This chapter builds on what you learned in the previous chapter and completes the AutoLot.Web Razor Page based application. The underlying architecture for Razor Page based applications is very similar to MVC style applications, with the main difference being that they are page based instead of controller based. This chapter will highlight the differences as the AutoLot.Web application is built, and assumes that you have read the previous chapters on ASP.NET Core.<\/p>\n
\u25a0Note The sample code for this chapter is in the Chapter 34 directory of this book\u2019s repo. Feel free to continue working with the solution you started in the previous ASP.NET Core chapters.<\/p>\n
Anatomy of a Razor Page
\nUnlike MVC style applications, views in Razor Page based applications are part of the page. To demonstrate, add a new empty Razor Page named RazorSyntax by right clicking the Pages directory in the AutoLot.Web project in Visual Studio, select Add \u27a4 Razor Page, and chose the Razor Page \u2013 Empty template. You will see two files created, RazorSyntax.cshtml and RazorSyntax.cshtml.cs. The RazorSyntax.cshtml file is the view for the page and the RazorSyntax.cshtml.cs file is the code behind file for the view.
\nBefore proceeding, add the following global using statements to the GlobalUsings.cs file in the AutoLot.Web project:<\/p>\n
global using AutoLot.Models.Entities; global using Microsoft.AspNetCore.Mvc;
\nglobal using Microsoft.AspNetCore.Mvc.RazorPages; global using AutoLot.Services.DataServices.Interfaces; global using Microsoft.Build.Framework;<\/p>\n
Razor Page PageModel Classes and Page Handler Methods
\nThe code behind the file for a Razor Page derives from the PageModel base class and is named with the Model suffix, like RazorSyntaxModel. The PageModel base class, like the Controller base class in MVC style applications, provides many helper methods useful for building web applications. Unlike<\/p>\n
\u00a9 Andrew Troelsen, Phil Japikse 2022 1559<\/p>\n the Controller class, Razor Pages are tied to a single view, have directory structure based routes, and have a single set of page handler methods to service the HTTP get (OnGet()\/OnGetAsync()) and post (OnPost()\/OnPostAsync()) requests. namespace AutoLot.Web.Pages;<\/p>\n public class RazorSyntaxModel : PageModel \u25a0Note The default names can be changed. This will be covered later in this chapter.<\/p>\n Notice how the page handler methods don\u2019t return a value like their action method counterparts. When the page handler method does return a value, the page implicitly returns the view that the page is associated with. Razor Page handler methods also support returning an IActionResult, which then requires explicitly returning an IActionResult. If the method is to return the class\u2019s view, the Page() method is returned. The method could also redirect to another page. Both scenarios are shown in this code sample:<\/p>\n public async Task Derived PageModel classes support both method and constructor injection. When using method injection, the parameter must be marked with the [FromService] attribute, like this:<\/p>\n public async Task OnGetAsync([FromServices] ICarDataService carDataService) Since PageModel classes are focused on a single view, it is more common to use constructor injection instead of method injection. Update the RazorSyntaxModel class by adding a constructor that takes an instance of the ICarDataService and assigns it to a class level field:<\/p>\n private readonly ICarDataService _carDataService;<\/p>\n public RazorSyntaxModel(ICarDataService carDataService) If you inspect the Page() method, you will see that there isn\u2019t an overload that takes an object. While the related View() method in MVC is used to pass the model to the view, Razor Pages use properties on the PageModel class to send data to the view. Add a new public property named Entity of type Car to the RazorSyntaxModel class:<\/p>\n public Car Entity { get; set; }<\/p>\n Now, use the data service to get a Car record and assign it to the public property (if the UseApi flag in public async Task Razor Pages can use implicit binding to get data from a view, just like MVC action methods:<\/p>\n public async Task Razor Pages also support explicit binding:<\/p>\n public async Task However, the common practice is to declare the property used by the HTTP get method as a [BindProperty] This property will then be implicitly bound during HTTP post requests, and the public async Task Razor Page Views @page Note that the view is not bound to the BindProperty (if one exists), but rather the PageModel derived class. The properties on the PageModel derived class (like the Entity property on the RazorSyntax page) are an extension of the @Model. To create the form necessary to test the different binding scenarios, add the following to the RazorSyntax.cshtml view, run the app, and navigate to https:\/\/localhost:5021\/<\/a><\/a><\/a> RazorSyntax:<\/p>\n
\nA. Troelsen and P. Japikse, Pro C# 10 with .NET 6, https:\/\/doi.org\/10.1007\/978-1-4842-7869-7_34<\/a><\/a><\/a><\/p>\n
\nChange the scaffolded RazorSyntaxModel class so the OnGet() page handler method is asynchronous and update the name to OnGetAsync(). Next, add an async OnPostAsync() page handler method for HTTP Post requests:<\/p>\n
\n{
\npublic async Task OnGetAsync()
\n{
\n}
\npublic async Task OnPostAsync()
\n{
\n}
\n}<\/p>\n
\n{
\nreturn Page();
\n}
\npublic async Task OnPostAsync()
\n{
\nreturn RedirectToPage("Index")
\n}<\/p>\n
\n{
\n\/\/Get a car instance
\n}<\/p>\n
\n{
\n_carDataService = carDataService;
\n}<\/p>\n
\nappsettings.Development.json is set to true, make sure AutoLot.Api is running):<\/p>\n
\n{
\nEntity = await _carDataService.FindAsync(6); return Page();
\n}<\/p>\n
\n{
\n\/\/do something interesting return RedirectToPage("Index");
\n}<\/p>\n
\n{
\nvar newCar = new Car();
\nif (await TryUpdateModelAsync(newCar, "Entity", c => c.Id,
\nc => c.TimeStamp, c => c.PetName,
\nc => c.Color,
\nc => c.IsDrivable, c => c.MakeId,
\nc => c.Price
\n))
\n{
\n\/\/do something interesting
\n}
\n}<\/p>\n
\nBindProperty:<\/p>\n
\npublic Car Entity { get; set; }<\/p>\n
\nOnPost()\/OnPostAsync() methods use the bound property:<\/p>\n
\n{
\nawait _carDataService.UpdateAsync(Entity); return RedirectToPage("Index");
\n}<\/p>\n
\nRazor Pages views are specific for a Razor PageModel, begin with the @page directive and are typed to the code behind file, like this for the scaffolded RazorSyntax page:<\/p>\n
\n@model AutoLot.Web.Pages.RazorSyntaxModel @{
\n}<\/p>\nRazor Syntax<\/h1>\n