问题标签 [blazor-jsinterop]

我目前正在为我的公司开发一个内部 CRM 应用程序。它使用 Blazor 构建，并利用 Azure Maps javascript SDK。我正在使用 Azure Maps 来可视化我公司游戏玩家收集的地图项。根据 Microsoft 提供的文档，所有地图设置都是在 javascript 中完成的。该地图有一个用于显示点的符号层，以及一个用于渲染给定玩家行进路径的线层。此外，我们正在生成玩家收集统计数据的摘要（速度、距离和收集之间的时间）。这个组件所在的页面有一个 DateRangePicker、一个不同项目类型的下拉菜单和一个运行查询的按钮。目前，该网页的用户可以更改日期范围和项目类型并重新运行查询。这会导致摘要以及包含所有点和线的地图被正确地重新渲染。但是，当重新渲染地图时，附加到点的弹出窗口不再在地图上，或者至少对鼠标事件没有响应。如果有人对如何在地图渲染中保留和更新我的弹出窗口有任何想法，他们将不胜感激。

我需要将 ElementReference 传递给 Blazor 组件的子组件以进行互操作。但是当我这样做时，子组件的互操作仅在父组件的互操作成功执行后才起作用。我想 Reference 不是 presend，但这对我来说没有任何意义，因为我一直在渲染后执行的代码中使用 ElementReference。

家长：

孩子：

顶部代码：

完整源代码位于： https ://github.com/niklasweimann/BlazorDebugging/tree/elementReferene-null/BlazorDebugging （注意：它是一个带有多个分支的存储库，用于显示问题。）

背景：我需要获取 HTML 元素相对于浏览器窗口的位置，并且需要获取 div 元素的中心点。

我设法使代码如此平静。

Blazor html：

函数删除（）：

静态扩展：

此代码使 javascript 确认弹出。

我的问题是它是如何工作的？

最令人困惑的部分是：

为什么我们可以只写Confirm，但不能IJSRuntimeExtensionMethodsInstance.Confirm？

为什么我们还需要这个位js.？

它是如何传递js.Confirm($"Are you sure you want to delete?")给静态扩展的，或者之后的点符号到底在做什么js？

在我的 Blazor 服务器端应用程序中，我试图将图像 Base64 字符串从 JavaScript（调整大小后）传递到 C#。在 JavaScript 中，代码位于 FileReader.onload 函数中，因此它不会返回任何内容。
因此，我试图将数据分配给 JS 中的 HTML textarea 元素，然后在 C# 中从绑定到它的变量中获取它，但这不起作用 - 我得到的是空字符串，虽然，我很确定 textarea 元素具有正确的值。
但是，当我用“Hello from JS”之类的短字符串模拟返回字符串时，它会毫无问题地返回。

HTML：
<textarea id="base64ImageTextArea" @bind="base64Image" hidden />

JS：

C＃：

我还在 Startup.cs 中添加了以下内容：

完全没有异常/错误。

注意：我不想在这一步将图像从 JS 上传到服务器，因为我需要在 C# 中对其进行更多操作。

有任何想法吗？

我是 Blazor 的新手。有一个使用 gojs 库的 js 函数。画布，数据加载在js端动态处理。正如我所不明白的那样，仅在主机上添加 js 脚本是不够的，我必须使用 IJSRuntime。从示例中，我发现使用 return 等调用简单函数是可以理解的。但我有这个：

}

等等。因此，在初始化时，我的画布是动态构建的。

在组件方面我有：

<div onload="init()"></div> <span style="display: inline-block; vertical-align: top; padding: 5px; width:20%"> <div id="myPaletteDiv" style="border: solid 1px gray; height: 100%">

<textarea style="display:inline-block" id="jsonModel"></textarea>

如何在 Blazor 中处理所有这些？试过了

但它没有用。预先感谢您的任何帮助

我有一些用于录音和转换为 .mp3 的 JS 库，我想在 Blazor 网站的一个页面上使用它们。但我绝对不希望网站的所有访问者都预加载超过 1 MB 的 JavaScript，以防万一他们可能会导航到网站的该部分。

有任何想法吗？

我正在尝试调用一个 JS 函数，该函数通过 Blazor 中的 JS 互操作在用户单击时创建一个模式。问题是，该函数对 Blazor 子菜单内的 DOM 元素使用 onclick 事件。当该 DOM 元素位于侧面导航栏中的子菜单之外时，它可以正常工作。当我将该元素放入子菜单时，Blazor 抱怨它cannot set property 'onclick' of null

这是我的导航栏 HTML 和 JS 互操作代码

我正在尝试将 onclick 与此 id 元素一起使用

它位于它创建的子菜单中。当我将它放在子菜单之外的主导航菜单中时，JS 功能不会抱怨并且工作正常。

我也试过这样做

这会停止错误，但单击该元素不会执行任何操作。我该如何解决这个问题？我正在尝试研究 Blazor LifeCycle，因为我觉得这是一个渲染问题，但我很难理解我能做什么。

这也是我试图调用的 JS 函数

我正在尝试使用 JSinterop，但它似乎不起作用。

我正在尝试使用此 codepen 示例 https://codepen.io/rdallaire/pen/apoyx实现返回顶部按钮

我已将 CSS 和 Javascript 文件添加到主机文件中。加载网站时，它们被购买到屏幕中。但是该按钮从未出现在我的屏幕上。

不得不稍微调整 JS 以便它可以被 JsInterop 调用

添加到我的页面

以及对 javascript 的调用

并将标签添加到页面

现在当我加载页面时，我在谷歌开发工具中没有错误。真的很迷茫。谁能指出我正确的方向？

我有一个场景，我必须将 a 序列化为DateTimeOffsetJSON 作为一个简单的字符串值（例如"2021-04-07T18:18:00.000Z"，但将其反序列化为嵌入在对象中的值（例如{"_date":"2021-04-07T18:18:00.000Z"}）。我该如何做到这一点System.Text.Json？

详细情况如下。我正在为 blazor 包装一个日历 UI 库。我已经用 C# 类包装了 JS 类。从 Blazor 向 JS 发送日历“计划”（事件）时，DateTimes 只是作为序列化字符串传递。这行得通。

当从 JS 向 Blazor 发送“时间表”时，它会以对象（TZdate）的形式返回，内部是一个“_date”属性。

返回的 json 对象如下所示：

我试过为 DateTimeOffset 编写一个自定义转换器。这是读取方法：

以上不起作用。我不相信我正在reader正确使用该类或如何从此处的 json 中提取“_date”。

或者，我尝试用新的“TZDate”类和属性“_date”包装我的 DateTimeOffset 属性，但这在 JS 端中断，因为库期望来自 C# 的简单日期时间字符串，而不是对象。

更改 JS 库可能不是选项。

我有什么选择或如何解决这个问题？

Blazor WASM 客户端应用程序需要在 Web 浏览器屏幕上具有某些菜单项的悬停事件，并在平板电脑大小的屏幕上具有单击事件。为了接收浏览器屏幕宽度，使用 js 互操作和额外的浏览器服务（类似于https://blazor.tips/blazor-how-to-ready-window-dimensions/中的方法）来获取宽度并对事件处理应用条件。但是，如果此 Blazor 应用程序最初是在 Web 浏览器上加载的（例如 >1000 像素的屏幕具有悬停事件）并且当调整为标签宽度时（例如 <992 像素的屏幕具有相同菜单的点击事件），则页面需要刷新才能重新在调整到剃刀组件的大小后渲染宽度。

是否有任何替代方法可以将屏幕宽度的动态变化读入 Blazor 应用程序中的组件？

注意：有一种方法可以使用 BlazorPro 检测屏幕尺寸。BlazorSize 包https://github.com/EdCharbeneau/BlazorSize 但不幸的是，它对我不起作用