.net core Blazor中没有显示带有@ref属性的模型弹出窗口

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

下面是CofirmationBox的代码

@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();
    }

}

---

我相信模式是使用属性+Changed作为EventCallback

[Parameter] public bool ShowConfirmationBox { get; set; }

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

---

我在

创建了这段代码的简化版本，我相信模式是使用属性+Changed作为EventCallback

[Parameter] public bool ShowConfirmationBox { get; set; }

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

---

根据您使用的HTML代码，我在

创建了此代码的简化版本。 打开它不需要@ref，但需要一些JSInterop：

在_Host.html或index.hmtl中添加一个脚本标记，以加载引导js及其依赖项。Bootstrap js需要JQuery和Popper.js。 ... 在wwwroot文件夹中添加js互操作文件 bootstrapInteropt.js

window.bootstrapInteropt={ showModal:id=>{ $`${id}`.modal'show'； }, hideModal:id=>{ $`${id}`.modal'hide'； } }; 添加一个脚本标记，将此js加载到_Host.html或index.hmtl中 ... 调用js函数以显示弹出窗口 @注入IJSRuntime\jsu运行时 确认删除 &时代； 是否确实要删除该记录？ 取消 保存更改 @代码{ [参数]公共事件回调确认更改{get；set；} 公开任务表演 { 返回_jsRuntime.InvokeVoidAsyncbootstrapInteropt.showmodel，exampleModel； } 公共任务隐藏 { 返回_jsRuntime.InvokeVoidAsyncbootstrapInteropt.hideModal，exampleModel； } }

---

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

在_Host.html或index.hmtl中添加一个脚本标记，以加载引导js及其依赖项。Bootstrap js需要JQuery和Popper.js。 ... 在wwwroot文件夹中添加js互操作文件 bootstrapInteropt.js

window.bootstrapInteropt={ showModal:id=>{ $`${id}`.modal'show'； }, hideModal:id=>{ $`${id}`.modal'hide'； } }; 添加一个脚本标记，将此js加载到_Host.html或index.hmtl中 ... 调用js函数以显示弹出窗口 @注入IJSRuntime\jsu运行时 确认删除 &时代； 是否确实要删除该记录？ 取消 保存更改 @代码{ [参数]公共事件回调确认更改{get；set；} 公开任务表演 { 返回_jsRuntime.InvokeVoidAsyncbootstrapInteropt.showmodel，exampleModel； } 公共任务隐藏 { 返回_jsRuntime.InvokeVoidAsyncbootstrapInteropt.hideModal，exampleModel； } }

---

您可以使用JSInterop，答案中显示了来自mars的agua。如果您想避免JSInterop，可以尝试以下方法

 public class ConfirmModelBoxBase : ComponentBase
    {
        //[Parameter] // You don't need because you are not passing the argument with Component you are updating using Show function 
        public bool ShowConfirmationBox { get; set; }

        //[Parameter] // You don't need
        //public EventCallback<bool> ShowConfirmationBoxChanged { get; set; }


        public void Show()
        {
            ShowConfirmationBox = true;

            StateHasChanged();
        }
    } 

ConfirmDelete.razor将继承ConfirmModelBoxBase

@*ConfirmDelete.razor*@

@inherits ConfirmModelBoxBase

@if (ShowConfirmationBox)
{
    <div class="modal fade show d-block" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title">Confirm Delete</h4>
                    <button type="button" class="close" @onclick="OnCanceled">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    Are you sure want to delete the recored?
                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-danger" @onclick="OnCanceled">Cancel</button>
                    <button type="button" class="btn btn-secondary" @onclick="OnSaved">Save Changed</button>

                </div>

            </div>
        </div>
    </div>

    <div class="modal-backdrop fade show"></div>
}

@code {

    private void OnCanceled(MouseEventArgs e)
    {
        ShowConfirmationBox = false;
    }

    private void OnSaved(MouseEventArgs e)
    {
        ShowConfirmationBox = false;

        //Save changes
    }

}

剃须刀样品

<ConfirmDelete @ref="_confirm">

</ConfirmDelete>

<button @onclick="OnClicked">Click</button>

@code{
    private ConfirmModelBoxBase _confirm;

    private void OnClicked()
    {
        _confirm.Show();
    }
}

---

您可以使用JSInterop，答案中显示了来自mars的agua。如果您想避免JSInterop，可以尝试以下方法

 public class ConfirmModelBoxBase : ComponentBase
    {
        //[Parameter] // You don't need because you are not passing the argument with Component you are updating using Show function 
        public bool ShowConfirmationBox { get; set; }

        //[Parameter] // You don't need
        //public EventCallback<bool> ShowConfirmationBoxChanged { get; set; }


        public void Show()
        {
            ShowConfirmationBox = true;

            StateHasChanged();
        }
    } 

ConfirmDelete.razor将继承ConfirmModelBoxBase

@*ConfirmDelete.razor*@

@inherits ConfirmModelBoxBase

@if (ShowConfirmationBox)
{
    <div class="modal fade show d-block" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title">Confirm Delete</h4>
                    <button type="button" class="close" @onclick="OnCanceled">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    Are you sure want to delete the recored?
                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-danger" @onclick="OnCanceled">Cancel</button>
                    <button type="button" class="btn btn-secondary" @onclick="OnSaved">Save Changed</button>

                </div>

            </div>
        </div>
    </div>

    <div class="modal-backdrop fade show"></div>
}

@code {

    private void OnCanceled(MouseEventArgs e)
    {
        ShowConfirmationBox = false;
    }

    private void OnSaved(MouseEventArgs e)
    {
        ShowConfirmationBox = false;

        //Save changes
    }

}

剃须刀样品

<ConfirmDelete @ref="_confirm">

</ConfirmDelete>

<button @onclick="OnClicked">Click</button>

@code{
    private ConfirmModelBoxBase _confirm;

    private void OnClicked()
    {
        _confirm.Show();
    }
}

---

您的Razor组件名称与代码库文件（即ConfirmModelBoxBase）相同还是ConfirmModelBox相同？我的Razor页面名称是ConfirmModelBox.Razor，基类名称是ConfirmModelBoxBase.Razor。各位，我发现了问题并解决了它。问题是我在第页注册的组件名。更改为。您的Razor组件名称是否与代码库文件相同，即ConfirmModelBoxBase还是ConfirmModelBox？我的Razor页面名称为ConfirmModelBox.Razor，基类名称为ConfirmModelBoxBase.razorHi各位，我发现了问题并解决了它。问题是我在第页注册的组件名。更改为。是，您的模型弹出窗口未关闭或取消？在“是”处创建了一个带有隐藏功能的新小提琴，该隐藏功能遵循您的“显示功能”模式；在“是”，您的模型弹出窗口未关闭或取消？在“确定”处创建了一个带有隐藏功能的新小提琴，该隐藏功能遵循您的“显示功能”模式。我将如何从模型弹出窗口获取确认数据到类中。打开另一个问题，它与此无关one@ArunSingh基本上就像一个经典的Blazor组件，使用数据绑定、事件回调和/或服务注入。@ArunSingh示例：OK。我将如何从模型弹出窗口获取确认数据到类中。打开另一个问题，它与此无关one@ArunSingh基本上与经典Blazor组件类似，使用数据绑定、事件回调和/或服务注入。@ArunSingh示例如下：