Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Bootstrap Model Not Working in BlazorServer App

I am learning Blazor, so I am Working on A project where i am Using Bootstrap Model..
Problem Is On click The Actions Buttons On the List, The Model Is Not Opening .. i am Using
IJSRuntime to Open The Model… Below Is My Code

                <tbody id="tbody">
                @{
                    if (customers.Count > 0)
                    {
                        int i = 0;

                        @foreach (var customer in customers)
                        {
                            i++;
                            <tr>
                                <td>@customer.Customer_Id </td>
                                <td>@customer.Customer_Name</td>
                                <td>@customer.Customer_Address</td>
                                <td>@customer.Customer_Phone_No</td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-dark btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span><i class='oi oi-cog'></i></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="javascript:void(0);" @onclick="()=> EditCustomer(customer.Customer_Id)"><i class='oi oi-task'></i> Edit</a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item" href="javascript:void(0);" @onclick="()=> EditCustomer(customer.Customer_Id)"><i class='oi oi-delete'></i> Delete</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>


                        }
                    }

                    else
                    {
                        <tr><td colspan="5">No Data Found</td></tr>
                    }
                }

            </tbody>



    public void EditCustomer(int CustomerId)
     {
        JS.InvokeVoidAsync("OpenModal", "#Mdl_Add_Customer");  // where Mdl_Add_Customer is id of the Modal Div
    }

Js Function On Another File as General.js

window.OpenModal = (Model) => {

let model = document.getElementsById(Model)
let __modal = bootstrap.Modal.getInstance(model)
__modal.show();

}
enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

on List Item Edit Action I want Popup To Open… Thanks In Advance

>Solution :

Open the modal like this (add the ‘new’):

var modal = new bootstrap.Modal(document.getElementById('modalId'));
modal.show();
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading