分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了使用 IJSRuntime 在 blazor 中包装引导模式，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用 IJSRuntime 在 blazor 中包装引导模式？

开发过程中遇到使用 IJSRuntime 在 blazor 中包装引导模式的问题如何解决？下面主要结合日常开发的经验，给出你关于使用 IJSRuntime 在 blazor 中包装引导模式的解决方法建议，希望对你解决使用 IJSRuntime 在 blazor 中包装引导模式有所启发或帮助；

是否可以通过 IJsRuntime 获取对 bootstrap 5 bootstrap.Modal 的引用并保存对该实例的引用以供以后使用？

示例：

我可以用这个方法显示一个模态：

await _JsRuntime.InvokeVoIDAsync("eval",$"new bootstrap.Modal(document.getElementByID('myID')).show()");

但我不能以同样的方式隐藏它，因为我需要存储对 new bootstrap.Modal 创建的引用。如何在无需编写 JavaScript 的情况下动态执行此操作（我有一个引导模式组件）？有什么方法可以保存变量并稍后通过 IJsRuntime 引用它们吗？

解决方法

经过大量搜索后，我发现 eval 从来都不是解决方案。我不是 JavaScript 开发人员，但我把它放在一起：

BootstrapModal.razor

@inject IJSRuntime _jsRuntime;

<div class="modal fade" id="@Id" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            @ChildContent
        </div>
    </div>
</div>

@code {
    [Parameter]
    public String Id { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public dynamic Parameter { get; private set; }

    protected override void OnInitialized()
    {
        if (String.IsNullOrEmpty(Id))
        {
            Id = Guid.NewGuid().ToString();
        }
    }

    public async Task Show(dynamic parameter = null)
    {
        Parameter = parameter;

        await _jsRuntime.InvokeVoidAsync("BootstrapModal.ShowModal",Id);
    }

    public async Task Hide()
    {
        await _jsRuntime.InvokeVoidAsync("BootstrapModal.HideModal");
    }
}

BootstrapModalInterop.js

window.bootstrapModal = {};
window.bootstrapModal.openedModal = null;

window.bootstrapModal.ShowModal = (id) => {
    if (window.bootstrapModal.openedModal != null) {
        window.bootstrapModal.HideModal();
    }

    window.bootstrapModal.openedModal = new bootstrap.Modal(document.getElementById(id));
    window.bootstrapModal.openedModal.show();
}

window.bootstrapModal.HideModal = () => {
    if (window.bootstrapModal.openedModal == null) {
        return;
    }

    window.bootstrapModal.openedModal.hide();
    window.bootstrapModal.openedModal = null;
}

确保从您的主机文件中引用 BootstrapModalInterop.js 文件。

您现在可以从 blazor 代码本机打开和关闭模态。

示例用法：

...
<button class="btn btn-danger" @onclick="async () => await _deleteModal.Show(discountCode.Id)"><i class="fas fa-trash"></i></button>
...

<BootstrapModal @ref="_deleteModal">
    <div class="modal-header">
        <h5 class="modal-title">
            delete Discount Code
        </h5>
    </div>
    <div class="modal-body">
        <p>
            Are you sure that you want to delete this discount code? This cAnnot be undone!
        </p>
    </div>
    <div class="modal-footer">
        <button @onclick="async () => await _deleteModal.Hide()" class="btn btn-secondary">Close</button>
        <button @onclick="async () => await delete((int)_deleteModal.Parameter)" class="btn btn-outline-danger">delete</button>
    </div>
</BootstrapModal>

@code 
{
  private BootstrapModal _deleteModal;
}