使用 IJSRuntime 在 blazor 中包裝引導模式

Question

是否可以通過 IJSRuntime 獲取對 Bootstrap 5 bootstrap.Modal的引用並保存對該實例的引用以供以后使用？

例子：

我可以用這種方法顯示一個模態：

await _jsRuntime.InvokeVoidAsync("eval", $"new bootstrap.Modal(document.getElementById('myId')).show()");

但我不能以同樣的方式隱藏它，因為我需要存儲對new bootstrap.Modal創建的引用。 我怎樣才能動態地做到這一點（我有一個引導模式組件）而不必編寫 javascript？ 有什么方法可以保存變量並稍后通過 IJSRuntime 引用它們？

Answer 1

經過大量搜索，我發現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;
}

確保從 hosts 文件中引用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;
}

參數屬性是可選的，但我用它來解析我想用它刪除的項目的 ID。 稍后我可以使用(int)_deleteModal.Parameter獲取此 ID。 我選擇了一個dynamic類型，所以我可以解析任何東西。