Blazored / Toast

A JavaScript free toast library for Blazor and Razor Component applications
https://blazored.github.io/Toast/
MIT License
654 stars 90 forks source link

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

Closed kidmar closed 6 months ago

kidmar commented 9 months ago

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

bcheung4589 commented 9 months ago

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 9 months ago

Thank you, v4.0.0 works

UweKeim commented 9 months ago

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?)

Dimnis-git commented 9 months ago

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

rennera commented 8 months ago

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

UweKeim commented 8 months ago

It seems, that all my favorite Blazor library developers have shifted priorities away from .NET 8 Blazor 😭.

chrissainty commented 8 months ago

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

rennera commented 8 months ago

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

UweKeim commented 8 months ago

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:

https://github.com/Basaingeal/Razor.SweetAlert2/issues/2642#issuecomment-1860420919

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

dvzghr commented 7 months ago

.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

dvzghr commented 7 months ago

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?

UweKeim commented 7 months ago

@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.

chrissainty commented 7 months ago

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

Stefan13-13 commented 7 months ago

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:

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.

dvzghr commented 7 months ago

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

UweKeim commented 7 months ago

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.

rennera commented 7 months ago

@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.

chrissainty commented 7 months ago

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.

rennera commented 7 months ago

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

chrissainty commented 7 months ago

@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.

UweKeim commented 7 months ago

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.

Stefan13-13 commented 7 months ago

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).

Stefan13-13 commented 7 months ago

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.

chrissainty commented 7 months ago

@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.

rennera commented 7 months ago

I had the same malfunctions on the boilerplate pages like register/login etc

From: Uwe Keim @. Sent: Friday, February 2, 2024 1:51 PM To: Blazored/Toast @.> Cc: rennera @.>; Mention @.> Subject: Re: [Blazored/Toast] [Question] Is .Net 8 supported? What is the correct way to initialize it? (Issue #243)

Back then I've tried these

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

And had all sort of malfunction in other areas then. (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.

— Reply to this email directly, view it on GitHub https://github.com/Blazored/Toast/issues/243#issuecomment-1924487974 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4E3CLQ7GZ2NEDP7A3YCCTYRUYQ3AVCNFSM6AAAAAA7YC2LNWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRUGQ4DOOJXGQ . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AA4E3CLRWWPUQ737PAQNXVTYRUYQ3A5CNFSM6AAAAAA7YC2LNWWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTSWVNSM.gif Message ID: @. @.> >

vicsind commented 7 months ago

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.

chrissainty commented 6 months ago

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.

iburleigh commented 5 months ago

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"/>
BillDahl commented 4 months ago

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