Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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);     
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!