I am fairly new to blazor ecosystem and have a requirement to modify the default registration to include role for the user. This could be a simple radio but they want selectable cards.
I understand default registration is statically rendered and I cannot set rendermode InteractiveServer
. To overcome this I have created a new component and set it as an interactive component.
@rendermode InteractiveServer
<div class="flex space-x-4">
<div @onclick="@(() => SelectRole("Customer"))"
class="@GetRoleClass("Customer") cursor-pointer p-4 rounded-lg shadow-md flex-1 flex flex-col items-center justify-center transition">
<img src="https://via.placeholder.com/100" alt="Customer" class="mb-2" />
<p class="font-bold">Customer</p>
<p class="text-sm text-gray-600">Register as a customer to access our products and services.</p>
</div>
<div @onclick="@(() => SelectRole("Vendor"))"
class="@GetRoleClass("Vendor") cursor-pointer p-4 rounded-lg shadow-md flex-1 flex flex-col items-center justify-center transition">
<img src="https://via.placeholder.com/100" alt="Vendor" class="mb-2" />
<p class="font-bold">Vendor</p>
<p class="text-sm text-gray-600">Register as a vendor to sell your products and services.</p>
</div>
</div>
@code {
[Parameter]
public EventCallback<string> OnRoleSelected { get; set; }
private string? SelectedRole { get; set; }
private async void SelectRole(string role)
{
SelectedRole = role;
await OnRoleSelected.InvokeAsync(role);
StateHasChanged();
}
private string GetRoleClass(string role) =>
(SelectedRole == role) ? "border-2 border-blue-500 bg-blue-100" : "border border-gray-300";
}
I use it in default registration page as
<div class="pt-4 mb-4">
@Input.Role
<h3 class="text-lg font-semibold mb-2">Select your role</h3>
<RegisterationRoleSelect OnRoleSelected="SelectRole"/>
<ValidationMessage For="() => Input.Role" class="text-sm text-red-600 mt-2" />
</div>
private async Task SelectRole(string role)
{
Input.Role = role;
await Task.Yield();
StateHasChanged();
}
The resulting form interaction works fine and function in child component is called. however, invoke function does not trigger function in parent. I understand this could be because page is statically rendered and its not waiting for any events.
What is the way around this?