1

Blazor WebAssembly App Loads Configuration Values After Executing Methods Resulting in Null's Initialy then it will return with correct values.

I followed Microsoft documentation.

Appseting File:

wwwroot/appsettings.json

My Component.razor:

@page "/"

<h1>Configuration example</h1>

<p>Message: @Configuration["message"]</p>
@code {
   protected override async Task OnParametersSetAsync()
   {
      await trying to read Configuration["Message"];
    }
}

My Program.cs File:

 public class Program
        {
        public static async Task Main(string[] args)
        {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

        await builder.Build().RunAsync();
    }
}

My _Imports.razor

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.Extensions.Configuration
@using Microsoft.JSInterop
@inject IConfiguration Configuration;

Note: Understand that I am getting the value's correctly but always null first then re-renders with correct values, i am using OnParametersSetAsync() as entry point, i understand OnParametersSetAsync() changes on every Parameter Change. but the Configuration Values should be constant not null first right?

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
smj
  • 416
  • 1
  • 4
  • 10
  • Please provide a simple reproduction of the issue - preferably in a GH repo or similar. You haven't said where you are seeing a null either. From your provided code, there would only be one render, so when you say it re-renders - you are doing something other than shown here. What exactly is this: "await trying to read Configuration["Message"];"? – Mister Magoo Jul 26 '20 at 16:56
  • Some of those override methods are called twice, check for null first and see if it's called again with the correct data. – Paw Baltzersen Jul 26 '20 at 20:10
  • @PawBaltzersen yep that's pretty much what's happening – smj Aug 17 '20 at 06:25
  • @smj As far as I know this is intended behaviour. It might be subject to change, but I don't know. The null check is your best option for now. – Paw Baltzersen Aug 17 '20 at 07:31
  • It worked for me on a new project i am not sure exactly but updating nugat packages to latest release did it. – smj Aug 25 '20 at 09:20

3 Answers3

0

I had the same problem today when I tried to fetch connection string value from appsettings.json. Try to Restart Visual Studio and it will work properly.

Hamdan Dabbas
  • 537
  • 1
  • 5
  • 11
  • Buddy it's Blazor WebAssembly Runtime Issue, Configuration Works Just fine after it get null first's then it will re-render with correct value – smj Jul 26 '20 at 11:17
0

The component is instantiated twice, before and after loading data. This is per design to show the page faster and then load the data after.

Why does Blazor renders component twice

Why are Blazor lifecycle methods getting executed twice?

Loading data on component load

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-3.1#stateful-reconnection-after-prerendering

Paw Baltzersen
  • 2,662
  • 3
  • 24
  • 33
0

it worked after updating to blazor nuget packages from 3.2.0 to 3.2.1

smj
  • 416
  • 1
  • 4
  • 10