title | author | description | ms.author | monikerRange | ms.date | ms.custom | uid |
---|---|---|---|---|---|---|---|
Part 3, scaffolded Razor Pages |
rick-anderson |
Part 3 of tutorial series on Razor Pages. |
riande |
>= aspnetcore-3.1 |
06/17/2022 |
contperf-fy21q2 |
tutorials/razor-pages/page |
This tutorial examines the Razor Pages created by scaffolding in the previous tutorial.
:::moniker range="< aspnetcore-6.0"
Examine the Pages/Movies/Index.cshtml.cs
Page Model:
Razor Pages are derived from PageModel
. By convention, the PageModel
-derived class is named <PageName>Model
. The constructor uses dependency injection to add the RazorPagesMovieContext
to the page:
See Asynchronous code for more information on asynchronous programming with Entity Framework.
When a request is made for the page, the OnGetAsync
method returns a list of movies to the Razor Page. On a Razor Page, OnGetAsync
or OnGet
is called to initialize the state of the page. In this case, OnGetAsync
gets a list of movies and displays them.
When OnGet
returns void
or OnGetAsync
returns Task
, no return statement is used. For example the Privacy Page:
When the return type is IActionResult
or Task<IActionResult>
, a return statement must be provided. For example, the Pages/Movies/Create.cshtml.cs
OnPostAsync
method:
Examine the Pages/Movies/Index.cshtml
Razor Page:
Razor can transition from HTML into C# or into Razor-specific markup. When an @
symbol is followed by a Razor reserved keyword, it transitions into Razor-specific markup, otherwise it transitions into C#.
The @page
Razor directive makes the file an MVC action, which means that it can handle requests. @page
must be the first Razor directive on a page. @page
and @model
are examples of transitioning into Razor-specific markup. See Razor syntax for more information.
The @model
directive specifies the type of the model passed to the Razor Page. In the preceding example, the @model
line makes the PageModel
-derived class available to the Razor Page. The model is used in the @Html.DisplayNameFor
and @Html.DisplayFor
HTML Helpers on the page.
Examine the lambda expression used in the following HTML Helper:
@Html.DisplayNameFor(model => model.Movie[0].Title)
The xref:Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper%601.DisplayNameFor%2A HTML Helper inspects the Title
property referenced in the lambda expression to determine the display name. The lambda expression is inspected rather than evaluated. That means there is no access violation when model
, model.Movie
, or model.Movie[0]
is null
or empty. When the lambda expression is evaluated, for example, with @Html.DisplayFor(modelItem => item.Title)
, the model's property values are evaluated.
Select the menu links RazorPagesMovie, Home, and Privacy. Each page shows the same menu layout. The menu layout is implemented in the Pages/Shared/_Layout.cshtml
file.
Open and examine the Pages/Shared/_Layout.cshtml
file.
Layout templates allow the HTML container layout to be:
- Specified in one place.
- Applied in multiple pages in the site.
Find the @RenderBody()
line. RenderBody
is a placeholder where all the page-specific views show up, wrapped in the layout page. For example, select the Privacy link and the Pages/Privacy.cshtml
view is rendered inside the RenderBody
method.
Consider the following markup from the Pages/Movies/Index.cshtml
file:
The preceding highlighted markup is an example of Razor transitioning into C#. The {
and }
characters enclose a block of C# code.
The PageModel
base class contains a ViewData
dictionary property that can be used to pass data to a View. Objects are added to the ViewData
dictionary using a key value pattern. In the preceding sample, the Title
property is added to the ViewData
dictionary.
The Title
property is used in the Pages/Shared/_Layout.cshtml
file. The following markup shows the first few lines of the _Layout.cshtml
file.
The line @*Markup removed for brevity.*@
is a Razor comment. Unlike HTML comments <!-- -->
, Razor comments are not sent to the client. See MDN web docs: Getting started with HTML for more information.
-
Change the
<title>
element in thePages/Shared/_Layout.cshtml
file to display Movie rather than RazorPagesMovie. -
Find the following anchor element in the
Pages/Shared/_Layout.cshtml
file.<a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesMovie</a>
-
Replace the preceding element with the following markup:
<a class="navbar-brand" asp-page="/Movies/Index">RpMovie</a>
The preceding anchor element is a Tag Helper. In this case, it's the Anchor Tag Helper. The
asp-page="/Movies/Index"
Tag Helper attribute and value creates a link to the/Movies/Index
Razor Page. Theasp-area
attribute value is empty, so the area isn't used in the link. See Areas for more information. -
Save the changes and test the app by selecting the RpMovie link. See the _Layout.cshtml file in GitHub if you have any problems.
-
Test the Home, RpMovie, Create, Edit, and Delete links. Each page sets the title, which you can see in the browser tab. When you bookmark a page, the title is used for the bookmark.
Note
You may not be able to enter decimal commas in the Price
field. To support jQuery validation for non-English locales that use a comma (",") for a decimal point, and non US-English date formats, you must take steps to globalize the app. See this GitHub issue 4076 for instructions on adding decimal comma.
The Layout
property is set in the Pages/_ViewStart.cshtml
file:
The preceding markup sets the layout file to Pages/Shared/_Layout.cshtml
for all Razor files under the Pages folder. See Layout for more information.
Examine the Pages/Movies/Create.cshtml.cs
page model:
The OnGet
method initializes any state needed for the page. The Create page doesn't have any state to initialize, so Page
is returned. Later in the tutorial, an example of OnGet
initializing state is shown. The Page
method creates a PageResult
object that renders the Create.cshtml
page.
The Movie
property uses the [BindProperty] attribute to opt-in to model binding. When the Create form posts the form values, the ASP.NET Core runtime binds the posted values to the Movie
model.
The OnPostAsync
method is run when the page posts form data:
If there are any model errors, the form is redisplayed, along with any form data posted. Most model errors can be caught on the client-side before the form is posted. An example of a model error is posting a value for the date field that cannot be converted to a date. Client-side validation and model validation are discussed later in the tutorial.
If there are no model errors:
- The data is saved.
- The browser is redirected to the Index page.
Examine the Pages/Movies/Create.cshtml
Razor Page file:
Visual Studio displays the following tags in a distinctive bold font used for Tag Helpers:
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<label asp-for="Movie.Title" class="control-label"></label>
<input asp-for="Movie.Title" class="form-control" />
<span asp-validation-for="Movie.Title" class="text-danger"></span>
The following Tag Helpers are shown in the preceding markup:
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<label asp-for="Movie.Title" class="control-label"></label>
<input asp-for="Movie.Title" class="form-control" />
<span asp-validation-for="Movie.Title" class="text-danger"></span>
The <form method="post">
element is a Form Tag Helper. The Form Tag Helper automatically includes an antiforgery token.
The scaffolding engine creates Razor markup for each field in the model, except the ID, similar to the following:
The Validation Tag Helpers (<div asp-validation-summary
and <span asp-validation-for
) display validation errors. Validation is covered in more detail later in this series.
The Label Tag Helper (<label asp-for="Movie.Title" class="control-label"></label>
) generates the label caption and [for]
attribute for the Title
property.
The Input Tag Helper (<input asp-for="Movie.Title" class="form-control">
) uses the DataAnnotations attributes and produces HTML attributes needed for jQuery Validation on the client-side.
For more information on Tag Helpers such as <form method="post">
, see Tag Helpers in ASP.NET Core.
[!div class="step-by-step"] Previous: Add a model Next: Work with a database
:::moniker-end
:::moniker range=">= aspnetcore-6.0"
Examine the Pages/Movies/Index.cshtml.cs
Page Model:
Razor Pages are derived from xref:Microsoft.AspNetCore.Mvc.RazorPages.PageModel. By convention, the PageModel
derived class is named PageNameModel
. For example, the Index page is named IndexModel
.
The constructor uses dependency injection to add the RazorPagesMovieContext
to the page:
See Asynchronous code for more information on asynchronous programming with Entity Framework.
When a request is made for the page, the OnGetAsync
method returns a list of movies to the Razor Page. On a Razor Page, OnGetAsync
or OnGet
is called to initialize the state of the page. In this case, OnGetAsync
gets a list of movies and displays them.
When OnGet
returns void
or OnGetAsync
returns Task
, no return statement is used. For example, examine the Privacy Page:
When the return type is xref:Microsoft.AspNetCore.Mvc.IActionResult or Task<IActionResult>
, a return statement must be provided. For example, the Pages/Movies/Create.cshtml.cs
OnPostAsync
method:
Examine the Pages/Movies/Index.cshtml
Razor Page:
Razor can transition from HTML into C# or into Razor-specific markup. When an @
symbol is followed by a Razor reserved keyword, it transitions into Razor-specific markup, otherwise it transitions into C#.
The @page
Razor directive makes the file an MVC action, which means that it can handle requests. @page
must be the first Razor directive on a page. @page
and @model
are examples of transitioning into Razor-specific markup. See Razor syntax for more information.
The @model
directive specifies the type of the model passed to the Razor Page. In the preceding example, the @model
line makes the PageModel
derived class available to the Razor Page. The model is used in the @Html.DisplayNameFor
and @Html.DisplayFor
HTML Helpers on the page.
Examine the lambda expression used in the following HTML Helper:
@Html.DisplayNameFor(model => model.Movie[0].Title)
The xref:Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper%601.DisplayNameFor%2A HTML Helper inspects the Title
property referenced in the lambda expression to determine the display name. The lambda expression is inspected rather than evaluated. That means there is no access violation when model
, model.Movie
, or model.Movie[0]
is null
or empty. When the lambda expression is evaluated, for example, with @Html.DisplayFor(modelItem => item.Title)
, the model's property values are evaluated.
Select the menu links RazorPagesMovie, Home, and Privacy. Each page shows the same menu layout. The menu layout is implemented in the Pages/Shared/_Layout.cshtml
file.
Open and examine the Pages/Shared/_Layout.cshtml
file.
Layout templates allow the HTML container layout to be:
- Specified in one place.
- Applied in multiple pages in the site.
Find the @RenderBody()
line. RenderBody
is a placeholder where all the page-specific views show up, wrapped in the layout page. For example, select the Privacy link and the Pages/Privacy.cshtml
view is rendered inside the RenderBody
method.
Consider the following markup from the Pages/Movies/Index.cshtml
file:
The preceding highlighted markup is an example of Razor transitioning into C#. The {
and }
characters enclose a block of C# code.
The PageModel
base class contains a ViewData
dictionary property that can be used to pass data to a View. Objects are added to the ViewData
dictionary using a key value pattern. In the preceding sample, the Title
property is added to the ViewData
dictionary.
The Title
property is used in the Pages/Shared/_Layout.cshtml
file. The following markup shows the first few lines of the _Layout.cshtml
file.
The line @*Markup removed for brevity.*@
is a Razor comment. Unlike HTML comments <!-- -->
, Razor comments are not sent to the client. See MDN web docs: Getting started with HTML for more information.
-
Change the
<title>
element in thePages/Shared/_Layout.cshtml
file to display Movie rather than RazorPagesMovie. [!code-cshtml] -
Find the following anchor element in the
Pages/Shared/_Layout.cshtml
file.<a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesMovie</a>
-
Replace the preceding element with the following markup:
<a class="navbar-brand" asp-page="/Movies/Index">RpMovie</a>
The preceding anchor element is a Tag Helper. In this case, it's the Anchor Tag Helper. The
asp-page="/Movies/Index"
Tag Helper attribute and value creates a link to the/Movies/Index
Razor Page. Theasp-area
attribute value is empty, so the area isn't used in the link. See Areas for more information. -
Save the changes and test the app by selecting the RpMovie link. See the _Layout.cshtml file in GitHub if you have any problems.
-
Test the Home, RpMovie, Create, Edit, and Delete links. Each page sets the title, which you can see in the browser tab. When you bookmark a page, the title is used for the bookmark.
Note
You may not be able to enter decimal commas in the Price
field. To support jQuery validation for non-English locales that use a comma (",") for a decimal point, and non US-English date formats, you must take steps to globalize the app. See this GitHub issue 4076 for instructions on adding decimal comma.
The Layout
property is set in the Pages/_ViewStart.cshtml
file:
The preceding markup sets the layout file to Pages/Shared/_Layout.cshtml
for all Razor files under the Pages folder. See Layout for more information.
Examine the Pages/Movies/Create.cshtml.cs
page model:
The OnGet
method initializes any state needed for the page. The Create page doesn't have any state to initialize, so Page
is returned. Later in the tutorial, an example of OnGet
initializing state is shown. The Page
method creates a PageResult
object that renders the Create.cshtml
page.
The Movie
property uses the [BindProperty] attribute to opt-in to model binding. When the Create form posts the form values, the ASP.NET Core runtime binds the posted values to the Movie
model.
The OnPostAsync
method is run when the page posts form data:
If there are any model errors, the form is redisplayed, along with any form data posted. Most model errors can be caught on the client-side before the form is posted. An example of a model error is posting a value for the date field that cannot be converted to a date. Client-side validation and model validation are discussed later in the tutorial.
If there are no model errors:
- The data is saved.
- The browser is redirected to the Index page.
Examine the Pages/Movies/Create.cshtml
Razor Page file:
Visual Studio displays the following tags in a distinctive bold font used for Tag Helpers:
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<label asp-for="Movie.Title" class="control-label"></label>
<input asp-for="Movie.Title" class="form-control" />
<span asp-validation-for="Movie.Title" class="text-danger"></span>
The following Tag Helpers are shown in the preceding markup:
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<label asp-for="Movie.Title" class="control-label"></label>
<input asp-for="Movie.Title" class="form-control" />
<span asp-validation-for="Movie.Title" class="text-danger"></span>
The <form method="post">
element is a Form Tag Helper. The Form Tag Helper automatically includes an antiforgery token.
The scaffolding engine creates Razor markup for each field in the model, except the ID, similar to the following:
The Validation Tag Helpers (<div asp-validation-summary
and <span asp-validation-for
) display validation errors. Validation is covered in more detail later in this series.
The Label Tag Helper (<label asp-for="Movie.Title" class="control-label"></label>
) generates the label caption and [for]
attribute for the Title
property.
The Input Tag Helper (<input asp-for="Movie.Title" class="form-control">
) uses the DataAnnotations attributes and produces HTML attributes needed for jQuery Validation on the client-side.
For more information on Tag Helpers such as <form method="post">
, see Tag Helpers in ASP.NET Core.
[!div class="step-by-step"] Previous: Add a model Next: Work with a database
:::moniker-end