could someone please advise? I encountered an issue when trying to apply user preferences (theme) on the sites using HttpContext or anything authentication-related in Blazor .NET 9.
Everything works fine on other sites or when there is no Interactive Server on these sites using user data. I just inject JS and load themes:
@inject IJSRuntime JS@rendermode InteractiveServer...@code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JS.InvokeVoidAsync("applyUserPreferences"); } }...but it works only when @rendermode InteractiveServer is set.
I am unable to set it on the built-in sites using auth and HttpContext like ChangePassword.razor which looks like example below:
@using System.ComponentModel.DataAnnotations@using Microsoft.AspNetCore.Identity@using BibliotekaSzkolnaBlazor.Data@inject UserManager<ApplicationUser> UserManager@inject SignInManager<ApplicationUser> SignInManager@inject IdentityUserAccessor UserAccessor@inject IdentityRedirectManager RedirectManager@inject ILogger<ChangePassword> Logger...@code { private string? message; private ApplicationUser user = default!; private bool hasPassword; [CascadingParameter] private HttpContext HttpContext { get; set; } = default!; [SupplyParameterFromForm] private InputModel Input { get; set; } = new(); protected override async Task OnInitializedAsync() { user = await UserAccessor.GetRequiredUserAsync(HttpContext); hasPassword = await UserManager.HasPasswordAsync(user); if (!hasPassword) { RedirectManager.RedirectTo("konto/zarzadzanie/ustaw-haslo"); } }...When I set @rendermode InteractiveServer on these pages then app crashes with some cookie error message etc. I found that these pages won't work in this render mode.
Errors are
HttpContext.get returned null.
or
System.NullReferenceException: 'Object reference not set to aninstance of an object.'context was null.
My question is - how to make it work, how to load themes? I tried:
- add the task in MainLayout
- add the task in component layout
- add the task in App.razor
- try to use without interactive server
- add the task on the navbar used on each site
Nothing works until site is in interactive render and these auth sites cannot be in it.
But I noticed that even being static, my navbar works and changes theme. It is set interactive itself, but looks like it cant apply the theme for the site.
My navbar:
@inject NavigationManager NavigationManager@inject IJSRuntime JS@rendermode InteractiveServer<div class="catalog-navbar navbar navbar-expand-md">...@code { private async Task CycleFontSize() => await JS.InvokeVoidAsync("cycleFontSize"); private async Task CycleTheme() => await JS.InvokeVoidAsync("cycleTheme"); private async Task ToggleContrast() => await JS.InvokeVoidAsync("toggleContrast");}My layouts:
@inherits LayoutComponentBase<div class="page"><AuthorizeView Roles="@($"{Roles.ADMIN}, {Roles.LIBRARIAN}")"><div class="sidebar"><NavMenu /></div></AuthorizeView><main><article> @Body</article></main></div><div id="blazor-error-ui" data-nosnippet> An unhandled error has occurred.<a href="." class="reload">Reload</a><span class="dismiss">🗙</span></div>Layout used on the impacted sites (and other)
@inherits LayoutComponentBase@layout MainLayout<div class="d-flex flex-column min-vh-100"><CatalogNavbar/><div class="w-100 mb-4"><div class="mx-auto px-3 catalog-width"><CatalogSearchBar/> @Body</div></div><CatalogFooter /></div>