问题标签 [javascript-interop]

我刚开始玩 Blazor，我已经看到了这个新框架的巨大潜力。

不过，我想知道它将如何处理简单的事情，例如将焦点设置在输入控件上？例如，在我处理了一个点击事件之后，我想将焦点设置到一个文本输入控件。我是否必须使用 JQuery 来完成类似的事情，或者 Blazor 是否会有一些内置的方法来完成类似的事情？

谢谢

更新：我在下面发布了一个答案，其中包含一个示例，说明如何通过调用 .Net 代码中的 JavaScript 函数将焦点设置为控件。

截至目前（Blazor 0.9.0），您在 Index.html 中创建 JavaScript 函数（或从 Index.html 引用它们），然后在 Blazor 页面或组件中调用 JsRuntime.InvokeAsync("functionName", parms);

https://docs.microsoft.com/en-us/aspnet/core/razor-components/javascript-interop

我正在尝试使用 JSinterop 从我的 Blazor 组件调用 javascript 函数，但我总是收到此错误：

“未捕获的语法错误：输入意外结束”。

另外，当页面完全加载时会自动调用 javascript 函数，这不是所需的行为，因为我想在单击按钮时触发该函数。

我目前有一个 React 应用程序，我正在尝试将其转换为 Blazor WebAssembly 应用程序。React 应用程序有一个导入 JavaScript 库的组件，可以在此处查看其示例代码。如果不授予访问权限，则无法访问导入的charting_library代码本身，但这不应该是回答这个问题的问题。

在我的 React 应用程序中，根据示例代码，我有以下代码（为简洁起见，去掉了）：

我已阅读有关Blazor 组件和Blazor JavaScript interop的信息，并尝试使用 JavaScript interop 实现组件以使用charting_library我正在使用的 JavaScript，其方式与在 Blazor 中的方式与在我的 React 应用程序中的方式相同。因此，按照上的说明IJSRuntime，我在下面添加了charting_libraryJavaScript 代码wwwroot，并将以下内容添加到index.html：

Components\TradingViewChartComponent.razor然后，我创建了一个简单的 Blazor 组件（

也不清楚我是如何在Index.razor. 以下导致错误：

错误是：

“发现具有意外名称 'TradingViewChartComponent' 的标记元素。如果这是一个组件，请为其命名空间添加 @using 指令。”

它指的是模板示例文件SurveyPrompt.razor。我不确定连接是如何建立的，但是当其余代码构建时，这可能会自动解决吗？这不是因为我遇到了与 jQuery 有关的其他错误，例如“找不到'jquery'的类型定义文件”。这在charting_library代码本身中，我猜这在 React 应用程序中不是问题，因为create-react-app用作 Visual Studio React 应用程序模板的一部分添加了必要的依赖项，例如 jQuery。那么如何在 Blazor 应用程序中确保这种依赖关系呢？

这里的主要问题是，如何在 Blazor 应用程序中使用 JavaScript 库，就像在 React 应用程序中使用它一样？额外的问题，例如包含 Blazor 组件Index.razor和我得到的 jQuery 错误是额外的问题，如果它们可以单独回答，则不需要在这里回答（我不介意为它们创建单独的问题）。

感谢任何人都可以提供的任何帮助！我熟悉 C# 和 React，但对 Blazor 很陌生，而且我的 JavaScript 知识有限。

尝试使用 Blazor 客户端使用 JavaScript 互操作。 小部件不呈现。

我希望在 Blazor 中设置一个员工门户，但当然想使用 Okta 小部件。最初我只是无法让小部件呈现，现在出现了更多问题。将不得不回溯一点，但有人知道如何在 Blazor 中呈现 javascript UI 组件吗？

此外，我用我自己的 Okta 开发人员实例信息替换了 Okta 配置信息 - 未在下面显示......

RenderLogin 是 JavaScript 文件 OktaLogin.js 中的标签

在 OktaLogin.js 文件中（文件中的所有内容都是客户端）：

我想获取 a 的 url blob，我正在执行以下操作：

模仿JS

但我收到以下错误：

我究竟做错了什么？

美好的一天，我有一个 Blazor WASM 应用程序，它将调用第三方 API 来获取页面的数据。此 API 需要一个 jwt 令牌，我在登录后检索并存储在 LocalStorage 中。

当我进行第 3 方 API 调用时，我尝试获取令牌以将其添加到 HttpClient 客户端，然后再通过管道发送它。

它一直在遇到异常并抱怨以下内容：

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

有任何想法吗？

页面如下所示：

我正在尝试将 Bootstrap for Material Design 包含到我的 Blazor 服务器端项目中。我让它在纯 HTML 文件中完美运行，但 Blazor 的问题来自脚本。我假设需要在呈现页面后运行。该脚本从 CDN 调用一个函数。

我已经在 _Hostcshtml 的标签中添加了 CDN，并验证了它在编译系统时被正确调用。

有问题的函数（对表单输入字段进行验证）是

在纯 HTML 文件中，此调用只是在 CDN 调用之后的标记中。

我的问题是在 Bootstrap 的 OnAfterRenderAsync 中正确调用 .bootstrapMaterialDesign。

当前代码，显然不正确的是：

我希望这是有道理的。Bootstrap Material Design 的实现文档位于https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/

当刷新或手动导航到使用 javascript 互操作的 Blazor 页面时，它会出错，因为 javascript 中不再存在 dispose 函数。

有没有办法在刷新或导航时不在实现 IDisposable 的组件上运行“dispose”？“ElementReference”类型在哪里有帮助？

这是上下文的一些代码：

我的 blazor 组件实现了 IDisposable：

这将运行我的 Dispose 函数，该函数调用我的互操作文件：

我的 JsInterop 运行这个对 javascript 的调用：

最后在javascript中运行它：

当我通过浏览器刷新或导航到/从该页面导航到此页面时，我收到此错误

System.NullReferenceException：'对象引用未设置为对象的实例。'MyNameSpace.Components.JqxWindowComponent.JqxWindowJsInterop.get 返回 null。

任何帮助表示赞赏。

我正在通过嵌入到第三方软件 API 的 JS 创建一个 TS 包装器，该 API 不受我管理。我想在类型和接口中捕获尽可能多的行为，因为无类型的 vanilla JS 在我的情况下很难让它工作。

所以，更具体地说：

我有外部对象，并且我有一个接口，它声明了它具有的功能

我想检查一下：

1. 给定对象foo具有字段doFooStuff和doBarStuff。
2. 这些字段是函数。
3. 这些函数采用我描述的参数，如果不返回有意义的错误消息，至少检查 arity。
4. 这些函数返回返回类型中描述的数据，如果没有返回有意义的错误消息。

所以我实际上确实理解 3) 和 4) 几乎是运行时检查，应该通过测试来验证，但无论如何。

有时 API 会抛出一些错误，我想以某种方式描述和指示将返回哪个错误。错误主要是字符串和 POJO，我想为它们分配类型（最好是名义上的，以任何数量的轮子重新发明和肮脏的黑客为代价）。

到目前为止，我来到：

所以根本没有 3)，我需要手写大量的样板。是否有某种代码生成/编译器宏扩展/编译时反射工具来检查字段是否存在？

我有一个 blazor 服务器应用程序，它调用注入服务来调用 javascript 中的 Web 套接字以获取一些数据。我希望 Web 套接字将数据返回到服务上的 ac# 实例回调。c# 回调在 javascript 方法中可以正常工作，但不能从任何 websocket 回调（例如 onmessge、onerror、onclose 等）中正常工作。没有错误，只是没有数据。

我已经尝试使实例成为全局 javascript，甚至是调用类中的静态值，但仍然无法正常工作。我已经用谷歌搜索并尝试了每一个建议，但仍然没有运气。

这是索引页面：

服务：

的JavaScript：

您需要将此添加到 ConfigureServices 中的启动中：

您需要将以下内容添加到您的 _Hosts.cshtml：

编辑：当我在没有注入服务的情况下尝试这个时它可以工作（将调用和回调放在剃须刀页面中）。嗯。