blazor-client-side

How to acess the appsettings in blazor webassembly

by

Using ASP.NET Core 6.0 Blazor configuration. Blazor WebAssembly loads configuration from the following app settings files by default: wwwroot/appsettings.json. wwwroot/appsettings.{ENVIRONMENT}.json, where the {ENVIRONMENT} placeholder is the app’s runtime environment. Example: wwwroot/appsettings.json { “h1FontSize”: “50px” } Pages/ConfigurationExample.razor @page “/configuration-example” @using Microsoft.Extensions.Configuration @inject IConfiguration Configuration <h1 style=”font-size:@Configuration[“h1FontSize”]”> Configuration example </h1> Warning Configuration and settings files in a … Read more

Blazor client-side debugging

by

For those who like some pictures, here’s a step by step using Visual Studio 16.4 preview (.NET Core 3.1 preview 2) & Chrome version 78. Start up the app using a debug profile. E.g. After site loads, and with the cursor focus on the chrome tab press “Shift+Alt+D”. Chrome will open a new tab showing … Read more

Blazor redirect to login if user is not authenticated

by

There may be slicker ways of doing this, but this is what worked for me: Assuming you’ve configured Authentication correctly according to these instructions In your MainLayout.razor (which is used by default for all components) add a code block as follows: @inject NavigationManager NavigationManager @code{ [CascadingParameter] protected Task<AuthenticationState> AuthStat { get; set; } protected async … Read more

How to use Bootstrap modal in Blazor client app?

by

There is likely a better way to do this, but here’s a working example to get you started: Page: @page “/modal-test” <BlazorApp1.Components.Modal @ref=”Modal”></BlazorApp1.Components.Modal> <button @onclick=”() => Modal.Open()”>Open Modal</button> @code { private BlazorApp1.Components.Modal Modal { get; set; } } Component: <div class=”modal @ModalClass” tabindex=”-1″ role=”dialog” style=”display:@ModalDisplay”> <div class=”modal-dialog” role=”document”> <div class=”modal-content”> <div class=”modal-header”> <h5 class=”modal-title”>Modal title</h5> … Read more

There was no runtime pack for Microsoft.AspNetCore.App available for the specified RuntimeIdentifier ‘browser-wasm’

by

I finally made it work. I did everything that guide said, except for the project file which I changed to this: <Project Sdk=”Microsoft.NET.Sdk.Web”> <PropertyGroup> <TargetFramework>net5.0</TargetFramework> <UserSecretsId>*****</UserSecretsId> <UseBlazorWebAssembly>true</UseBlazorWebAssembly> </PropertyGroup> … But I have no idea if it is correct when official upgrade guide says to use: <Project Sdk=”Microsoft.NET.Sdk.BlazorWebAssembly”> instead of: <Project Sdk=”Microsoft.NET.Sdk.Web”>

tech