Route parameters in asp.net core razor pages

Suggested Videos
Part 7 - List razor page | Text | Slides
Part 8 - Routing in asp.net core razor pages | Text | Slides
Part 9 - Query string parameters in asp.net core razor pages | Text | Slides

In this video we will discuss, route parameters in asp.net core razor pages.

The following is the Pages folder hierarchy in our asp.net core project. 




Index.cshtml displays the list of all employees. Details.cshmtl displays the details of a specific employee. The ID of the employee is passed to the Details razor page as a parameter.


Consider the following example. We are passing Employee ID as a parameter to the Details razor page.

<a asp-page="/Employees/Details" asp-route-ID="@employee.Id">

    View

</a>

By default Employee ID is passed as a query string parameter

https://localhost:12345/employees/details/?id=1

If you want it to be passed as a route parameter instead, use a route template and specify the route parameter. The route template is specified next to the @page directive in .cshtml file. We specify route parameters in curly braces.

@page "{id}"

With the above change, Employee ID is now passed as a route parameter.

https://localhost:12345/employees/details/1/

Relate the path /employees/details/1/ to the following folder hierarchy



By default, the path to the razor page determines the URL at which the page can be reached. 

Details.cshtml page is in the Employees folder. Employees folder is in the root Pages folder. So /employees/details/ID is the path at which Details.cshtml razor page is reachable by default. If you want to change this, you can using the route template.

/employees/details/view/1/ is the URL generated by the following route template. Since, the route template does not start with / or ~/ the route (view/{id}) specified by the route template will be appended to the default root file path /employees/details.

@page "View/{id}"

If the route template starts with / or ~/ then the root file path (/employees/details) is ignored. /employees/view/1/ is the URL generated by the following route template.

@page "/Employees/View/{id}"

You can also pass multiple parameters by including multiple place holders. For example, display employees from Virginia state in the United States.

@page "/Employees/{country}/{state}"

Accessing route parameters

Add a parameter to the OnGet() method with the same name and data type as the route parameter. Model-binding in asp.net core automatically binds the route parameter value to the OnGet() method parameter.

public class DetailsModel : PageModel
{
    public void OnGet(int id)
    {
        Employee = employeeRepository.GetEmployee(id);
    }
}

If you need the route parameter value in the Display Template, then assign the value to a public property. This public property is then available in the Display Template.

public class DetailsModel : PageModel
{
    public int Id { get; set; }

    public void OnGet(int id)
    {
        Id = id;
    }
}

BindProperty in ASP.NET Core

Instead of creating a public property, a method parameter and then assigning the method parameter value to the public property. We can use BindProperty attribute with SupportsGet property set to true.

public class DetailsModel : PageModel
{
    [BindProperty(SupportsGet = true)]
    public int Id { get; set; }

    public void OnGet()
    {
        // Id property is available inside this
        // OnGet() method & the Display Template
    }
}

BindProperty and SupportsGet

By default, BindProperty attribute binds values to properties on the PageModel class, only if the request is a POST request. If the request is a GET request, the values are not binded. However, we can set SupportsGet property to true, so even on a GET request the values are bound to properties on the PageModel class.