Sending values from Javascript to Blazor doesn't work (Two-data-binding)

Question

In my java script I'm sending the Lan/Long of my map to blazor. I can see the the the longitude and latitude changes on the browser, but I want to pass them to my blazor method to do some processing. the values returned always 0.

Here is my have script method:

function GetCircle(e){
    r = document.getElementById("InputRadius").value;

    if (circle !== null) {
        map.removeLayer(circle);

    }
        circle = new  L.circle([ Lat,Long],{radius:r});  
    map.addLayer(circle);
    circle.bindPopup( "<br/> Radius is : " + r +" Meter" 
   
    ).openPopup();
    document.getElementById("Lat").value = Lat; //send this to blazor
    document.getElementById("Long").value = Long; // send this to blazor
 
}

As you can see from the above code, when the user click on the map I'm getting the long/lat and then send them to blazor.

My razor page: I have the following inputs which I'm using them to store the data inside them then pass the data to blazor method in the 'code' section

<input type="text" @bind="Lat" id="Lat" name="Lat"   > 
<input type="text" @bind="Long" id="Long" name = "Long" >

@code {
   
   int InputRadius;
  double Long;
  double Lat; 
  string date_selected;
  string time_selected;
  


    public async Task GetTgas()
        {
         AllTags = await Task.Run(() => tagsService.Map(   InputRadius, Long,Lat,date_selected,time_selected));
 
        }

 public async Task GetCircle()

    {
        await JSRuntime.InvokeVoidAsync("GetCircle");

    }

}

I can see the Lan/Long in my view perfectly when I'm clicking on GetCircle, which means that they passed from JS to blazor page successfully, but when doing the GetTags function they don't pass to my blazor method.

Any help would be appriciated!

Answer 1

Your GetCircle method should be like this, need to send .net object reference to javascript function

await JS.InvokeVoidAsync("GetCircle", DotNetObjectReference.Create(this));

And your GetTags function should be like this, should be invokable from javascript

[JSInvokable]
public async Task GetTags(double lati, double longi)
   {
      AllTags = await Task.Run(() => tagsService.Map(InputRadius, longi,lati,date_selected,time_selected));     
   }

Your javascript function should be like this

function GetCircle(dotNetHelper){
    r = document.getElementById("InputRadius").value;

    if (circle !== null) {
        map.removeLayer(circle);

    }
        circle = new  L.circle([ Lat,Long],{radius:r});  
    map.addLayer(circle);
    circle.bindPopup( "<br/> Radius is : " + r +" Meter" 
   
    ).openPopup();

    //  send this to blazor
    dotNetHelper.invokeMethodAsync('GetTags', Lat, Long);     
}