C#•16mo ago

Using Blazor WebAssembly for client interactions in Blazor Server

Hello all!

I'm building an admin dashboard sort of application that heavily interacts with the server, so I'm using InteractiveServer rendering by default. For small client side interactions such as a collapsible sidebar, it seems like there are a few options:

Use JavaScript (with or without a library such as Jquery or Alpine)
Use HTML + CSS "hacks" such as the checkbox method that ships with the default Blazor template
Use Blazor WebAssembly

I love the idea of doing as much as possible directly in Blazor, but I'm running into an issue with getting a collapsible sidebar to work. I want the functionality of the collapsing sidebar to live in Blazor WebAssembly so that it isn't talking to the server just to toggle a single piece of state. But the contents of the sidebar should be a Blazor Server component so I can directly access the database (through a service), and don't need to expose an API. I tried creating a Blazor component with RenderFragments, but I'm getting that issue where they can't be serialized.

So, my question is, in an environment that is primarily tightly coupled to the server, what's the best way of sprinkling in some client side interactivity? Is it possible to just use WebAssembly for this, or should I just be using JavaScript?

Thanks!

friedice•8/28/24, 8:59 PM

Maybe you are looking for this?
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#apply-a-render-mode-to-a-component-definition

ASP.NET Core Blazor render modes

Learn about Blazor render modes and how to apply them in Blazor Web Apps.

Ffriedice Maybe you are looking for this? https://learn.microsoft.com/en-us/aspnet/core/bl...

Caleb WeeksOP•8/28/24, 9:16 PM

Thanks! I'm familiar with the render modes. I'm looking for architectural advice on the best way of adding small client side interactions. I'd like to use Blazor WebAssembly, but it seems like nesting Server components in WebAssembly components isn't possible.

friedice•8/28/24, 10:18 PM

In my current setup for a project I have, I have blazor server as the host and WASM act as the client. I expose apis for db access, but if you dont want to do that you can inject your services directly into the host

friedice•8/28/24, 10:20 PM

If that approach is not for you, an alternative I can think of is integrating razor components? Might be tricky to set up though https://learn.microsoft.com/en-us/aspnet/core/blazor/components/integration?view=aspnetcore-8.0

Integrate ASP.NET Core Razor components into ASP.NET Core apps

Learn about Razor component integration scenarios ASP.NET Core apps, Razor Pages and MVC.

friedice•8/28/24, 10:31 PM

Here's an example program.cs of my server host, maybe it can give you inspiration

Caleb WeeksOP•8/29/24, 12:50 AM

Thanks! I'll look into that more. This repo is what gets generated when using Radzen Blazor Studio. I like how it's set up with the layout in the client side, but I just need the nav menu to be generated on the server. https://github.com/sethcalebweeks/RadzenBlazorAuto

GitHub

GitHub - sethcalebweeks/RadzenBlazorAuto

Contribute to sethcalebweeks/RadzenBlazorAuto development by creating an account on GitHub.