Question

0

123

Vistas

How to make equivalent of anonymous javascript function as paramter to IJSObjectReference in Blazor

I'm working on a service in Blazor that's using a JavaScript map, and I need to add a plugin to that map. I have a script tag that references the library in my _Layout.cshtml file and then in the component that show the map I use

@inject IJSRuntime JS

And then

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        origo = await JS.InvokeAsync<IJSObjectReference>("Origo", "index.json");
    }       
}

But then I get stuck when I have to add the plugin to the map, in just plain HTML, to add the plugin would look like this

origo.on('load', function (viewer) {
    var draw = Draw({
        drawTools: {
            "Polygon": ["freehand", "box"],
            "LineString": ["freehand"]
        }
    });
    viewer.addComponent(draw);
});

I guess I have to make a new IJSObjectReference for the on function on origo, but how do I make an equivalent of the anonymous function that is needed to add the plugin to the map? Is it even possible?

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-06-30T12:30:52.063Z

I did something with a similar component that worked. I created a JS file with an export function. I cannot be certain about the exact code in this function, because I have no idea what plugin you are using and how it is initialized.

import "..."; //Import the JS library of the plugin

export function initPlugin() {

    //Initialize origo here...
    origo = ...

    origo.on('load', function (viewer) {
    var draw = Draw({
         drawTools: {
           "Polygon": ["freehand", "box"],
           "LineString": ["freehand"]
         }
   });
   viewer.addComponent(draw);

}

Then, from your razor code:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        jsStacksEditorImported = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./myscript.js");
        await jsStacksEditorImported.InvokeAsync<IJSObjectReference>("initPlugin");
    }
}