如何在 Blazor Web Assembly 中将 c# 变量传递给 javascript

Posted 2023-04-12

【中文标题】如何在 Blazor Web Assembly 中将 c# 变量传递给 javascript

【英文标题】：How to Pass a c# variable to javascript in Blazor Web Assembly

【发布时间】：2021-11-28 16:30:45

【问题描述】：

我正在使用 Blazor Web 程序集，而第 3 方组件不支持 @onitnput 、@bind-value:event="oninput"。为了尝试解决这个问题，我尝试使用 JS 来触发 c# 函数。 （我还有其他东西会触发输入的“onchange”，所以当您查看我的示例时，只需将其视为 oninput，这是有效的）。

主要问题： 我需要将对页面的引用传递给 onchange 调用的方法，以便我可以从 JS 调用 c# 方法，但我无法让它传递参数。 这是我的标记

<RadzenhtmlEditor @bind-Value=@SurveyScriptNode.Script onchange="callCSharpMethodNoParams(@DotNetObjectReference.Create(this))" style="height: 500px; margin-bottom: 1rem; opacity: 1;" UploadUrl="upload/image" Paste=@OnPaste Execute=@OnExecute id="scriptBuilder_surveyScriptNode_ScriptEditor">

我也尝试了Here 的建议，但也无法正常工作

<RadzenHtmlEditor @bind-Value=@SurveyScriptNode.Script onchange="callCSharpMethodNoParams(<%=DotNetObjectReference.Create(this)%>)" style="height: 500px; margin-bottom: 1rem; opacity: 1;" UploadUrl="upload/image" Paste=@OnPaste Execute=@OnExecute id="scriptBuilder_surveyScriptNode_ScriptEditor">

有没有办法在 Blazor 中做到这一点？

感谢您的宝贵时间。

【问题讨论】：

我不太明白这一切的目的。 callCSharpMethodNoParams 方法做了哪些 C# 做不到的事情？

好吧，问题是 RadzenHTMLEditor（富文本框）不允许我使用 @oninput，这通常是您在 blazor Web 程序集中输入文本区域/文本框时触发方法的方式.在 blazor 中还有另一种触发 onInput 的方法，但它也不起作用。所以我需要使用 JS oninput 来调用我的 c# 方法。为此，我需要在组件的正常 oninput（在我发布的示例中为 onclick）中的 js 函数中添加一个 c# 变量。

我要做的是在用户对记录进行更改时显示“您有未保存的更改”横幅。我尝试的第一件事就是您的建议，但是在控件失去焦点之前设置器也不会被调用（我通过在我的设置器方法中放置一个断点来确认这一点）。等到控件失去焦点后才显示横幅是不可取的，因为他们将在紧急警报之间的停机期间以这些形式工作，因此如果他们进行编辑、工作和警报，然后回来，他们可能会认为它被保存并关闭标签

浮动另一个想法 - 每 10 秒自动保存一次。文本传输很便宜——您可以每 10 秒更新一整本书，而且成本低于提供低分辨率图像。

在这种情况下，只需复制其他应用程序所做的 - 自动保存多个版本，然后按需保存。

【参考方案1】：

作为一种解决方法，我正在这样做：

隐藏复选框

在所需控件上设置一个 js oninput 方法，这将 调用一个将隐藏复选框设置为true的js函数

由于隐藏复选框在JS更新值时不能@bind，调用StateHasChanged()时也不会更新值，所以需要实现一个定时器，使用JS互操作调用js函数返回值C# 代码的隐藏复选框。

将c#变量的值设置为上一步的返回值

在 c# 中创建另一个方法，使用 JS Interop 调用您在 on 输入中使用的 js 函数，在 c# 变量的 setter 中调用此方法，但请确保仅在页面已初始化时才执行此操作。