Блог

Я пытаюсь показать SfDialog, который помещен в LogoutModal.razor . Этот 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");
    }
}
  

У кого-нибудь есть идея, как это сделать?

Заранее спасибо

Вам нужно вызвать вызов отображаемой страницы dialog, чтобы отобразить диалоговое окно.

mainLayout.razor:

 @code{ 
  //Show logout dialog
  LogoutModal logoutModal;

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

С уважением,
Индраджит