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

【问题标题】：How to Pass a c# variable to javascript in Blazor Web Assembly如何在 Blazor Web Assembly 中将 c# 变量传递给 javascript
【发布时间】：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 秒更新一整本书，而且成本低于提供低分辨率图像。
在这种情况下，只需复制其他应用程序所做的 - 自动保存多个版本，然后按需保存。

标签： javascript c# blazor-webassembly

【解决方案1】：

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

隐藏复选框
在所需控件上设置一个 js oninput 方法，这将调用一个将隐藏复选框设置为true的js函数
由于隐藏复选框在JS更新值时不能@bind，调用StateHasChanged()时也不会更新值，所以需要实现一个定时器，使用JS互操作调用js函数返回值C# 代码的隐藏复选框。
将c#变量的值设置为上一步的返回值
在 c# 中创建另一个方法，使用 JS Interop 调用您在 on 输入中使用的 js 函数，在 c# 变量的 setter 中调用此方法，但请确保仅在页面已初始化时才执行此操作。

【讨论】：