MVC CORE VIEWDATA

Question

Here is mvc core page to get latitude and longitude from browser and determine address.

The bing api and method works perfectly and address is retrieved

but the viewdata is not working

https://github.com/KalyanAllam/LatLongAddress

Answer 1

Hi,@KALYANA ALLAM

You were trying with ajax call ,the page won't be refreshed itself,you have to update dom or refresh the page yourself

Since you've already called:

console.log(response);

You could check the console:

I

In fact,ViewData worked well to generate HtmlContent,but the content hasn't been updated

You could try as below to update part of your view:

In controller:

[HttpPost]
        public async Task<IActionResult> ReverseGeocode([FromBody] MyGeoData data)
        {

            string BingMapsApiKey = "Au7sMtQzyQZRzuQ2krOIbZg8j2MGoHzzOJAmVym6vQjHq_BJ8a1YQGX3iCosFh8u";

            using (HttpClient client = new HttpClient())
            {
                string url = $"https://dev.virtualearth.net/REST/v1/Locations/{data.latitude},{data.longitude}?o=json&key={BingMapsApiKey}";
                var response = client.GetAsync(url).Result;

                string json = await response.Content.ReadAsStringAsync();

                // Parse the JSON response to extract the address
                dynamic data1 = Newtonsoft.Json.JsonConvert.DeserializeObject(json);
                string address = data1.resourceSets[0].resources[0].address.formattedAddress;
               

                return Ok(new
                {
                    latitude = data.latitude,
                    longitude = data.longitude,
                    address = address
                });
                
            }
        }

In View:

 function showPosition(position) {
          
            var data = {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
            };

            $.ajax({
                url: "/Home/ReverseGeocode",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                success: function (response) {
                    console.log(response);
                    $('#address').text(response.address)
                }
            })
          
        }

<h2 id="address"> @ViewData["address"]</h2>

Result:

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

Ruikai Feng