Teams Tookit Blazor - Unable to use Resize event across multiple tabs

Question

I am currently trying to re-register an event I am using upon switching tabs.

The JS is:

window.resizeListener = function (dotnethelper) {
    $(window).resize(() => {
        let browserWidth = $(window).innerWidth();
        let browserHeight = $(window).innerHeight();
        dotnethelper.invokeMethodAsync('SetBrowserDimensions', browserWidth, browserHeight).then(() => {
            // success, do nothing
        }).catch(error => {
            console.log("Error during browser resize: " + error);
        });
    });
}

window.getWindowDimensions = function () {
    return {
        width: window.innerWidth,
        height: window.innerHeight
    };
};`

I created the following Class:

using Microsoft.JSInterop;

namespace DevBlazor.Data
{
    public class BrowserService
    {
        private IJSRuntime JS = null;
        public event EventHandler<GetDimensions> Resize;
        public async void Init(IJSRuntime js)
        {
            // enforce single invocation            
            if (JS == null)
            {
                this.JS = js;
                _ = await JS.InvokeAsync<string>("resizeListener", DotNetObjectReference.Create(this));
            }
        }

        [JSInvokable]
        public void SetBrowserDimensions(int jsBrowserWidth, int jsBrowserHeight)
        {
            // For simplicity, we're just using the new width
            this.Resize?.Invoke(this, new GetDimensions() { Width = jsBrowserWidth, Height = jsBrowserHeight });
        }
    }

    public class GetDimensions
    {
        public int Width { get; set; }
        public int Height { get; set; }
    }
}

added as singleton in program.cs: builder.Services.AddSingleton<BrowserService>();

Then I use it in each tab:

    private static Boolean bigWindowSize = true;

    protected void UpdatedBrowserWidth(object sender, GetDimensions getDimensions)
    {

        wd = getDimensions;
        Console.WriteLine("Width: " + wd.Width + Environment.NewLine + "Height: " + wd.Height);
        if (wd.Width >= wd.Height)
        {
            bigWindowSize = true;
            base.StateHasChanged();
        }
        else
        {
            bigWindowSize = false;
            base.StateHasChanged();
        }
    }

    async Task CreateSizeDimensions()
    {
        //just used to create an initial non-null starting value
        wd = await JsRuntime.InvokeAsync<GetDimensions>("getWindowDimensions");
        Console.WriteLine("Init Width: " + wd.Width + Environment.NewLine + "Init Height: " + wd.Height);
        if (wd.Width >= wd.Height)
            bigWindowSize = true;
        else
            bigWindowSize = false;
        Browser.Init(JsRuntime);
        Browser.Resize += UpdatedBrowserWidth;
    }

Standard Init:

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            isInTeams = await MicrosoftTeams.IsInTeams();

            if (isInTeams)
            {
                await CreateSizeDimensions();
            }

            StateHasChanged();
        }
    }

I have tried:

Adding an IDisposable
Can't find a way to make it register more globally via the TabConfig.razor file, couldn't find ways to call the variables.
Make the main variables static on Welcome.razor and use them on another tab.
Make all main variables connected to this in each tab privately static since I can't make a global page to call from.

I am just trying to make the Resize event more of a global registration somehow with the Teams Tookit Tab app.

score 0 · Answer 1 · answered Nov 14 '22 at 21:22

There were multiple problems.

JS == null was causing it to run 1 time no matter what so it would never invoke again.
After removing all statics and un-registering the event with IDisposable, no memory leaks should be left.

Issue is now resolved and loads/unloads on each tab.

Teams Tookit Blazor - Unable to use Resize event across multiple tabs

1 Answers1