Blazor Page中父组件传参的Bootstrap模态框无法显示如何解决

核心问题排查点 #

• 首先确认Bootstrap依赖完整引入：Bootstrap模态框依赖对应版本的CSS和JS文件，Bootstrap 4还额外依赖jQuery和Popper.js，需要检查Blazor应用的入口文件（WebAssembly为wwwroot/index.html，Blazor Server为Pages/_Layout.cshtml/Pages/_Host.cshtml）是否按顺序引入了所有依赖：
  1. head标签内引入Bootstrap CSS
  2. body标签底部按顺序引入jQuery、Popper.js（Bootstrap 4需要）、Bootstrap JS
• 避免Blazor事件与原生Bootstrap触发逻辑冲突：你当前给Add按钮同时加了Bootstrap原生的data-toggle属性和Blazor的@onclick事件，两者执行顺序不确定，且@onclick中重新初始化workoutObject会触发子组件重渲染，很容易覆盖原生Bootstrap的模态框显示逻辑。
• 子组件模态框样式错误：你在子组件的模态框div上硬写了style="display:block"，不符合Bootstrap模态框的默认样式规则，会导致显示异常。

具体修复步骤 #

1. 修改子组件模态框代码 #

移除硬编码的display样式，添加fade动画类，保持Bootstrap默认的隐藏状态：

@using Tracker.Data
@using Tracker.Services
@inject IWorkoutsListService service
@inject IJSRuntime jsRuntime

<div class="modal fade" tabindex="-1" role="dialog" id="workoutsModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Workout Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <EditForm Model="@WorkoutObject" OnValidSubmit="@HandleValidSubmit">
                    <div class="form-group">
                        <label for="workoutName">Workout Name</label>
                        <input type="hidden" @bind-value="@WorkoutObject.Id" />
                        <InputText id="name" class="form-control" @bind-Value="@WorkoutObject.Name" />
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </EditForm>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public Tracker.Data.Workouts WorkoutObject { get; set; }
    List<string> TaskStatusList = new List<string>() { "New", "In Progress", "Completed" };

    private async Task HandleValidSubmit()
    {
        // 提交逻辑处理完成后调用JS关闭模态框
        await jsRuntime.InvokeVoidAsync("$('#workoutsModal').modal('hide')");
        // 这里可以加回调通知父页面刷新列表
    }
}

2. 修改父页面代码 #

移除按钮上的原生Bootstrap触发属性，通过JS互调主动控制模态框显示：

@page "/workouts"
@using Tracker.Data
@using Tracker.Services
@inject IWorkoutsListService service
@inject IJSRuntime jsRuntime

<h3>Workout Plans</h3>
@if (workoutsNames == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var workouts in workoutsNames)
            {
                <tr>
                    <td>@workouts.Name</td>                  
                    <td><button type="button" class="btn btn-primary" value="Edit">Edit</button></td>
                    <td><input type="button" class="btn btn-danger" value="Delete" /></td>
                </tr>
            }
        </tbody>
    </table>
}
<div>
    <input type="button" class="btn btn-primary" value="Add Task" @onclick="InitializeTaskObject" />
</div>

<WorkoutsDetail WorkoutObject=workoutObject></WorkoutsDetail>

@code {
    List<Tracker.Data.Workouts> workoutsNames;
    Tracker.Data.Workouts workoutObject = new Tracker.Data.Workouts();
    
    protected override async Task OnInitializedAsync()
    {
        workoutsNames = await service.Get();
    }

    private async Task InitializeTaskObject()
    {
        workoutObject = new Tracker.Data.Workouts();
        // 主动调用JS显示模态框
        await jsRuntime.InvokeVoidAsync("$('#workoutsModal').modal('show')");
    }
}

补充说明 #

如果使用Bootstrap 5，不需要依赖jQuery，JS调用模态框的写法改为：

// 显示模态框
new bootstrap.Modal(document.getElementById('workoutsModal')).show()
// 隐藏模态框
const modalInstance = bootstrap.Modal.getInstance(document.getElementById('workoutsModal'))
modalInstance.hide()

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