如何在任何地方在 blazor 中调用 js？答案

【问题标题】：How to invoke js in blazor anywhere?如何在任何地方在 blazor 中调用 js？
【发布时间】：2020-09-27 00:47:01
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： blazor blazor-server-side

【解决方案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

【讨论】：

那么这与“render-mode”值无关？

【解决方案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;
            }
        }

【讨论】：