How to display a modal form in blazor when button is clicked?

See more:

C#

bootstrap

Blazor

BlazorForms

Hi Team

I have a modal form with fields from the model and my razor component needs when a user clicks a button to open this modal form. Currently when debug from the console to see if there are any errors and no errors from the css nor javascript. I need some help if any colleague had experience this before and workaround solution.

What I have tried:

<pre>@using Models;

@code {
    Operation newOperation = new Operation();
    List<Operation> operations = new List<Operation>();
    List<Device> devices = new List<Device>();
    bool showValidationErrors = false;
    bool showAddOperationModal = false;


    protected override void OnInitialized()
    {
        devices = new List<Device>
        {
        new Device {DeviceID = 1, Name = "Barcode Scanner"},
        new Device {DeviceID = 2, Name = "Printer"},
        new Device {DeviceID = 3, Name = "Camera"},
        new Device {DeviceID = 4, Name= "SocketTray"}
        };
    }



    void AddOperation()
    {
        showValidationErrors = false;

        // validate fields
        if(string.IsNullOrWhiteSpace(newOperation.Name))
        {
            showValidationErrors = true;
            return;
        }

        if(newOperation.OrderInWhichToPerform < 0 || newOperation.OrderInWhichToPerform > 10) 
        {
            showValidationErrors = true;
            return;
        }

        if(newOperation.ImageData == null || newOperation.ImageData.Length == 0) 
        {
            showValidationErrors = true;
            return;
        }
        if (newOperation.Device == null || newOperation.Device.DeviceID <= 0)
        {
            showValidationErrors = true;
            return;
        }

        // only proceed when fields are valid.
        int newOperationId = operations.Count + 1;
        newOperation.OperationID = newOperationId;
        operations.Add(newOperation);
        newOperation = new Operation();
    }
    // method invokes for device selection.
    void OnDeviceSelected(ChangeEventArgs e)
    {
        int deviceId = Convert.ToInt32(e.Value);
        newOperation.Device = devices.FirstOrDefault(d => d.DeviceID == deviceId);

    }
    async Task ShowAddOperationModal()
    {
        showAddOperationModal = true;
        Console.WriteLine("Modal opened");
        await Task.Delay(100); // Adding a small delay
        StateHasChanged(); // Force a re-render
    }

}
<button class="btn btn-primary" @onclick="ShowAddOperationModal">Add New Operation</button>

@if(showAddOperationModal)
{
    <!--Bootstrap for adding new operation-->
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Operation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <!--form fields for new operation-->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="operationName">Operation Name</label>
                        <input type="text" class="form-control" id="operationName" @bind="newOperation.Name" />
                        @if (showValidationErrors && string.IsNullOrWhiteSpace(newOperation.Name))
                        {
                            <p class="text-danger">Operation is required</p>
                        }
                    </div>

                    <!--Order number is required-->
                    <div class="form-group">
                        <label for="order">Order In Which to Perform</label>
                        <input type="number" class="form-group" id="order" @bind="newOperation.OrderInWhichToPerform" />
                        @if (showValidationErrors && (newOperation.OrderInWhichToPerform <= 0 || newOperation.OrderInWhichToPerform > 10))
                        {
                            <p class="text-danger">Order must be between 1 and 10</p>
                        }
                    </div>
                    <!--Image data is required-->
                    <div class="form-group">
                        <label for="imageUpload">Image Data</label>
                        <input type="file" class="form-control-file" id="imageUpload" />
                        @if (showValidationErrors && (newOperation.ImageData == null || newOperation.ImageData.Length == 0))
                        {
                            <p class="text-danger">Image data is required</p>
                        }
                    </div>
                    <!--Device is dropdown-->
                    <div class="form-group">
                        <label for="deviceSelect">Select Device</label>
                        <select class="form-group" id="deviceSelect" @onchange="OnDeviceSelected">
                            <option value="">Select device Types</option>
                            @foreach (var device in devices)
                            {

                                <option value="@device">@device.Name</option>

                            }
                        </select>
                        @if (showValidationErrors && (newOperation.Device == null || newOperation.Device.DeviceID <= 0))
                        {
                            <p class="text-danger">Please select a device</p>
                        }
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

}

// index. razor

@page "/"
@inject IJSRuntime JSRuntime
@using Models
@using DeviceApplication.Components 

<PageTitle>Index</PageTitle>

<div class="container">
    <h1>Welcome to Operations Management</h1>
    <AddOperationModal /> 
</div>