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

当刷新或手动导航到使用javascript互操作的Blazor页面时，会出错，因为javascript中不再存在dispose函数

当组件实现IDisposable时，是否有一种方法可以在其刷新或导航时不运行“dispose”？“ElementReference”类型是否有帮助

下面是一些上下文代码：

My blazor组件实现IDisposable:

@implements IDisposable

这将运行my Dispose函数，该函数调用我的互操作文件：

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

my JsInterop对javascript运行以下调用：

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

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

当我通过浏览器刷新或导航到此页面时，会出现此错误

System.NullReferenceException:“对象引用未设置为对象的实例。”MyNameSpace.Components.JqxWindowComponent.JqxWindowJsInterop.get返回null

---

非常感谢您的帮助。

我通过添加渲染检查属性解决了这个问题

private bool firstRenderComplete;

我把它放在这里：

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

        await DayPilotJsInterop.Initialize();
    }
}

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

}

最后在这里进行测试：

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

        await DayPilotJsInterop.Initialize();
    }
}

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

}

---

我可以通过添加渲染检查属性来解决这个问题

private bool firstRenderComplete;

我把它放在这里：

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

        await DayPilotJsInterop.Initialize();
    }
}

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

}

最后在这里进行测试：

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

        await DayPilotJsInterop.Initialize();
    }
}

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

}

---

实例ID是什么？你在日志文件中看到了吗？你检查日志文件了吗？我给我的JavaScript组件分配了一个生成的guid，作为instanceId传递。你删除instanceId了吗？在运行JaveScript之前删除实例可能会导致异常。dispose会删除该实例。它在使用Blazor站点导航时正确运行，在使用浏览器URL手动导航时崩溃。您可能有时间问题，幸运的是，它在运行时没有崩溃。该id可能会被过早删除，只有当您慢慢执行时才会看到问题。instanceId是什么？你在日志文件中看到了吗？你检查日志文件了吗？我给我的JavaScript组件分配了一个生成的guid，作为instanceId传递。你删除instanceId了吗？在运行JaveScript之前删除实例可能会导致异常。dispose会删除该实例。它在使用Blazor站点导航时正确运行，在使用浏览器URL手动导航时崩溃。您可能有时间问题，幸运的是，它在运行时没有崩溃。该id可能会被过早删除，只有当您缓慢执行时，您才会看到问题。