Blazor Server-Side variable doesn't update after function call because of OnAfterRenderAsync

Question

I have have a Server-Side Blazor app with a simple index.razor Page. My goal is to read sessionStorage and use it's content. But for now I am trying to make baby steps to understand what is going on.

This is the html

@inject Blazored.SessionStorage.ISessionStorageService sessionStorage

<button @onclick="TestInc">TEST</button>
<h1>@tutu</h1>

I only have a text to show the the number and a simple button to increment my value And this is the code

@code {
    private int tutu = 0;
    public string sNom;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            bool isConnected = await sessionStorage.GetItemAsync<bool>("isConnected");
            //if (!isConnected)
            //{
            //    NavManager.NavigateTo("/Login", forceLoad: true);
            //}
            sNom = sessionStorage.GetItemAsync<string>("Nom").Result;
        }
    }
    private void TestInc()
    {
        tutu += 1;
    }
}

For some reason, the code works fine if I comment the whole OnAfterRenderAsync function. The page will show the counter and update it when it I click on the button. However if I have the function OnAfterRenderAsync uncommented and do it's thing, the counter is not updated at all and if I put a breakpoint inside TestInc it never reaches it.

I am relatively new to Blazor so I might be missing something really obvious here.

What I really would like to achieve is get sessionStorage variable (a username for example) and display it inside my HTML without having to click on a button or reloading the page

Where should I call it ? In the doc it is not mentionned learn.microsoft.com/en-us/aspnet/core/blazor/components/… — CodingNewb
– CodingNewb, Commented May 25, 2021 at 12:51
No repro. Start again and make minimal changes, only the code posted above and see if you can demonstrate your problem. See minimal reproducible example. — Henk Holterman
– Henk Holterman, Commented May 25, 2021 at 12:59
Calling the base method is a best practice but I don't think it's the problem here. — Henk Holterman
– Henk Holterman, Commented May 25, 2021 at 13:00
Does the bool IsConnected change in de code? If not the problem is probally in the core of the application missing scripts for example. — N. Smeding
– N. Smeding, Commented May 25, 2021 at 13:02

Henk Holterman · Accepted Answer · 2021-05-25 13:20:36Z

2

The solution is simple:

//sNom = sessionStorage.GetItemAsync<string>("Nom").Result;
sNom = await sessionStorage.GetItemAsync<string>("Nom");

never use .Result or .Wait()
always aim for an unbroken 'chain' of awaits
treat "lacks await" and "is not awaited" Warnings as if they were Errors.

answered May 25, 2021 at 13:20

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodingNewb Over a year ago

Yes that was it, the .Result caused a deadlock and or this strange not responding behavior

N. Smeding · Accepted Answer · 2021-05-25 13:20:49Z

1

this will work if your sessionStorage has a item called Nom

sNom = await sessionStorage.GetItemAsync<string>("Nom");

answered May 25, 2021 at 13:20

N. Smeding

3942 silver badges16 bronze badges

1 Comment

CodingNewb Over a year ago

That was it, I wanted to try the .Result to not use await and Async methods. Turns out that was a really bad idea

Collectives™ on Stack Overflow

Blazor Server-Side variable doesn't update after function call because of OnAfterRenderAsync

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related