问题标签 [blazor-jsinterop]

我想要一个仅在 blazor 服务器端运行一些 javascript 代码的函数。

例如

检查 blazor 是否在服务器端运行的正确方法是什么？

我的服务器端 Blazor 应用程序多次调用应该移动 div 的 javascript 函数（使用 setInterval）。问题是该函数不等待上一次调用完成。结果，DOM同时从不同的js互操作中改变，导致不可预知的结果。我原以为电话会被堆积起来并一个接一个地运行。你知道我该如何解决这个问题吗？非常感谢！

我将捆绑的脚本文件保存在 blazor_wasm 应用程序的 wwwroot 文件夹中。

1. 我在 index.html 中使用脚本标签添加了文件

2. 我已将 scripts.bundle.js 代码放入函数 callJS

   function callJS() {/** bundled js**/}

3. 我在剃须刀页面中使用 js interops 调用了该函数，但这给出了错误

   /li>

这些是错误

异步方法的返回类型必须是 void、Task、Task、类似
任务的类型、IAsyncEnumerable 或 IAsyncEnumerator wasm_app

'Index.OnAfterRenderAsync(bool)'：返回类型必须是 'Task' 以匹配被覆盖的成员 'ComponentBase.OnAfterRenderAsync(bool)' wasm_app

这是运行文件的正确方法还是我必须使用另一个生命周期事件？我正在使用敏锐的引导主题，它使用 webpack 生成捆绑的 js 和 css 文件。

我正在使用最新的Blazor WebAssembly 3.2.0 候选版本

从 vanilla Blazor WASM 模板中，我进行了以下调整以测试/调试问题：

在Program.cs中，我添加了以下将注入所有页面的单例：

该类看起来像：

并与JSRuntime一起注入到_Imports.razor中，因此它们可用于所有页面：

为了测试 ApplicationState 对象是否正确地通过了应用程序，我在以下 2 个位置使用了它：

在NavManu.razor中，我将其中一个菜单项包裹在BoolValue周围以显示/隐藏该项目：

在Index.razor中，我在默认的 Hello World 标头下添加了一个 H2 标记以显示StringValue

我还有一个位于wwwroot/js/extenstions.js的 javascript 文件，它有一个用于获取 cookie 数据的函数：

并且作为脚本包含在_framework/blazor.webassembly.js脚本下方的wwwroot/index.html中：

在App.razor我有以下@code块：

一切都按预期工作，菜单项以及 H2 标记中的字符串值都是可见的。

但是，如果我通过 JSRuntime 添加对我的 Javasript 函数的调用，如下所示：

javascript运行，AppState值被更新（我添加了一个控制台日志来测试这个）但是导航没有更新以显示菜单项并且H2标签没有显示新的字符串值......

如果您导航到菜单中的页面，状态将更新，但如果您进行硬刷新，则不会再次更新......

我尝试添加StateHasChanged()调用，但这不起作用：

由于导航后状态似乎更新了，我也尝试强制导航事件，也无济于事：

我正在继续尝试其他一些事情，但似乎没有任何效果。在我的理解中， StateHasChanged()确实应该是解决此类问题的方法。还有什么我应该尝试的吗？

更新

正如 enet 指出的那样，当状态发生变化时，我需要通知下游组件。引起问题的不是 JSRuntime，而是它在 App.razor 中创建的延迟导致对象状态在硬刷新时似乎有所不同。在第一个场景中，对象在其他组件开始渲染之前更新，因此它们使用已经更新的状态。但是一旦出现任何类型的延迟（例如调用 JSRuntime），他们就需要通知来更新他们的状态，因为他们有机会在延迟之前使用旧状态进行渲染。我用几毫秒的 Task.Delay() 替换了 JSRuntime 调用，这导致了同样的问题！向事件添加触发器解决了这个问题。

语境

我试图了解 JsInterop javascript 端的实现方式和位置。

在我的 Blazor Server 项目中给出以下示例代码：

及其对应的javascript：

（我确实了解SignalR 基础设施及其对电路概念的使用，我确实了解电路用于 Blazor 服务器项目中的两种客户端服务器通信。）

问题

该项目使用的唯一客户端脚本是：<script src="_framework/blazor.server.js"></script>据了解，所有 javascript 执行调度功能都应该在那里。我认为从服务器端完成 javascript 调用的唯一方法是一些 javascript eval() 功能。我试图找到源代码 _framework/blazor.server.js，我想它在 github 中，因为它在 /dist 文件夹中的构建输出包含文件 blazor.server.js

我试图在打字稿源中找到这部分（执行名称来自服务器的javascript函数），但没有成功。谁能指出我正确的方向？我是在找错地方了，还是没有 eval()？

*** 编辑：与此同时，我了解到不仅 eval() 在这里播放，实际上它是最后的机会，还有 the window["functionName"](arguments);too 及其变体。仍在寻找相关的源代码行...

需要一些帮助排序错误添加了代码截图和代码返回的错误。尝试从 Jquery 调用 C# 函数并传递参数。

_主持人

MainMap.cshtml

代码

[错误]

在 Blazor 组件中，我想从锚标记的 HTML onclick 事件中调用 JS 方法，因此：

我的JS方法是：

在 JS 方法中，我想触发一个 C# 静态方法来触发事件，因此：

我无法通过 JS 方法找到 C# 方法。我已经为第一个参数尝试了多种名称配置，例如

仅举几例。我还尝试通过第二个参数改组名称。

这应该如何工作？我错过了什么？

PS请忽略静态方法中有关实例属性的位。我有一个解决方法，但不想弄乱帖子。

我正在使用两个库，它们使用 JS 互操作并且相互依赖才能完成。一个是用于主题的 BlazoredStyled，另一个是图形显示。

由于两个 JS 都有延迟，我遇到了图形未准备好或主题未设置的情况。我尝试的另一种方法是在加载后设置主题

由于 blazor 组件的生命周期独立于另一个组件，如何正确设置？

鉴于

我有一个 onscroll 或 mousemove javascript 事件处理程序，它调用服务器上的 C# 方法：

然后

服务器上是否保证 C# 方法调用的顺序？

例如以下javascript：

和 C#

一个类似的问题是反过来，从 DotNet 调用 JS。

我有一个 Blazor WebAssembly 应用程序从计算机网络摄像头捕获视频。链接到网络摄像头的视频元素被隐藏。视频提要被绘制到 HTML 画布元素。

我正在使用 JSInterop 在画布上调用 GetImageData()。该函数将部分画布的图像作为图像返回。

当我从 JavaScript 函数返回图像时，我得到：

“dotnet.wasm:1 Uncaught (in promise) RuntimeError: memory access out of bounds error”

这是HTML：

这是导致问题的代码。我已将其缩小到 OnTimedEvent 中的行：

这是JavaScript：