当此 razor 组件从其他 Razor 组件放置在 MainLayout 中时，如何显示放置在 razor 组件中的对话框？

Question

我正在尝试显示位于 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");
    }
}

有人知道怎么做吗？

提前致谢

Answer 1

您需要调用对话框渲染页面来显示对话框。

MainLayout.razor:

@code{ 
  //Show logout dialog
  LogoutModal logoutModal;

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

此致，英德拉吉斯

当此 razor 组件从其他 Razor 组件放置在 MainLayout 中时，如何显示放置在 razor 组件中的对话框？

How to show Dialog placed in razor component when this razor component is placed in MainLayout from other Razor component?

.net

c#

syncfusion

razor

blazor