Blazor中如何获取JavaScript创建的DOM输入元素的值？

嘿，我懂你这种头疼的情况——Blazor和D3混用时，动态DOM元素确实会打破Blazor的常规绑定逻辑。你试过的@ref失效很正常，因为Blazor的引用只能绑定初始渲染时就存在的元素，D3动态生成的元素它根本“看不到”，而且D3对@开头的属性处理确实会有问题。下面给你几个实用的方案，按推荐程度排序：

方案1：JSInterop一次性收集所有输入值（最简便） #

这是我最常用的方式，适合一次性提交数据的场景。核心思路是写一个JavaScript函数，遍历D3生成的所有输入元素，把它们的键值对整理好返回给Blazor，再映射到你的DTO。

步骤： #

1. 给D3生成的输入元素加统一标识
   创建输入时，给它们加一个专属类名或者明确的name属性，方便JS选择：

   d3.select('#d3-container')
     .append('input')
     .attr('type', 'text')
     .attr('name', 'productName') // 对应DTO的属性名
     .attr('class', 'd3-generated-input') // 统一类名
     .attr('value', '初始值');
   

2. 编写JS函数收集值
   在wwwroot/js下的脚本文件里添加：

   window.getD3InputValues = function() {
     const inputMap = {};
     // 选择所有D3生成的输入元素
     d3.selectAll('.d3-generated-input').each(function() {
       const $input = d3.select(this);
       const fieldName = $input.attr('name');
       inputMap[fieldName] = $input.property('value');
     });
     return inputMap;
   };
   

3. Blazor调用并映射到DTO
   在你的Blazor页面里注入IJSRuntime，然后调用这个函数：

   @inject IJSRuntime JS
   
   private async Task SaveToDatabase()
   {
       // 调用JS函数获取所有输入值
       var inputValues = await JS.InvokeAsync<Dictionary<string, string>>("getD3InputValues");
       
       // 映射到你的DTO
       var yourDto = new YourDto
       {
           ProductName = inputValues["productName"],
           Quantity = int.Parse(inputValues["quantity"]),
           // 其他属性...
       };
   
       // 执行保存到数据库的逻辑
       await _yourService.SaveDtoAsync(yourDto);
   }
   

这个方案的优点是代码量少，逻辑简单，不需要修改D3的核心渲染逻辑。

方案2：实时同步输入值到Blazor（适合实时交互场景） #

如果需要用户输入时就同步到Blazor的DTO，而不是等到提交时再收集，可以用JSInterop的双向回调。

步骤： #

1. D3创建元素时绑定change事件
   给每个输入元素添加change事件，触发时调用JS函数通知Blazor：

   d3.select('#d3-container')
     .append('input')
     .attr('type', 'number')
     .attr('name', 'quantity')
     .on('change', function() {
       const value = d3.select(this).property('value');
       window.updateBlazorField('quantity', value);
     });
   

2. 注册Blazor回调引用
   在Blazor页面里，把当前组件的引用传给JS，方便JS调用Blazor方法：

   @inject IJSRuntime JS
   @implements IAsyncDisposable
   
   private YourDto _dto = new YourDto();
   private DotNetObjectReference<YourPage>? _dotNetRef;
   
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender)
       {
           _dotNetRef = DotNetObjectReference.Create(this);
           await JS.InvokeVoidAsync("registerBlazorDtoRef", _dotNetRef);
       }
   }
   
   [JSInvokable]
   public void UpdateDtoField(string fieldName, string value)
   {
       // 根据字段名更新DTO属性，可以用switch或者反射
       switch(fieldName)
       {
           case "quantity":
               _dto.Quantity = int.Parse(value);
               break;
           case "productName":
               _dto.ProductName = value;
               break;
           // 其他字段...
       }
   }
   
   public async ValueTask DisposeAsync()
   {
       _dotNetRef?.Dispose();
   }
   

3. 编写JS回调逻辑
   在脚本文件里添加：

   let blazorDtoRef;
   window.registerBlazorDtoRef = function(ref) {
       blazorDtoRef = ref;
   };
   
   window.updateBlazorField = function(fieldName, value) {
       blazorDtoRef.invokeMethodAsync('UpdateDtoField', fieldName, value);
   };
   

这个方案适合需要实时验证或预览的场景，但代码量稍多，需要注意清理DotNetObjectReference避免内存泄漏。

方案3：让Blazor渲染输入元素（最符合Blazor模式） #

如果你的场景允许，尽量让Blazor负责渲染输入元素，D3只处理可视化部分。比如Blazor循环生成输入框，D3再基于这些元素的位置做图表或布局。这样你就能直接用@ref或者双向绑定@bind获取值，完全符合Blazor的组件模型。

示例：

@foreach(var item in _dtoItems)
{
    <input type="text" @bind="item.Value" class="d3-input" />
}

然后D3可以选择.d3-input类的元素，调整它们的位置或样式，而不用自己创建元素。

这个方案是最“Blazor原生”的，但需要你调整D3的渲染逻辑，适合可视化和表单结合的场景。

总结一下：如果是一次性提交，方案1最省心；如果需要实时同步，方案2更合适；如果能重构渲染逻辑，方案3是长期维护的最佳选择。

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