(Blazor) LiquidTechnologies ModalDialog 에서 Back Button 클릭시 Popup 사라지도록 처리하기

LiquidTechnologies.Blazor.ModalDialog 패키지를 이요하여 지난 포스팅에서  ModalDialog 처리하는 방법을 알아봤었습니다.

2023.01.03 - [C#/Blazor] - [Blazor] PopUp 메세지 처리하기 - 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 창의 갯수를 나타냅니다.

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

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

GitHub - kei-soft/Blazor.AppTest