Customize default Account Pages for Blazer Server with Interactivity

Afnan Bashir 0 Reputation points
2024-10-29T20:22:28.5266667+00:00

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?

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,596 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 66,706 Reputation points
    2024-10-29T21:03:41.51+00:00

    your question is not clear. Blazor uses razor pages (not Blazor components) for authentication (Microsoft Identity). you scaffold these razor pages if you want to customize them. While you can integrate a Blazor component (typically static) into a razor page, this requirement does not seem to warrant this complexity (firing up a Blazor app to render a simple radio button selection).

    the Blazor app unload and redirects to the Register razor page. after registration, and setting the authentication cookie, the identity page redirects back to the Blazor app, which is reloaded and has access to the identity context loaded from the cookie.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.