Blazored/Toast

[Question] Is .Net 8 supported? What is the correct way to initialize it?

kidmar opened this issue ยท 29 comments

kidmar commented

I create a new .Net 8 Blazor server app.
I can get the toast to show, but it looks like some css is missing.
Where should I reference the missing css and how?

immagine

Go back to 4.0.0, the upgrade is broken and not worth it. If you wait for response of @chrissainty it might take weeks..

kidmar commented

Thank you, v4.0.0 works

In my .NET 8 Blazor App (non-server), I did not manage to get this working, even with 4.0.0.

In my .NET 8 server-size Blazor app, it is working.

I guess the new server/client modes are not supported by Blazored Toast (yet?)

I'm testing this and only work with render mode Interactive Server

Did anyone get this to work with .Net 8 - I am testing and have not had any luck. I have used previous versions for a few years and its great. Getting no love from version 3.2.2, 4.0.0, 4.1.0 in .net8 - developing a Server Side app

It seems, that all my favorite Blazor library developers have shifted priorities away from .NET 8 Blazor ๐Ÿ˜ญ.

Hello all and apologies for the lack of comms. I have a lot going on right now and haven't had time to look at the changes needed for .NET 8. I'm hoping to spend some time on this over the Christmas break

I fully understand the competing priorities :) Maybe I am just to quick on the uptake of .net8! Happy holidays!

In case it might help @chrissainty: I was able to work-around a similar Issue in the Razor.SweetAlert2 library for Blazor .NET 8, see this comment of user @PvxTotal:

Basaingeal/Razor.SweetAlert2#2642 (comment)

Maybe this gives some pointers for solving it here, too.

.NET8 webapp Server: it is only working for me when I place the <BlazoredToasts /> as part of the component and not inside MainLayout
same for 4.0.0 and 4.1.0

In my .NET 8 server-size Blazor app, it is working.

@UweKeim did you place the <BlazoredToasts /> inside the MainLayout? and it works for you then?

@dvzghr It only works in a server-side Blazor app that I migrated over the years from .NET 6 โ†’ .NET 7 โ†’ .NET 8.

It does not work in a freshly created .NET 8 Blazor app.

Did you create an interactive web app or a SSR one?

Did all the steps in the readme. And no toasts showing up when pressing the buttons.

Using Visual Studio 2022, I created a 'Blazor Web App' project.
Then selected:

  • .NET 8.0 LTS
  • None for Authetnication type,
  • Checked Configure for HTTPS
  • Server for Interactive render mode.
  • Per page/component for Interactivity location
  • Checked Include sample pages
  • Unchecked Do not use top-level statements.

Also using VS2022, when I create an '.NET 7 Blazor Server App' project, and do the steps in the readme, all works out of the box in 1 go. If I change then the framework type of this project to .NET 8, it still works. So it seems the problem has something to do with the changes in the .NET 8 Blazor Web App template.

Did you create an interactive web app or a SSR one?

interactive server web app.
as mention above: it works when I place the <BlazoredToasts /> on the component page, a its not working when placing it on MainLayout

My personal opinion, and it seems I'm really the only one, is that Blazor .NET 8 is the absolutely worst release ever.

Renders dozens of third party libraries unusable, makes it so much more complicated to create a stable, working application.

I absolutely hate it. Maybe it is just my own stupidity to not getting used to Blazor .NET 8. And still I hope so much that Blazor .NET 9 fixes this.

@UweKeim it certainly has its usability issues doesn't it! I want to use it but just cannot upgrade existing apps - too many issues like you stated.

On a side - I tried Radzen and Syncfusion with .Net8 and was able to get the syncfusion toasts working in the meantime. Once these are working again I will switch them back.

For those that have said they have created an interactive app, have you added the following to the components in the App component?

<HeadOutlet @rendermode="InteractiveServer"/>
...
<Routes @rendermode="InteractiveServer"/>

Without adding these the application will not be interactive. I've just done this and the package seems to work fine from what I can see. These new render modes are tricky.

just tried this and the blazored toast works with those changes... My App.Razor page had those tags but without the rendermode specified.
image

@rennera Thanks for confirming. The current templates are misleading in that it doesn't matter what you pick nothing is fully interactive till you add those attributes.

Back then I've tried these:

<HeadOutlet @rendermode="InteractiveServer"/>
...
<Routes @rendermode="InteractiveServer"/>

I've had all sort of malfunction in other areas after this. (Don't know for sure where but I do think it was in the boilerplate authentication components added by the project wizard).

So personally I would not recommend using these above attributes.

For those that have said they have created an interactive app, have you added the following to the components in the App component?

<HeadOutlet @rendermode="InteractiveServer"/>
...
<Routes @rendermode="InteractiveServer"/>

Without adding these the application will not be interactive. I've just done this and the package seems to work fine from what I can see. These new render modes are tricky.

I can also confirm that this works in a fresh .NET8 Blazor Web App project.

Just for reference:
You get those by default when you create a new .NET 8 Blazor Web App project and select 'Global' as Interactivity location (as opposed to the default 'Per page/component'. But you can also change the manually.

Setting the rendermode to InteractiveServer globally makes it work! If you set it on a single page, it does not work (except when you put <BlazoredToasts /> also on that page).

Back then I've tried these:

<HeadOutlet @rendermode="InteractiveServer"/>
...
<Routes @rendermode="InteractiveServer"/>

I've had all sort of malfunction in other areas after this. (Don't know for sure where but I do think it was in the boilerplate authentication components added by the project wizard).

So personally I would not recommend using these above attributes.

A bit off topic, but in case you have trouble with setting InteractiveServer globally, then try this:

<HeadOutlet @rendermode="@(new InteractiveServerRenderMode(prerender: false))" />
...
<Routes @rendermode="@(new InteractiveServerRenderMode(prerender: false))" />

By default, prerendering is enabled for InteractiveServer and it will cause issues if you have stuff that only works on the client side (like Blazored.LocalStorage). The above disables prerendering globally.

@Stefan13-13

If you set it on a single page, it does not work (except when you put also on that page).

Yes. This is part of the fun of the new render modes. Interactive libraries, such as this one, can only work on interactive pages. Just to be clear this is by design and there are no changes I can do to make this behave any differently.

I can also advice you to wrap the BlazoredToasts component to your own component (for example you can name it ToastsContainer) and set @rendermode InteractiveServer for this component.
image

After that just use your new
<ToastsContainer />
in your main layout.

I'm going to close this issue as the package does work with .NET 8, but .NET 8 has a rather steep learning curve compared to previous Blazor releases and setting rendermodes incorrectly in your app will stop the library working.

You can follow the documentation exactly and get this to work by adding @rendermode="InteractiveServer" directly to the BlazoredToasts component (see below). Adding the rendermode higher in the app such as to routes and headoutlet forces the entire app into server interactive, which is not desired for everyone and will explode .Net8 Identity pages if you scaffolded them.

<BlazoredToasts @rendermode="InteractiveServer"
                Position="ToastPosition.BottomRight"
                Timeout="10"
                RemoveToastsOnNavigation="true"
                MaxToastCount="5"
                IconType="IconType.FontAwesome"
                SuccessClass="success-toast-override"
                SuccessIcon="fa fa-thumbs-up"
                ErrorIcon="fa fa-exclamation"/>

Putting @rendermode InteractiveServer at the top of a component also seems to make it work (using Typeahead in my case).