Chandradev's Blog

Recently in one of my blazor project, I used this features, there was requirement to fetch the current address details on basis of Ip address.

I used this API service for this task. https://ipinfo.io/json

For this demo, I have used Blazor Server 6.0. and same process will be in Blazor webassembly

Step 1: Create the basic blazor server application

Step 2: Create a model class like given below.

Step 3: Create the service wrapper class like this

namespace Blazor_Comp_Poc.Data.Service
{
    public interface ICurrentLocation
    {
        public Task<LocaltionDetails> GetLocaltionDetails();
    }

    public class CurrentLocationService : ICurrentLocation
    {
        private readonly HttpClient httpClient;
        public CurrentLocationService(HttpClient httpClient)
        {
            this.httpClient = httpClient;
        }

        public async Task<LocaltionDetails> GetLocaltionDetails()
        {
            var result = await httpClient.GetFromJsonAsync<LocaltionDetails>("json");
            return result;
        }
    }
}

Step 4: Create the API URL in appsettings.json file like this

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "Apiinfo": {
    "Apiurl": "https://ipinfo.io/"
  }
}

Step 5: Configure the required service on Program.cs like given below

<fieldset class="border p-2">
    <legend class="float-none w-auto">Address Details</legend>
    @if (details != null)
    {
        <div class="container">
            <div class="row">
                <div class="col float-right m-md-2">City</div>
                <div class="col m-md-2"><input class="form-control" @bind=details.city /> </div>
            </div>
            <div class="row">
                <div class="col m-md-2">State</div>
                <div class="col m-md-2"><input class="form-control" @bind=details.region /></div>
            </div>
            <div class="row">
                <div class="col m-md-2">Zip</div>
                <div class="col m-md-2"><input class="form-control" @bind=details.postal /></div>
            </div>
        </div>
    }

</fieldset>

Step 7: Call the api in Blazor UI page like this

using Blazor_Comp_Poc.Data;
using Blazor_Comp_Poc.Data.Service;
using Microsoft.AspNetCore.Components;

namespace Blazor_Comp_Poc.Shared
{
    public partial class AddressComponentForUSA : ComponentBase
    {
        [Inject]
        public ICurrentLocation? CurrentLocationService { get; set; }
        public LocaltionDetails? details { get; set; }

        protected override async Task OnInitializedAsync()
        {
            details = await CurrentLocationService.GetLocaltionDetails();
            StateHasChanged();
        }
    }
}

Step 8: Call the component in main page like this

Now run the application, you will see the output as given on above screen shoot.

You can download the source code here, https://github.com/Chandradev819/Blazor_Comp_Poc