Exercise 1: Routing with Parameters
Blazor Exercise 1: Routing with Parameters
Welcome to the first hands-on exercise in our Blazor series! This exercise will guide you through creating a basic routable component that can receive and display data directly from the URL. This is a fundamental concept for building dynamic web applications where different content needs to be shown based on user input in the address bar.
✅ Goal:
Create a routable component that receives and displays an integer route parameter from the URL.
🔧 Steps:
Step 1: Create a new Razor component
In your existing Blazor WebAssembly project, create a new Razor component file. You can place it in the Pages folder (which is a common convention for routable components) or any other folder you prefer. Name the file UserDetails.razor.
Step 2: Add the @page directive with a route parameter
Open UserDetails.razor and add the following directive at the very top of the file. This defines the URL pattern that will activate this component. The {id:int} part specifies that there will be an integer parameter named `id` in the route.
@page "/user/{id:int}"
Step 3: Define a [Parameter] property in the @code block
Below your HTML markup, add a @code block. Inside this block, define a public property named id (matching the name in your route parameter) and mark it with the [Parameter] attribute. This tells Blazor to automatically bind the value from the URL route to this property.
@code {
[Parameter]
public int id { get; set; }
}
Step 4: Display the id value on the page
Now, within the HTML part of your UserDetails.razor component, display the value of the id property.
<h3 class="heading3">User ID: @id</h3>
<p class="paragraph">Details for user with ID: @id</p>
Your complete UserDetails.razor file should look like this:
@page "/user/{id:int}"
<h3 class="heading3">User ID: @id</h3>
<p class="paragraph">Details for user with ID: @id</p>
@code {
[Parameter]
public int id { get; set; }
}
🧪 Try this:
- Run your Blazor application (e.g., by pressing F5 in Visual Studio or running
dotnet runfrom your project directory). - Once the application loads in your browser, manually navigate to the following URLs:
/user/101/user/42/user/999
- Observe how the displayed "User ID" changes with each URL.
🎯 Expected Output:
When you navigate to /user/101, the component should display:
User ID: 101
Details for user with ID: 101
(or whatever integer value you pass in the URL). If you try to navigate to /user/abc, Blazor's routing will typically show the "Not Found" content, as the route parameter is constrained to be an integer.
Comments
Post a Comment