Blazor，从 Javascript 创建的 DOM 元素中获取输入值

Question

I have been working with Blazor quite a bit ( https://blazorboilerplate.com ) but I have a bit of a issue that has stumped me tonight with adding some custom D3 code to my blazor pages. D3 / Javascript 代码创建了几个 DOM 输入元素，我希望检索这些创建的元素的值，以便可以使用这些值将 DTO 保存到我的数据库中。 我该怎么做？最有效的方法是什么？ 我应该只创建一个 JSInterop 方法来返回输入值吗？

domInput.attr("@ref", function (d3) {return d3.key});

我尝试创建“@ref”属性，以便在尝试 append 以“@”开头的属性时使用ElementReference但出现 D3 错误

Answer 1

在 Magoo 先生的评论中进行了更多研究后，您无法与由 JS 创建和/或由 JS 修改的 DOM 进行交互。 要解决这个问题，您可以创建一个 JS function 来返回您的数据。 所以我创建了一个帮助方法，它返回我的数据的 JSON 字符串。 然后我从我的 Blazor 代码中调用该 JS 并使用 Newtonsoft 对其进行反序列化。 d3 代码可以很容易地更改为 vanilla javascript 或 JQuery 以获得 DOM 元素值/innerHTML。

Blazor 代码

   var data = await JsRuntime.InvokeAsync<string>("JsInteropFunc", null);

   dataDto = Newtonsoft.Json.JsonConvert.DeserializeObject<DataObjectDto> 
    (data);

Javascript 代码，本例使用 d3 获取 DOM 元素，名称为 class 以获取 DOM 元素的文本：

  window.JsInteropFunc = function() {
    function cleanStr(data){
      return data.replace("$","").replace(",","").replace("%","");
    }

    return '{ totalSales: "' + cleanStr(d3.select(".totalSales").text()) + '"' +
            ', annualSales: "' + cleanStr(d3.select(".annualSales").text()) + '"' +
            ', profitMargin: "' + cleanStr(d3.select(".profitMargin").text()) + '"' +
            '}' ;    
  },