Search code examples
.net-coreblazormaui

Bing Webapi fails in Blazor but not in ASP.NET Core


This code works in web but not in Blazor - please suggest a solution. I could see errors in console.

Here is correct website that works:

https://locationsearch.azurewebsites.net/Calc

Note: please get free Bing Maps key from MS Website.

The code is failing:

Uri elevationReq = new Uri(string.Format("https://api.open-meteo.com/v1/elevation?latitude={latitude}&longitude={longitude}"));

Incorrect String Format Exception

View:

@page "/"
@using Newtonsoft.Json;
@using Microsoft.AspNetCore.Components.Forms

@using System.Text;
@using System.Net.Http.Headers;

<h1>Counter</h1>

<EditForm Model="@submitActivity" OnSubmit="@Submit">
<div class="row">
    <div class="col-md-3">
        <p>Location</p>
    </div>
    <div class="col-md-4">
        <input placeholder="Location" @bind="@loc" />
    </div>
</div>

<br />

<div>
    <button type="submit">Submit</button>
</div>

<div>
    @errmsg
</div>

<br />
    @latitude
<br />
    @longitude
 <br/>
    @elevation
 
</EditForm>

@code {
    private string loc; string errmsg = ""; string time1 = ""; 
    double latitude = 0.0; double longitude = 0.0; double elevation;

    string time2 = "";

    private ACTIVITY submitActivity { get; set; } = new();

    public class ACTIVITY
    {
        public string Dummy { get; set; }
    }

    private async Task Submit()
    {
        string key = "Au7sMtQzyQZRzuQ2krOIbZg8j2MGoHzzOJAmVym6vQjHq_BJ8a1YQGX3iCosFh8u";
        string query = loc; 

        using (HttpClient client = new HttpClient())
        {
            string timez = "";
            string final = "";
            string timezone = "";
            string checknull = "";

            string time3 = "";
            string timef = ""; 

            Uri geocodeRequest = new Uri(string.Format("http://dev.virtualearth.net/REST/v1/Locations?q={0}&key={1}", query, key));

            client.BaseAddress = new Uri(geocodeRequest.ToString());

            client.DefaultRequestHeaders.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response1 = null;

            try
            {
                response1 = await client.GetAsync(geocodeRequest);
                string jsonstring = await response1.Content.ReadAsStringAsync();

                // Parse the JSON response to extract the address
                dynamic data1 = Newtonsoft.Json.JsonConvert.DeserializeObject(jsonstring);

                var result1 = data1.resourceSets[0].resources[0];

                latitude = result1.point.coordinates[0];
                longitude = result1.point.coordinates[1];

                Uri elevationReq = new Uri(string.Format("https://api.open-meteo.com/v1/elevation?latitude={latitude}&longitude={longitude}"));
                client.BaseAddress = new Uri(elevationReq.ToString());

                client.DefaultRequestHeaders.Clear();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                HttpResponseMessage response2 = null;
            
                response2 = await client.GetAsync(elevationReq);
                string jsonstring2 = await response2.Content.ReadAsStringAsync();

                // Parse the JSON response to extract the address
                dynamic datael = Newtonsoft.Json.JsonConvert.DeserializeObject(jsonstring2);
                elevation = datael.elevation[0];
            }
            catch (Exception e)
            {
                loc = "";
                timez = "";
                errmsg = "Invalid Location";
            }
        }
    }
}

Solution

  • You are missing the formatting values for the Uri you are trying to use.

    Try the below code adding your own float values for latitude and longitude, which are required by the Elevation API you are using.

    string latitude = "0"; 
    string longitude = "0";
    Uri elevationReq = new Uri($"https://api.open-meteo.com/v1/elevation?latitude={latitude}&longitude={longitude}");
    

    From the API link above:

    Parameters

    • latitude, longitude
    • Floating point array
    • Geographical WGS84 coordinates of the location. Multiple coordinates can be comma , separated. Up to 100 coordinates can be requested at once. Example for multiple coordinates.