时间戳

首页 > 解决方案 > 具有@ref 属性的 Blazor 中未显示模型弹出窗口

.net-core - 具有@ref 属性的 Blazor 中未显示模型弹出窗口

问题描述

我为模型弹出窗口创建了一个共享组件，并在注册组件时使用了@ref 属性。我没有收到任何错误，但我的模型弹出窗口没有显示。

在确认框的代码下方 

@inherits ConfirmModelBoxBase

@if (ShowConfirmationBox)
{

<div class="modal fade show d-block" id="exampleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure want to delete the record?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

}


 public class ConfirmModelBoxBase : ComponentBase
{
    [Parameter] public bool ShowConfirmationBox { get; set; }

    [Parameter] public EventCallback<bool> CoonfirmationChanged { get; set; }

    public void Show()
    {
        ShowConfirmationBox = true;
        StateHasChanged();
    }

}

在我的员工列表页面上注册组件

 <ConfirmModelBoxBase @ref="DeleteConfirmation">

 </ConfirmModelBoxBase>

服务器端调用以显示弹出窗口

[Parameter] public ConfirmModelBoxBase DeleteConfirmation { get; set; }

protected void btnDelete_Click()
    {
        DeleteConfirmation.Show();
 }

标签： .net-coreblazorblazor-server-side

解决方案

根据您的 HTML 代码，您使用bootstrap modal。
您不需要@ref 来打开它，但需要一些 JSInterop：

  1. 在_Host.html或index.hmtl中添加脚本标签以加载引导 js 及其依赖项。Bootstrap js 需要 JQuery 和 Popper.js。
<head>
...
    <script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
  1. 在您的 wwwroot 文件夹中添加一个 js 互操作文件

bootstrapInteropt.js

window.bootstrapInteropt = {
    showModal: id => {
        $(`#${id}`).modal('show');
    },
    hideModal: id => {
        $(`#${id}`).modal('hide');
    }
};
  1. 添加脚本标签以在您的_Host.html或index.hmtl中加载此 js
<body>
    <app>
    </app>
    <script src="bootstrapInteropt.js"></script>
...
</body>
  1. 调用js函数显示弹窗
@inject IJSRuntime _jsRuntime

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" data-backdrop="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure want to delete the record?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
@code {
    [Parameter] public EventCallback<bool> CoonfirmationChanged { get; set; }

    public Task Show()
    {
        return _jsRuntime.InvokeVoidAsync("bootstrapInteropt.showModal", "exampleModal");
    }

    public Task Hide()
    {
        return _jsRuntime.InvokeVoidAsync("bootstrapInteropt.hideModal", "exampleModal");
    }
}

推荐阅读