Click here to Skip to main content
15,881,089 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:

C#
<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>
Posted
Updated 21-Nov-23 4:36am
v2
Comments
Andre Oosthuizen 24-Nov-23 12:47pm    
You are showing what your code is suppose to do, as always way too much code... You did not specify what the error is or what is not happening either...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900