Blazor Server项目中Bootstrap Modal点击无响应问题求助

以下是你的代码中存在的问题及对应的修复方案：

1. JavaScript函数的错误 #

你的OpenModal函数有两处关键问题：

• 拼写错误：document.getElementsById应为document.getElementById（Element用单数，因为DOM中ID是唯一的）
• 未处理模态框未初始化场景：如果模态框还没被Bootstrap初始化，bootstrap.Modal.getInstance(model)会返回null，直接调用show()会触发报错，需要先实例化模态框。

修复后的General.js代码：

window.OpenModal = (modalId) => {
    const modalElement = document.getElementById(modalId);
    if (!modalElement) {
        console.error(`Modal with ID ${modalId} not found`);
        return;
    }
    let modalInstance = bootstrap.Modal.getInstance(modalElement);
    // 实例不存在则先创建
    if (!modalInstance) {
        modalInstance = new bootstrap.Modal(modalElement);
    }
    modalInstance.show();
}

2. C#方法的异步适配问题 #

IJSRuntime.InvokeVoidAsync是异步方法，你的EditCustomer方法不能用void修饰，需要改为async Task，否则可能导致异步操作未正确执行：

修复后的C#代码：

@inject IJSRuntime JS

// ...

public async Task EditCustomer(int CustomerId)
{
    // 可在此处根据CustomerId加载对应数据，填充模态框内容
    // 示例：SelectedCustomer = await CustomerService.GetById(CustomerId);
    
    await JS.InvokeVoidAsync("OpenModal", "#Mdl_Add_Customer");
}

3. Razor视图中的异步绑定调整 #

因为EditCustomer改为异步方法，Razor中的@onclick需要添加async关键字：

修复后的Razor代码片段：

<li><a class="dropdown-item" href="javascript:void(0);" @onclick="async ()=> await 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="async ()=> await EditCustomer(customer.Customer_Id)"><i class='oi oi-delete'></i> Delete</a></li>

4. 确认模态框HTML结构合规 #

确保你的模态框符合Bootstrap的标准结构，示例如下：

<div class="modal fade" id="Mdl_Add_Customer" tabindex="-1" aria-labelledby="Mdl_Add_Customer_Label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="Mdl_Add_Customer_Label">编辑客户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 模态框内容区域，可填充客户表单字段 -->
                <p>客户ID: @SelectedCustomer?.Customer_Id</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

额外检查项 #

• 确保已正确引入Bootstrap JS文件（在_Layout.cshtml或index.html中）：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

• 确认General.js在Bootstrap JS之后加载，避免依赖问题。

内容的提问来源于stack exchange，提问作者Khan Faizan