Data is passed using ASP.NET Core Endpoint
Routing for Blazor server applications. Using MapBlazorHub endpoint routing
extension method, ASP.NET Core will start accepting the incoming link for
Blazor component.
The route uses the parameter (page name) to
navigate to the corresponding components.
In the following code example, you get the dropdown value and pass the parameter to navigate the page andthe full details of the employee is displayed based on the employee’s value.
@inject NavigationManager UriHelper
<select @onchange="@onChange">
<option></option>
<option value=1>Andrew Fuller</option>
<option value=2>Anne Dodsworth</option>
<option value=3>Janet Leverling</option>
</select>
@code {
private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
{
UriHelper.NavigateTo("employeeDetails/" + args.Value);
}
}
[EmployeeDetails.razor]
@page "/employeeDetails/{Id:int}"
@if (empData != null)
{
<div class="container">
<div class="row details">
<div>
<label><b>Employee Id: </b></label>
<span>@empData.Eid</span>
</div>
<div>
<label><b>Employee Name: </b></label>
<span>@empData.FirstName</span>
</div>
<div>
<label><b>Designation: </b></label>
<span>@empData.Designation</span>
</div>
</div>
</div>
}
<style>
.details {
display: block;
}
</style>
@code {
[Parameter]
public int Id { get; set; }
private EmployeeData empData { get; set; }
protected override void OnInitialized()
{
empData = employeeData.Where(i => i.Eid.Equals(Id)).FirstOrDefault();
}
public class EmployeeData
{
public string FirstName { get; set; }
public string Designation { get; set; }
public int Eid { get; set; }
}
List<EmployeeData> employeeData = new List<EmployeeData>
{
new EmployeeData() { FirstName = "Andrew Fuller", Designation = "Team Lead", Eid= 1 },
new EmployeeData() { FirstName = "Anne Dodsworth", Designation = "Developer", Eid= 2 },
new EmployeeData() { FirstName = "Janet Leverling", Designation = "HR", Eid= 3 },
};
}
Permalink