-
Notifications
You must be signed in to change notification settings - Fork 10k
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
[Blazor] Framework support for per-page JavaScript logic #52273
Comments
I've been thinking a bit more about this, and we should also extend this type of functionality to CSS, so people can wire-up a stylesheet declaratively instead of relying on JS to inject it (which many of them do wrong). |
Thanks for contacting us. We're moving this issue to the |
The workaround I found so far that works the best for both static script and dynamic script loading when using hash-navigation is:
This works because when the page is loaded from non-enhanced load the script tag in the Head is ensured to be loaded, but when enhanced load is called the
I noticed
This "solves" the 3 major problems:
All-in-all very fragile and soooo many issues in Blazor with legacy javascript. |
Thanks for contacting us. We're moving this issue to the |
I may be wrong, but it appears to me that PageScript solves a very specific problem (of js that needs to be run onload) in a very specific way (the onLoad/onUpdate/onDispose contract) . |
I totally agree with @schmellow. The proposed methods do not work well when trying to load 3rd party scripts such as Flowbite (Tailwind). For example, an image Caroussel from Flowbite that requires js is properly rendered on first load but after enhanced navigating to another page and returning back, it does not appear at all |
Anyone got scripts like SweetAlert2 working with enhanced navigation turned on? |
I'd like to +1 this requirement, I want to add a |
At the moment I'm using PageScript component and embedding the data in the DOM:
|
Overview
One might expect that placing a
<script>
element in a statically rendered page component should result in the script getting executed each time the page loads. This would be consistent with how other frameworks like Razor Pages and MVC work. However, scripts won't execute if they get dynamically added to the page via enhanced navigation, and this creates inconsistency between full page reloads and enhanced page updates.We added the
blazor.addEventListener("enhancedload", callback)
API in .NET 8 so that customers could implement logic that reacts to enhanced page updates. However, this API alone doesn't provide the level of convenience that placing<script>
elements directly inside a component does.Potential solution
Feedback such as #51331 prompted me to create a library to help make it easier to have per-page JavaScript in Blazor Web apps: https://github.com/MackinnonBuck/blazor-page-script.
We should consider bringing a feature like this into the framework. The package's API is a component that takes a path to a JS module, but it would be worthwhile to consider alternative and/or more sophisticated designs. For example, we could allow
<script>
tags to be placed directly in components, since that's what many customers intuitively try first, and the framework could preprocess them in a special manner so that the code gets executed even with enhanced navigation enabled.The text was updated successfully, but these errors were encountered: