为什么Blazor应用程序在任何页面重新加载时均显示错误 [英] Why Blazor app showing an error with any page reload

问题描述

我正在使用Blazor技术进行项目.有时我需要使用一些JS代码，并且我需要在每个页面中包含不同的js文件，并且据我所知，唯一的方法是使用JS函数和Blazor JS调用将其添加.所以我所做的是:在_Host.razor

I am working on project with Blazor technology. I need sometimes to use some JS code, and I need to include diffirant js files with each page, and as I know the only way to do it is adding it using JS function and Blazor JS invoke. So what I did is: in _Host.razor

function addScriptFile(fileName){
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", file);
    document.getElementById(divName).appendChild(script);
}

然后在每个页面(组件)中

Then in each page (component):

@inject IJSRuntime Js;
@functions{
    protected override async void OnAfterRender()
    {
        await Js.InvokeAsync<object>("addScriptFile","~/js/myFile.js");
    }
}

它工作正常，但是如果重新加载页面会发生问题.引发错误System.InvalidOperationException:当前无法发出JavaScript互操作调用.这是因为组件正在预渲染，并且页面尚未加载到浏览器中，或者因为电路当前已断开连接.组件必须将所有JavaScript互操作调用包装在条件逻辑中，以确保在预渲染期间或在客户端断开连接时不会尝试进行这些互操作调用.

从此错误中我了解到的是，我试图在渲染完成之前调用一些javascript代码.因此，我已经使用IComponentContext来确保服务器已连接.在解决此问题的过程中，我创建了一个没有任何JS文件的新Blazor项目，但在重新加载页面时会抛出相同的错误

What I understand from this error, that I am trying to invoke some javascript code before render completed. So I have used IComponentContext to make sure that the server is connected. In my journey to fixing this issue, I have created a new Blazor project without any JS files, but it throws the same error on reloading page

我试图做到这一点:

@inject IComponentContext ComponentContext
@functions{
    protected override void OnAfterRender()
    {
        if(ComponentContext.IsConnected)
        {
            //adding scripts
        }
    }
}

如何使JS以合适的方式与Blazor一起使用?以及如何解决该错误?

How to make JS working with Blazor in suitable way ? And how to fix that error ?

推荐答案

在您的代码示例中，有两个问题.

In your code sample, there are a couple of issues.

@inject IJSRuntime Js;

@functions {
    protected override async void OnAfterRender()
    {
        await Js.InvokeAsync<object>("addScriptFile","~/js/myFile.js");
    }
}

首先，您应该使用 code 而不是 functions . Code 特定于Blazor组件， functions 用于Razor Pages和MVC.

Firstly, you should use code not functions. Code is specific to Blazor components, functions is used for Razor Pages and MVC.

第二，永远不要在Blazor中使用 async void ，该规则的例外是在事件处理程序中运行异步代码.有关更多信息，请参见本文.

Secondly, never use async void in Blazor, the exception to the rule would be to run async code in an event handler. See this article for more info.

第三，在脚本位置的开头有〜字符.该角色不适用于Blazor(我认为还是毫无意义的)，仅适用于MVC和Razor Pages.如果要从应用程序的根目录加载脚本，则只需使用/，如果要从相对位置加载脚本，则不要在该位置添加前缀.

Thirdly, you have the ~ character at the start of your script location. This character doesn’t work with Blazor (and is pretty pointless anyway in my opinion), it’s only valid with MVC and Razor Pages. If you want to load a script from the root of your application then just use a /, if you want to load it from a relative location then don’t prefix the location with anything.

话虽如此，我认为您的代码应如下所示.

So with all that said, I think your code should look like this.

@inject IJSRuntime Js;
@inject IComponentContext ComponentContext

@code {
    protected override async Task OnAfterRenderAsync()
    {
        if (!ComponentContext.IsConnected)
        {
            return;
        }

        await Js.InvokeAsync<object>("addScriptFile","/js/myFile.js");
    }
}

这篇关于为什么Blazor应用程序在任何页面重新加载时均显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！