Blazor WebAssembly中C#变量传递至JavaScript及第三方组件无@oninput支持时JS调用C#方法的参数传递问题求助

解决方案：正确传递Blazor组件引用给JavaScript事件 #

问题的核心在于：你直接在onchange属性中嵌入@DotNetObjectReference.Create(this)是无效的——Blazor不会解析原生JS事件字符串中的Blazor表达式，导致组件引用无法正确传递到JS层面。下面是两种可靠的实现方案：

方式一：通过元素Dataset存储组件引用 #

这种方式将组件引用绑定到编辑器元素上，JS事件触发时直接从元素上获取引用并调用C#方法。

1. 在Blazor组件中创建并管理组件引用
   在你的组件类中添加字段存储引用，并实现IDisposable确保资源释放：

   @implements IDisposable
   @inject IJSRuntime JSRuntime
   
   @* 你的组件标记内容 *@
   
   @code {
       private DotNetObjectReference<YourComponent>? _componentRef;
       // 替换YourComponent为你的实际组件类名
   
       protected override void OnInitialized()
       {
           _componentRef = DotNetObjectReference.Create(this);
       }
   
       // 组件首次渲染后，将引用绑定到编辑器元素的dataset
       protected override async Task OnAfterRenderAsync(bool firstRender)
       {
           if (firstRender)
           {
               await JSRuntime.InvokeVoidAsync("bindComponentReference", 
                   "scriptBuilder_surveyScriptNode_ScriptEditor", 
                   _componentRef);
           }
       }
   
       // 供JS调用的C#方法，必须标记[JSInvokable]
       [JSInvokable]
       public void HandleEditorInput(string currentValue)
       {
           // 这里处理你的输入逻辑，比如更新绑定值
           SurveyScriptNode.Script = currentValue;
           StateHasChanged();
       }
   
       public void Dispose()
       {
           _componentRef?.Dispose();
       }
   }
   

2. 添加对应的JavaScript函数
   在wwwroot的全局JS文件（比如script.js）中添加以下代码：

   window.bindComponentReference = function(elementId, componentRef) {
       const editorElement = document.getElementById(elementId);
       if (editorElement) {
           // 将组件引用存储到元素的dataset中
           editorElement.dataset.componentRef = componentRef;
       }
   };
   
   window.callCSharpMethodNoParams = function(event) {
       const editorElement = event.target.closest('#scriptBuilder_surveyScriptNode_ScriptEditor');
       const componentRef = editorElement?.dataset.componentRef;
       if (componentRef) {
           // 调用C#中标记为JSInvokable的方法，传递当前编辑器值
           componentRef.invokeMethodAsync('HandleEditorInput', event.target.value);
       }
   };
   

3. 修改RadzenHtmlEditor的onchange属性
   去掉原来的参数传递，直接传递事件对象：

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

方式二：直接使用Blazor的事件绑定（如果Radzen组件支持） #

如果RadzenHtmlEditor支持Blazor的@onchange事件绑定（而非原生JS的onchange属性），可以简化实现，不需要JS互操作传递引用：

<RadzenHtmlEditor Value=@SurveyScriptNode.Script 
                  @onchange="HandleEditorChange"
                  style="height: 500px; margin-bottom: 1rem; opacity: 1;" 
                  UploadUrl="upload/image" 
                  Paste=@OnPaste 
                  Execute=@OnExecute 
                  id="scriptBuilder_surveyScriptNode_ScriptEditor">

对应的C#方法：

private void HandleEditorChange(ChangeEventArgs e)
{
    SurveyScriptNode.Script = e.Value?.ToString() ?? string.Empty;
    // 这里执行你原来需要通过JS触发的逻辑
}

注意事项 #

• 如果同时使用@bind-Value和自定义事件处理，可能会出现值重复更新的问题，建议只保留其中一种方式（要么手动处理Value和@onchange，要么使用@bind-Value）。
• 务必确保DotNetObjectReference被正确Dispose，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Jeremy D