La propriété ElementRef peut-elle être définie sur une valeur de retour javascript interop dans Blazor?

Question

La propriété ElementRef peut-elle être définie sur une valeur de retour javascript interop dans Blazor?

asp.net-core blazor c#

Question

Je bricole CodeMirror sur un élément textarea. J'utilise javascript interop pour y parvenir et cela fonctionne correctement lors de l'application du code miroir. Cependant, mon intention est de retourner cet élément codemirror et de le stocker dans un autre élémentref.

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
    return CodeMirror.fromTextArea(element,
    {
        mode: 'application/ld+json',
        matchBrackets: true,
        autoCloseBrackets: true,
        indentWithTabs: true,
        lineNumbers: true,
        autofocus: true,
        styleActiveLine: true,
        readOnly: false,
        autoCloseBrackets: true,
        foldGutter: true,
        height: 'auto',
        width: 'auto',
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
    });
});

        public static ElementRef CodeMirrorSetupExt(this ElementRef elementRef)
    {
        var result = RegisteredFunction.Invoke<ElementRef>("BlazorExt.CodeMirrorSetupExt", elementRef);
        return result;
    }

Dans ma composante:

//in my html i have a textarea with ref of TextArea

ElementRef CodeMirror;
ElementRef TextArea;

protected override void OnAfterRender()
{

    CodeMirror = TextArea.CodeMirrorSetupExt();
}

Idéalement, je devrais pouvoir mettre à jour mon code de référence codemirror à l'aide de ses fonctions.

    Blazor.registerFunction('BlazorExt.CodeMirrorUpdateExt', (element, Value) =>
{
    element.getDoc().setValue(Value);
});

        public static void CodeMirrorUpdateExt(this ElementRef elementRef, string Value)
    {
        var args = new object[] { elementRef, Value };
        RegisteredFunction.Invoke<object>("BlazorExt.CodeMirrorUpdateExt", args);
    }

Encore une fois dans le composant, je devrais pouvoir mettre à jour le codemirror comme ceci:

CodeMirror.CodeMirrorUpdateExt("somedata");

Cependant, je reçois une exception: Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException: impossible de lire la propriété 'getDoc' de null

Est-ce que ce que j'essaie d'accomplir en dehors de ce qui est possible ou est-il impossible de passer un objet javascript codemirror à un elementref?

Grand Masta1

Réponse populaire

J'ai étendu la réponse @Flores. Au lieu de créer un tableau global de tous vos objets javascript, stockez simplement la nouvelle valeur dans un objet DOM javascript auquel vous avez déjà un elementReference.

window.hintCodeMirrorIntegration = {
    initialize: function(element, markupMode) {
        element.codeMirrorLink = CodeMirror.fromTextArea(element,
           {
            ...
            });
        return 0;
    },

    getCode: function(element) {
        return element.codeMirrorLink.getValue();
    }

}

Du côté c # je passe la ElementReference à la zone de texte. Je m'accroche à cette référence, et lorsque je veux le code ouf de l'objet CodeMirror, je le trouve dans le TextArea auquel j'ai déjà une référence. Cela lie également parfaitement la durée de vie de l'objet CodeMirror à la zone de texte qu'il observe.

 private ElementReference textToEdit;
 protected override Task OnAfterRenderAsync()
  {
      return javascriptRuntime.InvokeAsync<int>("hintCodeMirrorIntegration.initialize", textToEdit,
          Context.CurrentAsset.MimeType);
  }

private async Task Save()
{
    var code = await javascriptRuntime.InvokeAsync<string>("hintCodeMirrorIntegration.getCode", textToEdit);
    //... save the result in the database
}

John Melville

Voir plus sur Stack Overflow

Accepted Answer

Non, ce n'est pas (encore) possible. Vois ici

Ce que vous pouvez faire, c'est enregistrer votre objet javascript de manière globale et utiliser cette référence pour d'éventuelles secondes utilisations. Ainsi:

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
  window.mybject = CodeMirror.fromTextArea(element,
  {
     mode: 'application/ld+json',
     matchBrackets: true,
     autoCloseBrackets: true,
     indentWithTabs: true,
     lineNumbers: true,
     autofocus: true,
     styleActiveLine: true,
     readOnly: false,
     autoCloseBrackets: true,
     foldGutter: true,
     height: 'auto',
     width: 'auto',
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
   });
   return true;
 });

public static void CodeMirrorSetupExt(this ElementRef elementRef)
{
    RegisteredFunction.Invoke<bool>("BlazorExt.CodeMirrorSetupExt", elementRef);
}

Et alors:

  Blazor.registerFunction('BlazorExt.CodeMirrorUpdateExt', (element, Value)=>{
    window.myObject.getDoc().setValue(Value);
});

Bien sûr, vous pouvez rendre cela plus agréable avec un tableau et une clé comme référence.

La propriété ElementRef peut-elle être définie sur une valeur de retour javascript interop dans Blazor?

Question

Fastest Entity Framework Extensions

Réponse acceptée

Réponse populaire

Performance

Expression Evaluator