Question

我尝试在blazor（服务器）中的按钮onclick事件上调用js，但出现错误：

目前无法发出JavaScript互操作调用。这是因为组件正在静态渲染。启用预渲染后，只能在OnAfterRenderAsync生命周期方法期间执行JavaScript互操作调用。

我正在使用服务器渲染模式。

<component type="typeof(App)" render-mode="Server" />

如果我使用客户端渲染模式，它将正常工作。

Answer 1

在Blazor Server应用程序进行预渲染的同时，由于尚未建立与浏览器的连接，因此无法执行某些操作（如调用JavaScript）。预渲染时，组件可能需要进行不同的渲染。有关更多信息，请参见the Detect when the app is prerendering部分。

参考：https://docs.microsoft.com/en-us/aspnet/core/blazor/lifecycle?view=aspnetcore-3.1

Answer 2

我使用的是服务器版本，在下面的示例中，我遇到了与上面相同的错误。

File .razor:
      <RadzenTabs SelectedIndex="0" Change=@(args => OnChangeRadzenTab(args))>

File.cs:
        async void OnChangeRadzenTab(int value)
        {
            switch (value)
            {
               case 0:
                   await jsRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""NameOfField"").focus()");
                   break;

但是在下面的代码中，代码运行了。为什么会有这些行为差异？

File .razor:
        <RadzenMask Mask="**/**/****" Pattern="[^0-9]" Name="EndDate" Id="EndDate"
                    @bind-Value=@EndDate  @onfocusout=@(args => OnFocusOutEndDate(args)) /> 

File.cs:
        async void OnFocusOutEndDate(FocusEventArgs? value)
        {
            if (!LibB.CheckDate(EndDate))
            {
                await jsRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""EndDate"").focus()");
                Error = true;
            }
        }

如何在任何地方的blaozr中调用js？

2 个答案: