Blazor ElementReference

Das Grundproblem bei Blazor ist, das man nicht auf den HTML Code über das DOM direkt zugreifen kann, Im Kern muss immer einen MVVM ähnlichen Ansatz das Model an den HTML View gebunden werden. Das klappt nicht immer direkt und dann kommt zwangsweise JavaScript zum Einsatz. Wer z.b. in ein Canvas zeichnen will, muss dazu zwingend über JavaScript gehen.

Das klappt auch ganz leidlich über die entsprechenden JSRuntime Brigde und der Methode Invoke. Als Parameter werden zwingend der JS Methodennamen und die zu übergebenden Parameter benötigt.

Also für ein Alert

   1:  JSRuntime.InvokeVoidAsync("alert", "hallo Wellt");

Was ist aber wenn der Parameter ein HTML Element sein soll. Dazu bietet Blazor die Kombi href und Elementreference

   1:  <canvas id="myCanvas" @ref="myCanvas" ></canvas>
   2:  <button @onclick="click"></button>
   3:  @code {
   4:      ElementReference myCanvas;
Die Variable myCanvas erhält vollautomatisch ohne weiteres zutun die Referenz auf das HTML Canvas. Leider wird da intern nur eine ID mitgeführt, so das man auf myCanvas nicht weitere JavaScript Methoden aufrufen kann. Dazu muss dann wieder die JSRuntime bemüht werden.
Kommentare sind geschlossen