How to trigger modal in blazer web server using c#?

Hi Team

I have a blazer web server, want to understand something regarding my code. The suppose when clicking add operation it triggers modal, currently its not doing so and checked by debuging there are no any js errors.

How do i improve this logic so it can work as expected?

@PAGE “/main”
@using OperationApp.Models
@using OperationApp.Components
@using Blazored.Modal

<h1>Operation Manager</h1>

<!– Button to open modal for adding a device –>
<button class=”btn btn-primary mb-3″ @onclick=”OpenAddDeviceModal”>Add Device</button>

<!– Listing of operations –>
@if (operations.Any())
{
<ul class=”list-group”>
@foreach (var operation in operations)
{
<li class=”list-group-item d-flex justify-content-between align-items-center”>
<span>@operation.Name</span>
<span>
<!– Button to remove the operation –>
<button class=”btn btn-danger” @onclick=”() => RemoveOperation(operation.OperationID)”>Remove</button>
</span>
</li>
}
</ul>
}
else
{
<p>No operations available.</p>
}

<!– AddDeviceModal component –>
<AddDeviceModal @ref=”addDeviceModal” />

@code {
private List<Operation> operations = new List<Operation>();
private AddDeviceModal addDeviceModal;

private void OpenAddDeviceModal()
{
addDeviceModal.Open(); // Open the modal
}

private void RemoveOperation(int operationID)
{
var operationToRemove = operations.FirstOrDefault(op => op.OperationID == operationID);
if (operationToRemove != null)
{
operations.Remove(operationToRemove);
}
}
}

Hi Team I have a blazer web server, want to understand something regarding my code. The suppose when clicking add operation it triggers modal, currently its not doing so and checked by debuging there are no any js errors.How do i improve this logic so it can work as expected? @PAGE “/main”
@using OperationApp.Models
@using OperationApp.Components
@using Blazored.Modal