To see this view in action, run the application and navigate to https://localhost:5001/Cars/Index (or https://localhost:5001/Cars) to see the full list of vehicles. To see the list of BMW’s, navigate to https://localhost:5001/Cars/Index/5/BMW (or https://localhost:5001/Cars/5/BMW).

The Details Razor Page
The Details page is used to display a single record when called with an HTTP get request. The route is extended with an optional id value. Update the code to the following, which takes advantage of the BasePageModel class:

namespace AutoLot.Web.Pages.Cars;

public class DetailsModel : BasePageModel
{

public DetailsModel( IAppLogging appLogging,
ICarDataService carService) : base(appLogging, carService, "Details") { } public async Task OnGetAsync(int? id)

{
await GetOneAsync(id);
}
}

The constructor takes instances of IAppLogging and ICarDataService and passes them to the base class along with the page title. The OnGetAsync() page handler method takes in the optional route parameter then calls the base GetOneAsync() method. Since the method doesn’t return an IActionResult, the view gets rendered when the method completes.

The Details Razor Page View
The first step is to update the route to include the optional id route token and add a header:

@page "{id?}"
@model AutoLot.Web.Pages.Cars.DetailsModel

Details for @Model.Entity.PetName

If there is a value in the Errors property, then the message needs to be displayed in a banner. If there isn’t an error value, then use the Car display template to display the records information. Close out the view with the custom navigation tag helpers:

@if (!string.IsNullOrEmpty(Model.Error))
{

}
else
{
@Html.DisplayFor(m => m.Entity)

}

The @Html.DisplayFor() line can be replaced with @Html.DisplayFor(m=>m.Entity,"CarWithColors")
to display the template that uses color in the display.

The Create Razor Page
The Create Razor Page inherits from BasePageModel. Clear out the scaffolded code and replace it with the following:

namespace AutoLot.Web.Pages.Cars;

public class CreateModel : BasePageModel
{
//implementation goes here
}

In addition to the IAppLogging and ICarDataService for the base class, the constructor takes an instance of the IMakeDataService and assigns it to a class level field:

private readonly IMakeDataService _makeService;
public CreateModel( IAppLogging appLogging, ICarDataService carService,
IMakeDataService makeService) : base(appLogging, carService, "Create")
{
_makeService = makeService;
}

The HTTP get handler method populates the LookupValues property. Since there isn’t a return value, the view is rendered when the method ends:

public async Task OnGetAsync()
{
await GetLookupValuesAsync(_makeService, nameof(Make.Id), nameof(Make.Name));
}

The HTTP post handler method uses the base SaveWithLookupAsync() method and then returns the IActionResult from the base method. Note the non-standard name of the method. This will be addressed in the view form with the

public async Task OnPostCreateNewCarAsync()
{
return await SaveWithLookupAsync( DataService.AddAsync,
_makeService, nameof(Make.Id), nameof(Make.Name));
}

The Create Razor Page View
The view uses the base route, so no changes are needed on the @page directive. Add the head and the error block:

@page
@model AutoLot.Web.Pages.Cars.CreateModel

Create a New Car

@if (!string.IsNullOrEmpty(Model.Error))
{

}
else
{
}

The

else
{

}

The contents of the form is mostly layout. The two lines of note are the asp-validation-summary tag helper and the EditorFor() HTML helper. The EditorFor() method invokes the editor template for the Car class. The second parameter adds the SelectList into the ViewBag. The validation summary shows only model level errors since the editor template shows field level errors:

The final update is to add the _ValidationScriptsPartial partial in the Scripts section. Recall that in the layout this section occurs after loading jQuery. The sections pattern helps ensure that the proper dependencies are loaded before the contents of the section:

@section Scripts { }

The create form can be viewed at /Cars/Create.

The Edit Razor Page
The Edit Razor Page follows the same pattern as the Create Razor Page. It inherits from BasePageModel. Clear out the scaffolded code and replace it with the following:

namespace AutoLot.Web.Pages.Cars;

public class EditModel : BasePageModel
{
//implementation goes here
}

In addition to the IAppLogging and ICarDataService for the base class, the constructor takes an instance of the IMakeDataService and assigns it to a class level field:

private readonly IMakeDataService _makeService;
public EditModel( IAppLogging appLogging, ICarDataService carService,
IMakeDataService makeService) : base(appLogging, carService, "Edit")
{
_makeService = makeService;
}

The HTTP get handler method populates the LookupValues property and attempts to get the entity.
Since there isn’t a return value, the view is rendered when the method ends:

public async Task OnGetAsync(int? id)
{
await GetLookupValuesAsync(_makeService, nameof(Make.Id), nameof(Make.Name)); GetOneAsync(id);
}

The HTTP post handler method uses the base SaveWithLookupAsync() method and then returns the
IActionResult from the base method:

public async Task OnPostAsync()
{
return await SaveWithLookupAsync( DataService.UpdateAsync,
_makeService, nameof(Make.Id), nameof(Make.Name));
}

The Edit Razor Page View
The view takes in an optional id as a route token, which gets added to the @page directive. Update the directive and add the head and the error block:

@page "{id?}"
@model AutoLot.Web.Pages.Cars.EditModel

Edit @Model.Entity.PetName

@if (!string.IsNullOrEmpty(Model.Error))
{

}
else
{
}

The

}

The contents of the form is mostly layout. The four lines of note are the asp-validation-summary tag helper, the EditorFor() HTML helper, and the two hidden input tags. The EditorFor() method invokes the editor template for the Car class. The second parameter adds the SelectList into the ViewBag. The validation summary show only model level errors since the editor template shows field level errors. The two hidden input tags hold the values for the Id and TimeStamp properties, which are required for the update process, but have no meaning to the user:

The final update is to add the _ValidationScriptsPartial partial in the Scripts section. Recall that in the layout this section occurs after loading jQuery. The sections pattern helps ensure that the proper dependencies are loaded before the contents of the section:

@section Scripts { }

The edit form can be viewed at /Cars/Edit/1.

The Delete Razor Page
The Delete razor page inherits from BasePageModel and has a constructor that takes the required two parameters:

namespace AutoLot.Web.Pages.Cars;

public class DeleteModel : BasePageModel
{
public DeleteModel( IAppLogging appLogging,
ICarDataService carService) : base(appLogging, carService, "Delete")
{
}

public async Task OnPostAsync(int? id)
{
return await DeleteOneAsync(id);
}
}

This view doesn’t use the SelectList values, so the HTTP get handler method simply gets the entity.
Since there isn’t a return value for the method, the view is rendered when the method ends:

public async Task OnGetAsync(int? id)
{
await GetOneAsync(id);
}

The HTTP post handler method uses the base DeleteOneAsync() method and then returns the
IActionResult from the base method:

public async Task OnPostAsync(int? id)
{
return await DeleteOneAsync(id)
}

The Delete Razor Page View
The view takes in an optional id as a route token, which gets added to the @page directive. Update the directive and add the title, head, and the error block:

@page "{id?}"
@model AutoLot.Web.Pages.Cars.DeleteModel

Delete @Model.Entity.PetName

@if (!string.IsNullOrEmpty(Model.Error))
{

}
else
{
}

The

}

The view uses the Car display template outside of the form and hidden fields for the Id and TimeStamp properties inside the form. There isn’t a validation summary since any errors in the delete process will show in the error banner:

Are you sure you want to delete this car?

The _ValidationScriptsPartial partial isn’t needed, so that completed the Delete page view. The delete form can be viewed at /Cars/Delete/5.

View Components
View components in Razor Page based applications are built and function the same as in MVC styled applications. The main difference is where the partial views must be located. To get started in the AutoLot. Web project, add the following global using statement to the GlobalUsings.cs file:

global using Microsoft.AspNetCore.Mvc.ViewComponents;

Create a new folder named ViewComponents in the root directory. Add a new class file named MenuViewComponent.cs into this folder and update the code to the following (the same as was built in the previous chapter).

public class MenuViewComponent : ViewComponent
{
private readonly IMakeDataService _dataService;

public MenuViewComponent(IMakeDataService dataService)
{
_dataService = dataService;
}

public async Task InvokeAsync()
{
var makes = (await _dataService.GetAllAsync()).ToList(); if (!makes.Any())
{
return new ContentViewComponentResult("Unable to get the makes");
}
return View("MenuView", makes);
}
}

Build the Partial View
In Razor Pages, the menu items must use the asp-page anchor tag helper instead of the asp-controller and asp-action tag helpers. Create a new folder named Components under the Pages\Shared folder. In this new folder, create another new folder named Menu. In this folder, create a partial view named MenuView.cshtml. Clear out the existing code and add the following markup:

@model IEnumerable

To invoke the view component with the tag helper syntax, the following line must be added to the
_ViewImports.cshtml file, which was already added for the custom tag helpers:

@addTagHelper *, AutoLot.Web

Finally, open the _Menu.cshtml partial and navigate to just after the

block that maps to the
/Index page. Copy the following markup to the partial:

Now when you run the application, you will see the Inventory menu with the Makes listed as submenu items.

Areas
Areas in Razor Pages are slightly different than in MVC based applications. Since Razor Pages are routed based on directory structure, there isn’t any additional routing configuration to be handled. The only rule is that the pages must go in the Areas\[AreaName]\Pages directory. To add an area in AutoLot.Web, first add a directory named Areas in the root of the project. Next, add a directory named Admin, then add a new directory name Pages. Finally, add a new directory named Makes.

Area Routing with Razor Pages
When navigating to Razor Pages in an area, the Areas directory name is omitted. For example, the Index page in the Areas\Admin\Makes\Pages directory can be found at the /Admin/Makes (or Admin/Makes/Index) route.

_ViewImports and _ViewStart
In Razor Pages, the _ViewImports.cshtml and _ViewStart.cshtml files apply to all views at the same directory level and below. Move the _ViewImports.cshtml and _ViewStart.cshtml files to the root on the project so they are applied to the entire project.

The Makes Razor Pages
The pages to support the CRUD operations for the Make admin area follow the same pattern as the Cars pages. They will be listed here with minimal discussion.

The Make DisplayTemplate
Add a new directory named DisplayTemplates under the Makes directory in the Admin area. Add a new Razor View – Empty named Make.cshtml in the new directory. Update the content to the following:

@model Make

@Html.DisplayNameFor(model => model.Name)

@Html.DisplayFor(model => model.Name)

The Make EditorTemplate
Add a new directory named EditorTemplates under the Makes directory in the Admin area. Add a new Razor View – Empty named Make.cshtml in the new directory. Update the content to the following:

@model Make

The Index Razor Page
The Index page will show the list of Make records and provide links to the other CRUD pages. Add an empty Razor Page named Index.cshtml to the Pages\Makes directory and update the content to the following:
namespace AutoLot.Web.Areas.Admin.Pages.Makes; public class IndexModel : PageModel
{
private readonly IAppLogging _appLogging; private readonly IMakeDataService _makeService; [ViewData]
public string Title => "Makes";
public IndexModel(IAppLogging appLogging, IMakeDataService carService)
{
_appLogging = appLogging;
_makeService = carService;
}
public IEnumerable MakeRecords { get; set; } public async Task OnGetAsync()
{
MakeRecords = await _makeService.GetAllAsync();
}
}

The Index Razor Page View
Since the Make class is so small, a partial isn’t used to show the list of records. Update the Index.cshtml file to the following:

@page
@model AutoLot.Web.Areas.Admin.Pages.Makes.IndexModel

Vehicle Makes

}

To see this view in action, run the application and navigate to https://localhost:5001/Admin/Makes/ Index (or https://localhost:5001/Admin/Makes) to see the full list of records.

The Details Razor Page
The Details page is used to display a single record when called with an HTTP get request. Add an empty Razor Page named Details.cshtml to the Pages\Makes directory and update the content to the following:

namespace AutoLot.Web.Areas.Admin.Pages.Makes;
public class DetailsModel : BasePageModel
{
public DetailsModel( IAppLogging appLogging, IMakeDataService makeService)
: base(appLogging, makeService,"Details") { } public async Task OnGetAsync(int? id)
{
await GetOneAsync(id);
}
}

The Details Razor Page View
Update the Details.cshtml Razor Page view to the following:

@page "{id?}"
@model AutoLot.Web.Areas.Admin.Pages.Makes.DetailsModel

@{
//ViewData["Title"] = "Details";
}

Details for @Model.Entity.Name

@if (!string.IsNullOrEmpty(Model.Error))
{

}
else
{
@Html.DisplayFor(m => m.Entity)

}

The Create Razor Page
Add an empty Razor Page named Create.cshtml to the Pages\Makes directory and update the content to the following:

namespace AutoLot.Web.Areas.Admin.Pages.Makes;
public class CreateModel : BasePageModel
{
private readonly IMakeDataService _makeService; public CreateModel(
IAppLogging appLogging, IMakeDataService makeService)
: base(appLogging, makeService, "Create") { } public void OnGet() { }
public async Task OnPostAsync()
{
return await SaveOneAsync(DataService.AddAsync);
}
}

The Create Razor Page View
Update the Create.cshtml Razor Page view to the following:

@page
@model AutoLot.Web.Areas.Admin.Pages.Makes.CreateModel

Create a New Car

@if (!string.IsNullOrEmpty(Model.Error))
{

}
else
{

@section Scripts { }
}

The Edit Razor Page
Add an empty Razor Page named Edit.cshtml to the Pages\Makes directory and update the content to the following:

namespace AutoLot.Web.Areas.Admin.Pages.Makes;
public class EditModel : BasePageModel
{
public EditModel( IAppLogging appLogging, IMakeDataService makeService)
: base(appLogging, makeService, "Edit") { } public async Task OnGetAsync(int? id)
{
await GetOneAsync(id);
}
public async Task OnPostAsync()
{
return await SaveOneAsync(DataService.UpdateAsync);
}
}

The Edit Razor Page View
Update the Edit.cshtml Razor Page view to the following:

@page "{id?}"
@model AutoLot.Web.Areas.Admin.Pages.Makes.EditModel

Edit @Model.Entity.Name

@if (!string.IsNullOrEmpty(Model.Error))
{

}
else
{

}
@section Scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}

The Delete Razor Page
Add an empty Razor Page named Delete.cshtml to the Pages\Makes directory and update the content to the following:

namespace AutoLot.Web.Areas.Admin.Pages.Makes;
public class DeleteModel : BasePageModel
{
public DeleteModel( IAppLogging appLogging, IMakeDataService makeService)
: base(appLogging, makeService, "Delete") { } public async Task OnGetAsync(int? id)
{
await GetOneAsync(id);
}
public async Task OnPostAsync(int? id)
{
return await DeleteOneAsync(id);
}
}

The Delete Razor Page View
Update the Delete.cshtml Razor Page view to the following:

@page "{id?}"
@model AutoLot.Web.Areas.Admin.Pages.Makes.DeleteModel

Delete @Model.Entity.Name

@if (!string.IsNullOrEmpty(Model.Error))
{

}
else
{

Are you sure you want to delete this car?

}

Add the Area Menu Item
Update the _Menu.cshtml partial to add a menu item for the Admin area by adding the following:

When building a link to another area, the asp-area tag helper is required and the full path to the page must be placed in the asp-page tag helper.

Custom Validation Attributes
The custom validation attributes built in the previous chapter work with both MVC and Razor Page based applications. To demonstrate this, create a new empty Razor Page named Validation.cshtml in the main Pages directory. Update the ValidationModel code to the following:

namespace AutoLot.Web.Pages;
public class ValidationModel : PageModel
{
[ViewData]
public string Title => "Validation Example"; [BindProperty]
public AddToCartViewModel Entity { get; set; } public void OnGet()
{
Entity = new AddToCartViewModel
{
Id = 1,
ItemId = 1,
StockQuantity = 2,
Quantity = 0
};
}
public IActionResult OnPost()
{

if (!ModelState.IsValid)
{
return Page();
}
return RedirectToPage("Validation");
}
}

The HTTP get handler method creates a new instance of the AddToCartViewModel and assigns it to the
BindProperty. The page is automatically rendered when the method finishes.
The HTTP post handler method checks for ModelState errors, and if there is an error, returns the bad data to the view. If validation succeeds, it redirects to the HTTP get page handler following the post-redirect- get (PRG) pattern.
The Validation page view is shown here, which is the same code as the MVC version with the only difference is using the asp-page tag helper instead of the asp-action tag helper:

@page
@model AutoLot.Web.Pages.ValidationModel @{
}

Validation

Add To Cart

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Next, add the menu item to navigate to the Validation view. Add the following to the end of menu list (before the closing

tag):

Server-side validation is built into the attributes, so you can play with the page and see the validation error returned to the page and displayed with the validation tag helpers.
Next, either copy the validation scripts from the previous chapter or you can create them from here. To create them, create a new directory name validations in the wwwroot\js directory. Create a new JavaScript file named errorFormatting.js, and update the content to the following:

$.validator.setDefaults({
highlight: function (element, errorClass, validClass) { if (element.type === "radio") {
this.findByName(element.name).addClass(errorClass).removeClass(validClass);
} else {
$(element).addClass(errorClass).removeClass(validClass);
$(element).closest('div').addClass('has-error');
}
},
unhighlight: function (element, errorClass, validClass) { if (element.type === "radio") {
this.findByName(element.name).removeClass(errorClass).addClass(validClass);
} else {
$(element).removeClass(errorClass).addClass(validClass);
$(element).closest('div').removeClass('has-error');
}
}
});

Next, add a JavaScript file named validators.js and update its content to this. Notice the Entity_ prefix update from the MVC version. This is due to the BindProperty's name of Entity:

$.validator.addMethod("greaterthanzero", function (value, element, params) { return value > 0;
});
$.validator.unobtrusive.adapters.add("greaterthanzero", function (options) { options.rules["greaterthanzero"] = true; options.messages["greaterthanzero"] = options.message;
});

$.validator.addMethod("notgreaterthan", function (value, element, params) { return +value <= +$(params).val(); }); $.validator.unobtrusive.adapters.add("notgreaterthan", ["otherpropertyname","prefix"], function(options) { options.rules["notgreaterthan"] = "#Entity_" + options.params.prefix + options.params. otherpropertyname; options.messages["notgreaterthan"] = options.message; }); Update the call to AddWebOptimizer() in the Program.cs top level statements to bundle the new files when not in a Development environment: builder.Services.AddWebOptimizer(options =>
{
//omitted for brevity
options.AddJavaScriptBundle("/js/validationCode.js", "js/validations/validators.js", "js/validations/errorFormatting.js");
});

Update site.css to include the error class:.has-error { border: 3px solid red;
padding: 0px 5px; margin: 5px 0;
}

Finally, update the _ValidationScriptsPartial partial to include the raw files in the development block and the bundled/minified files in the non-development block:

General Data Protection Regulation Support
GDPR support in Razor Pages matches the support in MVC applications. Begin by adding CookiePolicyOptions and change the TempData and Session cookies to essential in the top level statements in Program.cs:

builder.Services.Configure(options =>
{

});

// This lambda determines whether user consent for non-essential cookies is
// needed for a given request. options.CheckConsentNeeded = context => true; options.MinimumSameSitePolicy = SameSiteMode.None;

// The TempData provider cookie is not essential. Make it essential
// so TempData is functional when tracking is disabled. builder.Services.Configure(options => { options.Cookie. IsEssential = true; });
builder.Services.AddSession(options => { options.Cookie.IsEssential = true; });

The final change to the top level statements is to add cookie policy support to the HTTP pipeline:

app.UseStaticFiles(); app.UseCookiePolicy(); app.UseRouting();

Add the following global using statement to the GlobalUsings.cs file:

global using Microsoft.AspNetCore.Http.Features;

The Cookie Support Partial View
Add a new view named _CookieConsentPartal.cshtml in the Pages\Shared directory. This is the same view from the MVC application:

@{
var consentFeature = Context.Features.Get(); var showBanner = !consentFeature?.CanTrack ?? false;
var cookieString = consentFeature?.CreateConsentCookie();
}
@if (showBanner)
{

}

Finally, add the partial to the _Layout partial:

With this in place, when you run the application you will see the cookie consent banner. If the user clicks accept, the .AspNet.Content cookie is created. Next time the site loads, the banner will not show.

Menu Support to Accept/Withdraw Cookie Policy Consent
The final change to the application is to add menu support to grant or withdraw consent. Add a new empty Razor Page named Consent.cshtml to the main Pages directory. Update the PageModel to the following:

namespace AutoLot.Web.Pages;

public class ConsentModel : PageModel
{
public IActionResult OnGetGrantConsent()
{
HttpContext.Features.Get()?.GrantConsent(); return RedirectToPage("./Index");
}
public IActionResult OnGetWithdrawConsent()
{
HttpContext.Features.Get()?.WithdrawConsent(); return RedirectToPage("./Index");
}
}

The Razor page has two HTTP get page handlers. In order to call them, the link must use the asp-page- handler tag helper.
Open the _Menu.cshtml partial, and add a Razor block to check if the user has granted consent:

@{
var consentFeature = Context.Features.Get(); var showBanner = !consentFeature?.CanTrack ?? false;
}

If the banner is showing (the user hasn’t granted consent), then display the menu link for the user to Accept the cookie policy. If they have granted consent, then show the menu link to withdraw consent.
The following also updates the Privacy link to include the Font Awesome secret icon. Notice the asp-page- handler tag helpers:

@if (showBanner)
{

}
else
{

}

Summary
This chapter completed the AutoLot.Web. It began with a deep dive into Razor Pages and page views, partial views, and editor and display templates. The next set of topics covered client-side libraries, including management of what libraries are in the project as well as bundling and minification.
Next was an examination of tag helpers and the creation of the project’s custom tag helpers. The Cars Razor Pages were created along with a custom base class. A view component was added to make the menu dynamic, an admin area and its pages were added, and finally validation and GDPR support was covered.