[Question] How do we set a storage item on a button click?

[MrYossu]

I'm using the .NET8 Blazor web app template, with the Identity stuff included.

I would like to set a local storage item when the user logs in, so added a single line to the Login.razor method that is called when the form is submitted...

  public async Task LoginUser() {
    // This doesn't count login failures towards account lockout
    // To enable password failures to trigger account lockout, set lockoutOnFailure: true
    SignInResult result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
    if (result.Succeeded) {
      await LocalStorage.SetItemAsStringAsync("Greeting", Input.Salutation);
      Logger.LogInformation("User logged in.");
      RedirectManager.RedirectTo(ReturnUrl);
    } else if (result.RequiresTwoFactor) {
      RedirectManager.RedirectTo(
        "Account/LoginWith2fa",
        new() { ["returnUrl"] = ReturnUrl, ["rememberMe"] = Input.RememberMe });
    } else if (result.IsLockedOut) {
      Logger.LogWarning("User account locked out.");
      RedirectManager.RedirectTo("Account/Lockout");
    } else {
      _errorMessage = "Error: Invalid login attempt.";
    }
  }

In this case, I have added a Salutation property to the InputModel, and want to store that in local storage.

However, when this is run, I get an exception....

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

OK, so I added the following at the top of the file...

@rendermode @(new InteractiveServerRenderMode(prerender: false))

However, that gives a different exception...

System.InvalidOperationException: Headers are read-only, response has already started

I'm a bit stuck now. Anyone able to explain how I do this?

Thanks

[amabilee]

Hey there!

1. InvalidOperationException: JavaScript interop calls cannot be issued at this time, happens because JavaScript interop calls are not allowed during static rendering. To address this, you correctly tried to change the render mode to InteractiveServerRenderMode

2. System.InvalidOperationException: Headers are read-only, response has already started, occurs because the Identity pages require access to the underlying HttpContext, which is not available in interactive mode

To resolve these issues, you can use the OnAfterRenderAsync lifecycle method to perform JavaScript interop calls after the component has been rendered

[MrYossu]

@amabilee Thanks for the reply, but I need to make the calls when the form is submitted. As far as I understand it, OnAfterRenderAsync is a lifecycle event that happens by itself when the component is created. The user will fill in and submit the form long after that has ended.

I can't make my call in OnAfterRenderAsync, as I won't have the data to store in local storage (the fixed value in the code sample was perhaps a bit misleading, I'm actually storing user-related info).

Thanks again, any further advice?

[amabilee]

You can handle the JavaScript interop after the form submission by performing the interop call within a callback. You can achieve this by using a helper method or a service to interact with JavaScript.

This will handle local storage interactions:

window.localStorageHelper = {
        setItem: function (key, value) {
                localStorage.setItem(key, value);
        }
};

Then inject IJSRuntime into your component and use it to set the local storage item after the form submission,

Make sure this JavaScript file is referenced