.net 引导模型在BlazorServer应用程序中不起作用

hjqgdpho  于 2023-01-27  发布在  .NET
关注(0)|答案(1)|浏览(161)

我正在学习Blazor,所以我在一个项目上工作,我正在使用Bootstrap模型..问题是在单击列表上的操作按钮,模型没有打开..我正在使用IJSRRuntime打开模型..下面是我的代码

<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
    }

在另一个文件上作为General.js的Js函数

window.OpenModal = (Model) => {

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

}

在列表项编辑操作上,我希望打开弹出窗口...提前感谢

gudnpqoy

gudnpqoy1#

如下所示打开模态(添加“new”):

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

相关问题