c# - MudBlazor Dialog Closes Automatically After a Few Seconds in MainLayout - Stack Overflow

admin管理员组

文章数量:1291643

I'm using Azure AD Authentication in my Blazor WebAssembly application, and I have configured App.razor like this:

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <Authorizing>
                <MudPaper Class="pa-6 text-center">
                    <MudProgressCircular Indeterminate="true" Color="Color.Primary" Size="Size.Large" Class="mb-4" />
                    <MudText Typo="Typo.h6">@Localizer["Please wait, we are authorizing you..."]</MudText>
                </MudPaper>
            </Authorizing>
            <NotAuthorized>
               <NotAuthorized/>
            </NotAuthorized>
        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

I have MainLayout as the default layout. Here is its structure:

@inherits LayoutComponentBase
<MudRTLProvider RightToLeft="@LayoutService.IsRTL">
    <MudPopoverProvider />
    <MudDialogProvider />
    <MudSnackbarProvider />
    <MudLayout>
        <AuthorizeView>
            <Authorized>
                ...
            </Authorized>
            <NotAuthorized>
                <MudAlert Severity="Severity.Info" Class="mt-8 mud-width-full" Style="max-width:500px;">
                    Authentication is required, click <MudLink Href="authentication/login">sign in</MudLink>
                </MudAlert>
            </NotAuthorized>
        </AuthorizeView>
    </MudLayout>
</MudRTLProvider>

Once the user is authenticated, I need to check their profile data and, based on that, show a MudBlazor dialog.

So, I implemented the logic in OnAfterRenderAsync:

[CascadingParameter] private Task<AuthenticationState> AuthState { get; set; } = default!;
private IDialogReference? _dialogRef;
private bool _dialogOpened;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    {
        // At this point, the user might not be authenticated yet since MainLayout is the default layout
        await DoUiThings();
        StateHasChanged();
    }

    var user = (await AuthState).User;
    if (user.Identity is { IsAuthenticated: true } && !_dialogOpened) // Open dialog only if the user is authenticated and the dialog hasn't been opened yet
    {
        await ShowDialogIfAuthenticatedAsync();
    }
}

private async Task ShowDialogIfAuthenticatedAsync()
{
    _dialogRef = await DialogService.ShowAsync<GenericDialog>("Fake Title", parameters, dialogOptions);
    _dialogOpened = true;
    var resultDialog = await _dialogRef.Result;

    if (resultDialog != null && !resultDialog.Canceled)
    {
        Console.WriteLine("LOG: Dialog closed with OK");
    }
    else
    {
        Console.WriteLine("LOG: Dialog canceled");
    }
}

The issue:

• The ShowDialogIfAuthenticatedAsync method is executed correctly.
• The dialog appears as expected.
• However, after a few seconds, it closes automatically, and I don't understand why. I need to open the dialog inside MainLayout because, based on the user's selection inside the dialog, they will be redirected to another page.

How can I keep the dialog open inside MainLayout without it being closed automatically?

I'm using Azure AD Authentication in my Blazor WebAssembly application, and I have configured App.razor like this:

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <Authorizing>
                <MudPaper Class="pa-6 text-center">
                    <MudProgressCircular Indeterminate="true" Color="Color.Primary" Size="Size.Large" Class="mb-4" />
                    <MudText Typo="Typo.h6">@Localizer["Please wait, we are authorizing you..."]</MudText>
                </MudPaper>
            </Authorizing>
            <NotAuthorized>
               <NotAuthorized/>
            </NotAuthorized>
        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

I have MainLayout as the default layout. Here is its structure:

@inherits LayoutComponentBase
<MudRTLProvider RightToLeft="@LayoutService.IsRTL">
    <MudPopoverProvider />
    <MudDialogProvider />
    <MudSnackbarProvider />
    <MudLayout>
        <AuthorizeView>
            <Authorized>
                ...
            </Authorized>
            <NotAuthorized>
                <MudAlert Severity="Severity.Info" Class="mt-8 mud-width-full" Style="max-width:500px;">
                    Authentication is required, click <MudLink Href="authentication/login">sign in</MudLink>
                </MudAlert>
            </NotAuthorized>
        </AuthorizeView>
    </MudLayout>
</MudRTLProvider>

Once the user is authenticated, I need to check their profile data and, based on that, show a MudBlazor dialog.

So, I implemented the logic in OnAfterRenderAsync:

[CascadingParameter] private Task<AuthenticationState> AuthState { get; set; } = default!;
private IDialogReference? _dialogRef;
private bool _dialogOpened;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    {
        // At this point, the user might not be authenticated yet since MainLayout is the default layout
        await DoUiThings();
        StateHasChanged();
    }

    var user = (await AuthState).User;
    if (user.Identity is { IsAuthenticated: true } && !_dialogOpened) // Open dialog only if the user is authenticated and the dialog hasn't been opened yet
    {
        await ShowDialogIfAuthenticatedAsync();
    }
}

private async Task ShowDialogIfAuthenticatedAsync()
{
    _dialogRef = await DialogService.ShowAsync<GenericDialog>("Fake Title", parameters, dialogOptions);
    _dialogOpened = true;
    var resultDialog = await _dialogRef.Result;

    if (resultDialog != null && !resultDialog.Canceled)
    {
        Console.WriteLine("LOG: Dialog closed with OK");
    }
    else
    {
        Console.WriteLine("LOG: Dialog canceled");
    }
}

The issue:

• The ShowDialogIfAuthenticatedAsync method is executed correctly.
• The dialog appears as expected.
• However, after a few seconds, it closes automatically, and I don't understand why. I need to open the dialog inside MainLayout because, based on the user's selection inside the dialog, they will be redirected to another page.

How can I keep the dialog open inside MainLayout without it being closed automatically?

• c#
• blazor
• blazor-webassembly
• mudblazor

Share Improve this question Follow asked Feb 13 at 14:12 micexmicex 5311 silver badge1212 bronze badges 1

• It may be closing due to pre rendering. Put a breakpoint at var user= (await AuthState).User; inside OnAfterRenderAsync and see if the conditions are being met to reopen the dialog after it gets done with pre rendering. Your _dialogOpened bool is initialized to false, then set to true at pre render and never set back again for the final render so it's probably still true. – GH DevOps Commented Feb 13 at 17:41

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Where you implement the MudDialogProvider (should be done in MainLayout) have you tried doing it like this <MudDialogProvider BackdropClick="false" />

本文标签： cMudBlazor Dialog Closes Automatically After a Few Seconds in MainLayoutStack Overflow