带有 Bootstrap 5 的 Blazor Web App (.NET 8) 如何手动显示/隐藏模态框？

Question

如何使用 Javascript 手动显示 Bootstrap 5 Modal，如其文档中所述，在 Blazor Interactive Server 上使用此格式？

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

我尝试使用JSInterop.InvokeAsync，同时将我的JS代码放在位于wwwroot/的另一个文件中，我通过App.razor加载该文件，并尝试通过代码块加载模块本身，但未找到

new bootstrap

boostrap变量对于两种格式。

相反，我使用 BlazorBootstrap 库，它具有 Modal 组件来显示我的模态，而不是 Bootstrap 5。有没有办法使用 JSInterop 来显示/隐藏 boostrap 5 模态？

@page "/modal"
@rendermode InteractiveServer
@inject IJSRuntime JS

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Blazor 代码块

@code {

    private async Task Confirm()
    {
     // Call method and pass modal ID param to call
      await JS.InvokeVoidAsync("<<METHOD>>", "exampleModal");
    }


}

JS 文件

var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();

Blazor ElementReference 是否是更好的方法？

其他相关问题：Blazor 上的 Bootstrap 模式停止在 .NET 8 RC2 上工作（使用 JSInterop 打开/关闭）

我希望 JSInvoke 调用 Javascript 代码并显示我的模式，但错误提示找不到引导程序。我尝试将其设置为窗口对象，并尝试导出一个函数，但都返回了相同的错误。

Answer 1

你不需要 JS 来做到这一点。 您还应该避免使用 JS 进行此类 DOM 操作，因为很容易导致 Blazor 虚拟 DOM 和浏览器显示 DOM 不同步，从而导致 UI 更新中出现意外的显示结果。

通过更改其 css

display

属性来显示或隐藏 Bootstrap 模型。

这是使用示例代码进行一些重构的简单实现：

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<div class="m-2">
    <button disabled="@_dialogOpen" class="btn btn-primary" @onclick="this.OpenDialog">Open Dialog</button> 
</div>
<!-- Modal -->
<div class="modal fade @_dialogCss" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @onclick="this.CloseDialog"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick="this.CloseDialog">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

@code {
    private bool _dialogOpen;
    private string _dialogCss => _dialogOpen ? "show" : "hide"; 

    private Task OpenDialog()
    {
        _dialogOpen = true;
        return Task.CompletedTask;
    }

    private Task CloseDialog()
    {
        _dialogOpen = false;
        return Task.CompletedTask;
    }
}

您可以搜索 SO 以查找不同的基于组件的实现。

这是最近关于使用画布外的答案，基本上是相同的事情。

https://stackoverflow.com/a/76114783/13065781

并构建异步模态组件：

https://stackoverflow.com/a/76114783/13065781