C# Blazor Refresh 이벤트 처리하기

Blazor Refresh 이벤트 처리하기

 

Blazor 에서 F5 버튼이나 Refresh 버튼을 누른 경우 이벤트를 받아 처리하는 방법입니다.

'blazor-boforeunload' Nuget 패키지를 설치하고

Program.cs 에 아래 코드를 추가합니다.

builder.Services.AddBeforeUnload();

wwwroot 의 index.html 에 아래 스크립트를 추가합니다.

<script src="_content/BlazorBeforeUnload/BeforeUnload.js"></script>

화면에서는 아래 처럼 BeforeUnloadHandler 이벤트를 이용하여 Refresh 이벤트를 받아서 처리할수 있으며

메세지를 표시할수 있어 계속 ReLoad 하지 않고 머무를지 여부를 물어보고 선택에따른 처리가 가능합니다.

@page "/"

@using blazejewicz.Blazor.BeforeUnload
@using System
@implements IDisposable
@inject BeforeUnload BeforeUnload

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

@code
{
    protected override void OnInitialized()
    {
        BeforeUnload.BeforeUnloadHandler += BeforeUnloadHandler;
    }

    public void Dispose()
    {
        BeforeUnload.BeforeUnloadHandler -= BeforeUnloadHandler;
    }

    void BeforeUnloadHandler(object? sender, BeforeUnloadArgs args)
    {
        args.CancelRequested = true;
        args.ReturnValue = "Please save your data";
    }
}

회원가입을 하게되는 경우 만약 사용자가 잘못하여 Refresh 를 하게되면 입력된 값이 없어지게되는데

이를 방지할때 유용하게 사용됩니다.

아래과 같은 알림 창이 뜨게됩니다.

 

 

참고

https://github.com/peterblazejewicz/blazor-beforeunload

GitHub - peterblazejewicz/blazor-beforeunload: Blazor hook into native Window beforeunload with async/await and cancel support