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()) + '"' +
            '}' ;    
  },