时间戳

首页 > 解决方案 > Blazor，从 Javascript 创建的 DOM 元素中获取输入值

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

问题描述

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

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

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

标签： javascriptd3.jsblazorblazor-client-side

解决方案

在 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 元素以获取 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()) + '"' +
            '}' ;    
  },

推荐阅读