问题标签 [blazor-jsinterop]

我正在开发一个 .Net5 Blazor 服务器应用程序，我正在尝试导入Selecto。进入 JavaScript。

按照 Selecto GitRepo 中的示例，我创建了一个名为 DesignerHelper.js 的 Javascript 文件并将其放在 wwwroot 文件夹中。它包含以下 javascript。

我将以下代码隐藏文件添加到标准 Blazor 模板的索引文件中。

当我运行该应用程序时，我收到以下错误。

错误：Microsoft.JSInterop.JSException：请求的模块“https://daybrush.com/selecto/release/latest/dist/selecto.min.js”不提供名为“default”的导出语法错误：请求的模块“https” ://daybrush.com/selecto/release/latest/dist/selecto.min.js' 没有在 Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[ ] args) 在 C:\Users\johnk\source\repos\WebApplication4\Pages\Index.razor.cs 中的 WebApplication4.Pages.Index.OnAfterRenderAsync(Boolean firstRender)：Microsoft.AspNetCore.Components.RenderTree.Renderer 的第 14 行。 GetErrorHandledTask(任务taskToHandle)

当我查看 Selecto 的 Selecto.tsx 源代码时，它们确实提供了默认导出。

我还尝试了以下导入...

但是错误如下，在这种情况下，我认为这是正确的；

请求的模块“https://daybrush.com/selecto/release/latest/dist/selecto.min.js”不提供名为“Selecto”的导出

我错过了什么？为什么 Microsoft.JSInterop.JSException 没有从 Selecto 参考中找到默认导出？

如何将数组从 Javascript 函数获取到 blazor 组件？在组件中，我调用了 Javascript 函数，initializeJs。

然后我在我的 JavaScript 中从 ARCGIS 服务中获取一个数组。

如何将 dataArray 发送回 Blazor 组件？

我使用 Blazor 创建了一个简单的 Qr 和条形码扫描应用程序。在手机上打开时，目前只能访问前置摄像头。但我需要旋转摄像头并访问后置摄像头。我使用 Zxing js 库扫描二维码和条形码，并使用 js-interop 访问了这个 js 文件。下图显示了我的应用程序的实际外观。

单击相机旋转按钮时，我的前置摄像头应该旋转，我应该能够访问后置摄像头，如果再次单击旋转按钮，我应该再次访问前置摄像头。这与移动相机旋转相同。

我的 QrDialog.razor 文件

QrScanner 组件

我已经在barcode.js 文件中包含了旋转功能。但不工作。

所有其他功能都正常工作，即使我的瓶颈在于上述 js 文件中的这个旋转功能。如果有人请根据我的要求更换旋转功能，它将纠正我的问题。非常感谢您的所有帮助。

在使用 JS 互操作的 Blazor 组件中，如何迭代 JavaScript 数组类对象？

举个例子：

我尝试使用InvokeAsync<IEnumerable>(...),InvokeAsync<IJSObjectReference[]>(...)和InvokeAsync<IEnumerable<IJSObjectReference>>(...)，但它们抛出异常：

未处理的异常渲染组件：“执行 JS 互操作时发生异常：无法将 JSON 值转换为 System.Collections.IEnumerable。路径：$ | LineNumber：0 | BytePositionInLine：1 .. 有关更多详细信息，请参阅 InnerException。”

我尝试将 to 强制转换IJSObjectReference为IEnumerable，但它也会引发异常：

未处理的异常呈现组件：“无法将‘Microsoft.JSInterop.Implementation.JSObjectReference’类型的对象转换为‘System.Collections.IEnumerable’类型。”

该文档解释了如何从 Blazor 调用 JavaScript 方法以及如何调用返回的 JavaScript 对象的方法，但没有提到迭代。

这是一个使用 blazor 和 MudBlazor 框架创建的简单注册表单。

下面你可以看到注册表格的代码部分。

登记。剃刀

现在我要在这个表单中添加回车键自动化。

要求-

1. 向一个字段添加一些值并按下回车按钮后，光标应聚焦在相邻的空字段上以添加值。

例如：-在名字字段中添加任何名称并按回车键后，光标指针应自动聚焦在电子邮件字段上（如果电子邮件字段为空）。

2. 在上述过程中，如果发现一个字段已被填写，请忽略它并继续下一个字段。

例如：如果我们认为光标指针在First Name字段上且Email字段已填写但密码部分尚未填写的情况。然后在按下回车键后，而不是移动到电子邮件字段，忽略电子邮件字段并且光标指针应该集中在密码字段上以输入折扣。

3. 添加所有字段并按回车按钮后，首先验证数据，然后提交所有数据。

我需要使用 blazor 添加以上 3 个部分以添加到我的表单中。如果有人知道如何做到这一点，请帮助我。我非常感谢您的所有帮助。

我已经为 apexchart.js 使用了 blazor 包装器来构建图表组件。这是我的 ApexChart 剃须刀组件。

但是当我运行应用程序时，我收到了这个控制台错误。

暴击：Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件：找不到“blazor_apexchart.renderChart”（“blazor_apexchart”未定义）。错误：找不到“blazor_apexchart.renderChart”（“blazor_apexchart”未定义）。在 https://localhost:5050/_framework/blazor.webassembly.js:1:328 在 Array.forEach () 在 a.findFunction (https://localhost:5050/_framework/blazor.webassembly.js:1:296 ) at _ (https://localhost:5050/_framework/blazor.webassembly.js:1:2437) at https://localhost:5050/_framework/blazor.webassembly.js:1:3325 at new Promise () at Object.beginInvokeJSFromDotNet (https://localhost:5050/_framework/blazor.webassembly.js:1:3306) 在 Object.Rt [as invokeJSFromDotNet] (https://localhost:5050/_framework/blazor.webassembly.js:1 ：

确切的问题是什么？请帮助我，感谢您的所有帮助

我有一个带有 js 文件的 Razor 类库 [My.Widget]：

小部件.js

在我的 WebAssembly 中，我已经加载了 js 文件：

索引.html

我可以在浏览器开发工具中看到它正确加载。

RCL 有一个互操作文件：

我在上面的互操作类中成功调用了 Show 方法，我可以看到 js 已加载到开发工具中，但出现异常：

Microsoft.JSInterop.JSException：找不到“Widget.show”（“Widget”未定义）。

有任何想法吗？

我一直在使用服务器端 API 开发组 Blazor WASM 项目。根据要求，我集成了 Calendly API 用于事件调度。在卡片组件中，我嵌入了他们网站提供的以下代码：

Calendly 使用 window.postMessage()将事件发布到父窗口，因此我在组件初始化时调用以下代码来“拦截”事件并通过我的服务器端逻辑对 Calendly 进行一些调用：

我的问题和问题是如何在触发事件时传递对象引用，以便我可以将实例方法回调到我的 Blazor 组件？

在上面的代码中，我尝试调用一个静态方法并且它可以工作，但它要求其他所有内容都是静态的，因此至少可以说它并不理想。我也尝试过随机的想法，例如将对象引用作为数据属性传递并将对象引用挂钩到窗口对象，但无济于事。

为了澄清，我需要这个，所以我可以在成功调度后关闭一些模式，并限制用户调度更多相同类型的事件。

我试图让它按照微软的文档工作。

下面的脚本代码在现有的 React 应用程序中完美运行，我正在尝试将该应用程序移植到 Blazor。脚本加载并初始化 - 我可以看到 Iframe 已正确加载到浏览器 DOM 中。然而，脚本（Apple 的 mapkit.js 脚本）Attempted to assign to readonly property在migrateStateTo函数中出错，试图设置t.tint = this.node.tint.

MapkitHelper.js

MapkitRenderer.razor

我正在尝试在 javascript 中获取一些 html 元素位置并将其传递回 C#，但我收到该错误：不支持“System.Type”实例的序列化和反序列化。

布雷泽：

JS：

}