Bootstrap 使用 Blazor 的模态弹出窗口 Asp.Net 核心

Question

我正在使用 asp.net 核心 6.0 开发 blazor 我在打开 bootstrap 弹出模式时遇到问题。当我单击模态按钮时，它不会显示任何模态弹出窗口。还要检查检查元素，没有模态 html 的迹象。我在布局上添加了 bootstrap css。附上参考资料Url。

这是我的实现

页

<BlazorTaskItems.Pages.Modal @ref="modal"></BlazorTaskItems.Pages.Modal>
<button class="btn btn-primary" @onclick="() => modal.Open()">Modal!</button>

@code {

private BlazorTaskItems.Pages.Modal modal { get; set; }

}

组件

<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @Body
            </div>
            <div class="modal-footer">
                @Footer
            </div>
        </div>
    </div>
</div>

@if (showBackdrop)
{
        <div class="modal-backdrop fade show"></div>
}

@code {

    [Parameter]
    public RenderFragment? Title { get; set; }

    [Parameter]
    public RenderFragment? Body { get; set; }

    [Parameter]
    public RenderFragment? Footer { get; set; }

    public Guid Guid = Guid.NewGuid();

    private string modalDisplay = "none;";
    private string modalClass = "";
    private bool showBackdrop = false;

    public void Open()
    {
        modalDisplay = "block;";
        modalClass = "show";
        showBackdrop = true;
    }

    public void Close()
    {
        modalDisplay = "none";
        modalClass = "";
        showBackdrop = false;
    }
}

Answer 1

您需要调用 StateHasChanged();（恰好在您的链接代码中...）

public void Open()
{
    modalDisplay = "block;";
    modalClass = "show";
    showBackdrop = true;
    StateHasChanged();
}

确保也在 Close() 方法中执行此操作。

Bootstrap 使用 Blazor 的模态弹出窗口 Asp.Net 核心

Bootstrap Modal Popup using Blazor Asp.Net Core

asp.net-core

blazor