Join Jess Chadwick for an in-depth discussion in this video Passing parameters in the URL, part of ASP.NET Core: Razor Pages.
- [Instructor] In the previous video, I showed you how to use Razor to execute C sharp logic, that retrieves data, and renders it as mark up, to create a beautiful data driven application, with just a handful of lines of code and mark up. The problem is, in order to make that work, I had hard coded the ID of the recipe to display in the recipe details page. What I really want to be able to do is to the see information for any recipe. And, not only that, I want to be able to decide which recipe to show based on the page's URL.
In other words, in order to view the details of each recipe, I'd like to modify the links on the index page to pass the recipe ID on the URL, like this. The ability to pass parameters through the URL like this, and then retrieving them in a programmatic manner is called routing. And, in order for it to work, there are two parts involved. First, you have to define the route, and second, you need to retrieve the data from that route.
The first part, defining the route, is simple enough. Just tack a string to the at page directive that indicates the pattern that Razor Pages should look for, after the name of the page in the URL. For example, in order for the slash recipe, slash to URL to map to the recipe ID to on the recipe page I need to add the following text after the at page directive on the recipe page.
This pattern tells Razor Pages to take what comes next after the page's URL and populate a route variable, named ID, with it. The braces indicate the name of the variable that Razor Pages populates. You can customize the URL even further by adding text outside of the braces pattern, to indicate static text that should be matched on the URL verbatim. In other words, this pattern, would match the URL slash recipe slash recipe dash to.
Finding the value to to the ID route variable. The second half of routing is actually getting access to that route variable. And the most direct way to do that, is through the route data dictionary property on the Razor page. The only trouble is, route data values that come from the URL are stored as strings. So, I'll need to parse that string value to a number before I can use it.
Now, when I load the site and click on one of those links in the homepage, I'm taken to the details of that recipe based on the ID in the URL. I could stop here, but Razor Pages actually offers a slightly better way to navigate to pages that have customized route values. And that is through a feature called tag helpers. I'll explain tag helpers in more detail in the working with data chapter. But, their usage in this scenario should be pretty self-explanatory.
To use the routing tag helper, start by adding the following line to the page in which you'll be using the tag helper. This line makes the capability available to the page. So, now I can convert the links to the recipe page to use the routing tag helper, instead of creating the URL manually.
I'll start by replacing the anchor tags href attribute with an asp-page attribute, telling it the location of the page that I want to link to. Then, I can use the asp dash route attribute to pass along whatever route values I'd like. The asp route attribute works a lot like the HTML five data dash attributes, in that you start the attribute with the asp route dash, followed by whatever name you like.
In this case, the name of the route value ID. So, since I use the name ID for the route value on the recipe page, I can use asp route dash ID, to specify the value of the recipe ID to navigate to. And, with this in place, I can run the page, and inspect the markup of the recipe links to see that Razor Pages has replaced those asp dash attributes with an href attribute that has the correct URL to the recipe page for that ID.
URL routing is a great way to pass parameters to your Razor Pages in a very web friendly manner. Just be sure you stick with passing only simple, primitive values through the URL, and don't be tempted to pass anything more complex, and you should be just fine.
- Creating a new application
- Setting up pages
- Rendering dynamic content
- Reusing markup with layouts
- Increasing the maintainability of pages
- Processing data
- Validating input
- Securing an application