error InvalidOperationException: JavaScript interop calls cannot be issued at this time when pass value from page to page ?

Question

I work on blazor web app with .net core 7 . I get error when try to pass user name from login page to another page dashboard after use login success.

I pass data using session storage from login page to dashboard page .

from debugging I check function after login success SetUserName(UserName) it set value of user name to NewUserName on session storage success .

error happen on dashoard.razor when I try to get User Name from sessions storage .

I get error

InvalidOperationException: JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.
Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(long asyncHandle, string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, CancellationToken cancellationToken, object[] args)
Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, object[] args)
System.Threading.Tasks.ValueTask<TResult>.get_Result()
Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage.ProtectedBrowserStorage.GetAsync<TValue>(string purpose, string key)
System.Threading.Tasks.ValueTask<TResult>.get_Result()
System.Runtime.CompilerServices.ValueTaskAwaiter<TResult>.GetResult()
UC.AppRepository.UI.Pages.Dashboard.GetUserName() in Dashboard.razor
+
        ProtectedBrowserStorageResult<string> result = await sessionStorage.GetAsync<string>("NewUserName");
UC.AppRepository.UI.Pages.Dashboard.OnInitializedAsync() in Dashboard.razor
+
       await GetUserName();

code details

public async Task Login()

{

string UserName = userDto.UserName;

SetUserName(UserName);

}

private async Task SetUserName(string UserName)

{

      

await sessionStorage.SetAsync("NewUserName", UserName);

NavigationManager.NavigateTo("/Dashboard", true);

}

DashBoard.razor(second page I need to reach to it)

@inject ProtectedSessionStorage sessionStorage

@code{

public string? UserName { get; set; }

protected override async Task OnInitializedAsync()

{

    

   await GetUserName();

}

}

private async Task GetUserName()

{

    ProtectedBrowserStorageResult<string> result = await sessionStorage.GetAsync<string>("NewUserName");

    if (result.Success)

    {

        UserFullName = result.Value;

    }

   

}
public async Task Login()

{

string UserName = userDto.UserName;

SetUserName(UserName);

}

private async Task SetUserName(string UserName)

{

      

await sessionStorage.SetAsync("NewUserName", UserName);

NavigationManager.NavigateTo("/Dashboard", true);

}

DashBoard.razor(second page I need to reach to it)

@inject ProtectedSessionStorage sessionStorage

@code{

public string? UserName { get; set; }

protected override async Task OnInitializedAsync()

{

    

   await GetUserName();

}

}

private async Task GetUserName()

{

    ProtectedBrowserStorageResult<string> result = await sessionStorage.GetAsync<string>("NewUserName");

    if (result.Success)

    {

        UserFullName = result.Value;

    }

   

}
Welcome @UserFullName

<div>Welcome @UserFullName</div>

Answer 1

If you read the docs, with blazor server you can not call Session storage from OnInitializedAsync you must use OnAfterRenderAsync

https://github.com/Blazored/SessionStorage

Answer 2

can you show me please how to write this code on OnAfterRenderAsync event and pass the value of user name from login to dashboard page and display it on dashboard page