blazor 服务器端的 Javascript 互操作处理问题

Question

When ever refresh or manually navigate to a Blazor page that is using javascript interop, it errors out because the dispose function no longer exists in javascript.

Is there a way to not run "dispose" on a component that implements IDisposable when its a refresh or a navigation? Is there where the "ElementReference" type would help?

Here's some code for context:

My blazor component implements IDisposable:

@implements IDisposable

this runs my Dispose function, which calls on my interop file:

public void Dispose()
{
    JqxWindowJsInterop.Dispose();
}

my JsInterop runs this call to javascript:

public void Dispose()
    {
        jsRuntime.InvokeAsync<string>(
            "jqxWindowComponent.dispose",
            InstanceId);
        _JqxWindowJsInteropReference?.Dispose();
    }

which finally runs this in javascript:

window.jqxWindowComponent = {
dispose: function (instanceId) {
    console.log('jqxWindowComponent.dispose : ' + instanceId);
    if ($('#' + instanceId).length) {
        $('#' + instanceId).jqxWindow('destroy');
    }
    delete jqxWindowList[instanceId];       
}};

when I refresh or navigate to/from to this page through the browser I get this error

System.NullReferenceException: 'Object reference not set to an instance of an object.'MyNameSpace.Components.JqxWindowComponent.JqxWindowJsInterop.get returned null.

Any help appreciated.

Answer 1

I was able to solve this by adding a render check property.

private bool firstRenderComplete;

I set it here:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        firstRenderComplete = true;
        DayPilotJsInterop = new DayPilotJsInterop(JavascriptRunTime, InstanceId);

        await DayPilotJsInterop.Initialize();
    }
}

and finally test it here:

public void Dispose()
{
    if(firstRenderComplete == true)
    {
        DayPilotJsInterop.Dispose();
    }

}