C# Blazor LiquidTechnologies ModalDialog 에서 Back Button 클릭 시 Popup 닫기

C# Blazor LiquidTechnologies ModalDialog 에서 Back Button 클릭 시 Popup 닫기

 

지난 포스팅에서 LiquidTechnologies.Blazor.ModalDialog 패키지를 이용해

ModalDialog 처리하는 방법을 알아봤었습니다.

2024.04.22 - [코딩/Blazor] - C# Blazor Dialog 처리하기 (LiquidTechnologies.Blazor.ModalDialog)

그런데 브라우저의 Back Button 버튼 클릭시 띄워진 ModalDialog 창이 사라지지 않는 증상이 발생되었습니다.

아래 그림을 보면 알수 있듯이 팝업이 띄워진 상태에서 뒤로가기 버튼을 클릭했을 때 팝업이 사라지지 않고

계속 떠 있습니다.

이를 처리하는 방법은 App.razor 에서 NavigationManager 의 LocationChanged Event 에서 Model 을 닫아주도록 처리하면 됩니다.

@implements IDisposable
@inject NavigationManager NavigationManager
@inject IModalDialogService ModalDialog

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>


@code {
    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += LocationChanged;
        base.OnInitialized();
    }

    void LocationChanged(object? sender, LocationChangedEventArgs e)
    {
        if (ModalDialog.ModalDialogFrames.Count() > 0)
        {
            ModalDialog.Close(false);
        }
    }

    void IDisposable.Dispose()
    {
        NavigationManager.LocationChanged -= LocationChanged;
    }
}

ModalDialog.ModalDialogFrames.Count() 는 현재 띄워진 ModalDialog 창의 갯수를 나타냅니다.

창의 갯수를 확인해 ModalDialog 가 띄워져 있다면 닫도록 처리합니다.

 

결과
BackButton 클릭시 띄워져있던 팝업창이 사라지는걸 확인 할수 있습니다.

[Source]
https://github.com/kei-soft/Blazor.AppTest/blob/master/LiquidTest/App.razor

GitHub - kei-soft/Blazor.AppTest