Full stack web UI with Blazor in .NET 8 | .NET Conf 2023

dotnet · 217K views · 2023 · 55:56

Open on YouTube

Web developmenttalkdated

Why Stack Overflow recommends it

Stack Overflow users link it as the reference demo for Blazor .NET 8 render modes when explaining, or troubleshooting, how SSR, interactivity and Auto mode are meant to work.

Recommended by 1 people across 1 different months, 2023 to 2024.

What it is

A 56-minute .NET Conf 2023 session from the official dotnet channel on building full stack web UIs in Blazor with .NET 8. It covers static server-side rendering, streaming rendering, enhanced navigation, SSR forms, interactive render modes (Server, WebAssembly, Auto), and the new Blazor Web App template, with an e-shop demo.

What people said

Recommends Mushroomator · 2024-02 · Stack Overflow · on “Blazor 7 To 8 VS Directly Blazor 8”

You do not need to start with a completely new project. Migration is very much possible although depending on how big your application is (from a first look, it looks rather small) it might be quicker/ easier to start with a new template and just copy over the pages and sites and add @rendermode directives etc. as required. To do the migration a little more understanding of how Blazor works is required (although you should definitely have this anyway if you want to run Blazor in production). Using Server/ WebAssembly and Auto render modes makes things quite a bit more complex. So one important thing to note is that when you only have a single project you cannot simply add WebAssembly support

Recommends Mushroomator · 2024-02 · Stack Overflow · on “Method not being called when button is pressed?”

The issue probably is that you do not have the Interactive Webassembly render mode setup properly. First you need to enable the support by registering the required services with DI. // Register services builder.Services.AddRazorComponents() .AddInteractiveWebAssemblyComponents(); // Use Interactive WebAsssembly app.MapRazorComponents<App>() .AddInteractiveWebAssemblyRenderMode(); Then depending on what you want to to define the render mode used on the entire app page component level. To do it on the page level you should add the following on the top of your page: @rendermode InteractiveWebAssembly When you have that properly setup, it should work. To get an better understanding of why that i

Cites erikscandola · 2023-11 · Stack Overflow · on “Blazor EditForm with hidden field”

@MrCakaShaunCurtis I use this video as a guide: [this video] However, the problem is in the new version of Blazor .Net 8.0. I tried my code in Blazor .Net 6.0 and it works fine. Probably they has changed something behind the scene. Your suggest is to work without `post` and `OnValidSubmit` and pass `Input` as a parameter to `Save` method when I click on the button? In this way I'll lost validation. However, I already try to remove `post` preserving `OnValidSubmit` but the behaviour is the same.

Cites Enrico · 2023-12 · Stack Overflow · on “NET8 Blazor can't find rendermode for a component”

I have created a Razor Library where I have all the UI parts and design. In this library created using .NET 8 too, I have, for example, a component to change the theme to dark mode or vice-versa. I placed this component in another component called TopNavBar (the red arrow shows the switch from light to dark). The switch invokes JSInterop @inject IJSRuntime jsRuntime <div class="darkLight-btn"> <span class="icon @(IsDarkTheme ? "" : "active")" id="light-icon" @onclick="OnLightClick"> <i class="la la-sun"></i> </span> <span class="icon @(IsDarkTheme ? "active" : "")" id="dark-icon" @onclick="OnDarkClick"> <i class="la la-moon"></i> </span> </div> @code { /// <summary> /// Is the dark theme act

Cites Lukas · 2024-01 · Stack Overflow · on “Why is @rendermode InteractiveAuto not working in .NET 8.0 Blazor?”

I created a Blazor Web App project with the following settings. [LINK] When I launch, despite the Counter.razor component containing @rendermode InteractiveAuto , the Counter page does not download WASM and switch over from server. In the browser's Network tab the websocket remains active. Additionally, I put the following code into the NavMenu.razor component. The text never switches over to WASM. <h1 class="text-muted">Render @(OperatingSystem.IsBrowser() ? "Wasm" : "Server")</h1> According to this video [this video] , it should download WASM and switch over. To solve it, I tried using different browsers and making my own component with the InteractiveAuto render mode. What is the issue here? C

Cites erikscandola · 2024-02 · Stack Overflow · on “Blazor 8.0 two-way-binding”

I removed `rendermode` in my component and set in `Routes` as you show me. But the behaviour is the same. No two-way-binding. My project was created following this demo: [this video] No idea what's wrong with my project. Thank you for your time.

Cites Said Amir · 2024-03 · Stack Overflow · on “Blazor WASM in a single project?”

This isn't related to having the blazor wasm selfhosted on the api anymore ... its a new way of building your app... this is only explicit for .net8 The app is now using different rendering modes so you can choose between different modes per Page/Component ... instead of having to choose between wasm and server for the whole project. They added also another rendering Mode Server Side Rendering (Similar to Razor Pages). The Client project represent WASM components and the Main represents Server Side rendering or Interactive Server Side (Old blazor Server). [this video]

Cites Mushroomator · 2024-06 · Stack Overflow · on “Mudblazor library is not able to handle my login request”

I am assuming you're on .NET 8. Then this is most likely due to the chosen render mode and has nothing to do with MudBlazor. By default that is Static Server meaning you don't get any interactivity , you have to opt in to that by either changing the render mode globally, per page or per component. It's not an easy topic you will absolutely need to understand, because you need to know when does which code run where and especially with render mode Interactive Auto that's not always trivial. Supported render modes are (quoted from MS Docs [LINK] ): Name Description Render location Interactive Static Server Static server-side rendering (static SSR) Server ❌No Interactive Server Interactive serve