He estado trabajando con Blazor bastante (https://blazorboilerplate.com) pero tengo un pequeño problema eso me ha dejado perplejo esta noche al agregar un código D3 personalizado a mis páginas blazor. El código D3 / Javascript crea varios elementos de entrada DOM y deseo recuperar los valores de estos elementos creados para poder guardar un DTO en mi base de datos con esos valores. ¿Cómo puedo hacer esto y cuál es la forma más eficiente? ¿Debería crear un método JSInterop para devolver los valores de entrada?

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

Intenté crear atributos "@ref" para poder usar ElementReference pero errores D3 cuando intento agregar un atributo que comienza con '@'

2
Enkode 9 oct. 2019 a las 13:20

1 respuesta

La mejor respuesta

Después de investigar un poco más el comentario del Sr. Magoo, no puede interactuar con DOM que fue / es creado por JS y / o modificado por JS. Sin embargo, para evitar esto, puede crear una función JS para devolver sus datos. Así que creé un método auxiliar que devuelve una cadena JSON de mis datos. Luego llamo a ese JS desde mi código Blazor y uso Newtonsoft para deserializarlo. El código d3 podría cambiarse fácilmente a javascript vanilla o JQuery para obtener el valor de los elementos DOM / innerHTML.

Código Blazor

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

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

Código Javascript, este caso usa d3 para obtener el elemento DOM con un nombre de clase para obtener el texto del elemento 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()) + '"' +
            '}' ;    
  },
3
Enkode 10 oct. 2019 a las 21:24