当此剃刀组件从其他Razor组件放置在MainLayout中时，如何显示Dialog放置在剃刀组件中？

问题描述

我试图显示一个放置在logoutModal.razor中的SfDialog。此logoutModal作为组件放置在MainLayout中，我想从NavMenu中显示此对话框：

NavMenu.razor：

[CascadingParameter]
MainLayout mainLayout { get; set; }

//logout
private void OnBtnClick()
{
    this.mainLayout.ShowDialog();
}

MainLayout.razor：

@inherits LayoutComponentBase

<CascadingValue Value="this">
    <NavMenu />
</CascadingValue>

<div>
    <div class="container-fluid py-3">
        @Body
    </div>
</div>

<logoutModal />>

logoutModal.razor：

@inject NavigationManager NavigationManager
@inherits LayoutComponentBase 

<!-- logout Dialog -->
<SfDialog @ref="Dialogobj" @bind-Visible="@IsVisible" ID="defaultDialog" Width="350px" 
 Target="#formId" ShowCloseIcon="true" IsModal="true" ZIndex="300000">
<DialogEvents Created="@oncreated"></DialogEvents>
<DialogTemplates>
    <Content> Are you sure you want to sign out?</Content>
</DialogTemplates>
<DialogButtons>
    <DialogButton OnClick="@CloseDialog">
        <DialogButtonModel Content="Sign Out" IsPrimary="true"></DialogButtonModel>
    </DialogButton>
    <DialogButton OnClick="@CloseDialog">
        <DialogButtonModel Content="Cancel"></DialogButtonModel>
    </DialogButton>
</DialogButtons>

@code{
    [Inject]
    IJSRuntime JsRuntime { get; set; }
    SfDialog Dialogobj;
    private bool IsVisible { get; set; } = false;

    private void CloseDialog()
    {
        this.IsVisible = false;
    }

    public void ShowDialog()
    {
        this.Dialogobj.Show();
    }

    public void oncreated()
    {
        JsRuntime.InvokeAsync<string>("Dialog.onCreated");
    }
}

有人知道怎么做吗？

预先感谢

解决方法

您需要调用对对话框渲染页面的调用才能显示该对话框。

MainLayout.razor：

@code{ 
  //Show logout dialog
  LogoutModal logoutModal;

  public void ShowLogoutDialog()
  {
    logoutModal.ShowDialog();
  }
}

关于， 英德拉吉斯（Indrajith）