Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: No notifications show in Blazor 9 Web App (Server) #5913

Closed
oliverw opened this issue Dec 23, 2024 · 4 comments
Closed

[Bug]: No notifications show in Blazor 9 Web App (Server) #5913

oliverw opened this issue Dec 23, 2024 · 4 comments
Labels
Type: Bug 🐞 Something isn't working

Comments

@oliverw
Copy link

oliverw commented Dec 23, 2024

Blazorise Version

1.7.1

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

I cannot for the life of it get Notifications to work a Blazor 9 Server App. I don't see any exception in the Visual Studio debugger or in the browser console. But I don't see notifications either. I have created a small standalone demo to reproduce the problem by following these steps:

  1. Create a new Blazor Project using Visual Studio's Blazor Web App Template (.NET 9)
  2. Implement the Blazorise integration quick start: https://blazorise.com/docs/start
  3. Setup the Blazorise Notification service per instructions here: https://blazorise.com/docs/services/notification-provider

Link to the Repro Repo: https://github.com/oliverw/BlazoriseWebApp

Steps to reproduce & bug description

I have created a small standalone demo to reproduce the problem by following these steps:

  1. Create a new Blazor Project using Visual Studio's Blazor Web App Template (.NET 9)
  2. Implement the Blazorise integration quick start: https://blazorise.com/docs/start
  3. Setup the Blazorise Notification service per instructions here: https://blazorise.com/docs/services/notification-provider

What is expected?

See a snackbar upon clicking the button.

What is actually happening?

Nothing.

What browsers do you see the problem on?

Microsoft Edge, Chrome

Any additional comments?

No response

@oliverw oliverw added the Type: Bug 🐞 Something isn't working label Dec 23, 2024
@stsrki
Copy link
Collaborator

stsrki commented Dec 23, 2024

It happens because you have rendermode InteractiveServer defined on a page level. And NotificationProvider is placed on a "global" level. So, it will never be re-rendered by the page.

Try this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["BlazorWebApp.styles.css"]" />
    
    <ImportMap />
    
    <link rel="icon" type="image/png" href="favicon.png" />
    
    <HeadOutlet @rendermode="InteractiveServer" />

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <link href="_content/Blazorise/blazorise.css?v=1.7.1.0" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css?v=1.7.1.0" rel="stylesheet" />
    <link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

@oliverw
Copy link
Author

oliverw commented Dec 23, 2024

Thanks @stsrki. Out of curiosity, can you explain why it works that way? And what the recommend fix is?

@stsrki
Copy link
Collaborator

stsrki commented Dec 23, 2024

I could, but I'm not that good at explaining stuff :)

Here is the article from Jon that did it quite well https://jonhilton.net/blazor-web-app-interactivity-choices/

@oliverw
Copy link
Author

oliverw commented Dec 23, 2024

Fair enough. Thanks and merry christmas. 🎄

@oliverw oliverw closed this as completed Dec 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug 🐞 Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants