Code Monkey home page Code Monkey logo

blazor-beforeunload's Introduction

blazor-beforeunload

Blazor hook into native Window beforeunload with async/await and cancel support

Example usage

In your startup configuration configure DI:

public void ConfigureServices(IServiceCollection services)
{
    services.AddBeforeUnload();
}

In your client pages use the instance via dependency injection:

@page "/counter"

@using blazejewicz.Blazor.BeforeUnload
@using System
@implements IDisposable
@inject BeforeUnload BeforeUnload
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";
}

Author

@peterblazejewicz

blazor-beforeunload's People

Contributors

peterblazejewicz avatar zac-at-incycle avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

blazor-beforeunload's Issues

This does not work - am I using it wrong?

I was hoping to use your component to catch when the browser window is closed so that I can clear some values in local storage in my web assembly project.
I initialise thus:

builder.Services.AddBeforeUnload();

Then in index.razor I do the following:

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

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

    public void BeforeUnloadHandler(object? sender, BeforeUnloadArgs args)
    {
        LocalStorage.RemoveItemAsync( "KeyName" );        
    }
}

If I set a breakpoint on all three methods, I get a breakpoint on OnInitialized when my application starts but don't get a breakpoint on Dispose nor BeforeUnloadHandler when the browser is closed.

Am I missing something?

Andy

Not working--what more is needed?

Hmm, it's not working for me. I added it in my client's Paogram.cs, and inject, just as the example. After I implement and attach a function to beforeUnload.BeforeUnloadHandler, shouldn't (in my browser console) window.beforeunload have a value? It does not for me.

This does not work in iOs

Hi, this nugget works perfectly for any browser in windows but I can't make it work on iPad.

Is there any workaround or any hint to get it to work in iOs?

Thanks!

Any plans to make it Blazor Server-Side compatible?

This is exactly what I need (I have no idea why the Blazor folk didn't include it!), but as client-side Blazor isn't released yet we can't use it for production apps -- we're doing everything server-side. Any thought to making this SSB-friendly?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.