Blazor应用调用JS函数触发InvalidOperationException错误求助

你好！遇到这种恢复了之前的配置但仍报错的情况，大概率是缓存或者JS加载环节出了问题，我给你梳理几个实用的排查方向：

• 强制清除浏览器缓存
  Blazor和浏览器经常会缓存静态资源（比如你的Paginate.js），哪怕你恢复了代码，旧的缓存文件可能还在生效。你可以按Ctrl+Shift+R（Windows/Linux）或者Cmd+Shift+R（Mac）强制刷新页面，彻底清除缓存后再测试。

• 确认JS文件的引用路径与时机
  你提到在App.razor里引用了JS文件，要确保路径是正确的：如果文件在wwwroot/JS/Paginate.js，引用代码应该是：

  <script src="JS/Paginate.js"></script>
  

  路径开头不要加斜杠，Blazor的静态资源路径默认相对wwwroot。另外建议把这个引用放在App.razor的底部，确保DOM加载完成后再加载JS，避免函数还未定义就被调用。

• 验证JS函数是否全局可访问
  Blazor的JSRuntime只能调用挂载在全局对象（比如window）上的函数，所以你的pagination函数要这样写：

  window.pagination = function() {
      // 你的函数逻辑代码
  }
  

  要是之前没把函数挂到window上，哪怕恢复代码，旧缓存里的错误代码可能还在生效，强制刷新后就能验证新代码是否正确。

• 检查OnAfterRenderAsync的语法正确性
  你贴的代码存在语法错误，正确的写法应该是：

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      await JSRuntime.InvokeVoidAsync("pagination");
      await base.OnAfterRenderAsync(firstRender);
  }
  

  如果只需要在页面第一次渲染时调用函数，还可以加上firstRender判断，避免重复执行：

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if (firstRender)
      {
          await JSRuntime.InvokeVoidAsync("pagination");
      }
      await base.OnAfterRenderAsync(firstRender);
  }
  

• 清理项目编译缓存
  有时候项目的编译缓存也会导致异常，你可以试试：

  • 右键项目选择「清理」
  • 再选择「重新生成」
  • 重启开发服务器（比如IIS Express或dotnet run）

如果以上步骤都试过还是不行，可以把Paginate.js的完整代码和App.razor里的引用代码贴出来，这样能更精准地定位问题~

备注：内容来源于stack exchange，提问作者Brian