Blazor test page not opening Modal

Question

I have the following code but when it renders to the browser it doesn't have an onClick call so clicking the button has no effect (go easy on me this is my first Blazor app):

I have a UserComponent which is the default component. I have a second Component UserEdit Component.

When I run the solution, then click the button nothing happens. What am I missing here?

// UserComponent

@page "/"

    <Modal @ref="modal" />

    <Button Color="ButtonColor.Primary" @onclick="ShowUserEditComponent">Show Employee Component</Button>

    @code {
        private Modal modal = default!;

        private async Task ShowUserEditComponent()
        {
            var parameters = new Dictionary<string, object>();
            parameters.Add("Id", new Guid("F19958EB-DBD7-450E-9418-09F25D26C91B"));
            await modal.ShowAsync<EditUserModal>(title: "User Details", parameters: parameters);
        }
    }

// UserEditComponent
@using BlazorApp1.Components.Domain.Users

<div class="row">
    <div class="col-5 col-md-3 text-end">Id :</div>
    <div class="col-7 col-md-9">@Id</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">First Name :</div>
    <div class="col-7 col-md-9">@user?.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">Last Name :</div>
    <div class="col-7 col-md-9">@user?.LastName</div>
</div>

@code {
    private UserDto? user;

    [Parameter] public int Id { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        user = new UserDto { FirstName = "Jim", LastName = "Beam" };

        base.OnInitialized();
    }
}

Answer 1

If we want to use BlazorBootStrapper.Modal, we should install Blazor.Bootstrap.

Then we can follow the blog(Getting started - Blazor Server (.NET 7)) to use it.

Here is my test result

The UserComponent and UserEditComponent code same as yours, and the important things we should register AddBlazorBootstrap in Program.cs file.