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

【问题标题】：Blazor, get Input value from Javascript created DOM ElementBlazor，从 Javascript 创建的 DOM 元素中获取输入值
【发布时间】：2020-02-06 15:55:36
【问题描述】：

我一直在使用 Blazor (https://blazorboilerplate.com)，但今晚我遇到了一个问题，向我的 blazor 页面添加了一些自定义 D3 代码。 D3 / Javascript 代码创建了几个 DOM 输入元素，我希望检索这些创建的元素的值，以便我可以使用这些值将 DTO 保存到我的数据库中。我该怎么做？最有效的方法是什么？我应该只创建一个 JSInterop 方法来返回输入值吗？

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

我尝试创建“@ref”属性，以便可以使用 ElementReference，但是当我尝试附加以“@”开头的属性时出现 D3 错误

【问题讨论】：

Blazor 使用“shadow dom”方法来维护 UI，如果您自己从 JavaScript 添加元素，它们不是 Blazor 域的一部分，也不会与您的 Blazor 代码交互。你这样做有充分的理由吗？
因为它是来自现有测试和复杂代码的 D3，它执行一些非常酷的 UI 操作。 D3 创建 DOM 元素并具有经过测试的算法，我不想在 Blazor 中重写或重构。你可以在这里看到一个例子：keithfimreite.com/post/roi-investment-calculator.aspx

标签： javascript d3.js blazor blazor-client-side

【解决方案1】：

在 Magoo 先生的评论中进行了更多研究后，您无法与由 JS 创建和/或由 JS 修改的 DOM 交互。为了解决这个问题，您可以创建一个 JS 函数来返回您的数据。所以我创建了一个帮助方法，它返回我的数据的 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 Element 以获取 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()) + '"' +
            '}' ;    
  },

【讨论】：