If you are following the progress of Blazor, 0.3.0 is the latest version to play with (at the time of writing this post). I created a CRUD app using blazor 0.1, and since then things have changed a lot like syntax for event handling and data binding, async event handlers, better encapsulation of component parameters and many others. One of the most important and unnoticed change is, including references of any third-party JavaScript library like jQuery and placing the JavaScript code. This post talks about using jQuery with ASP.NET Core Blazor and what’s new in 0.3 regarding JavaScript code.
Using jQuery with ASP.NET Core Blazor
In blazor version 0.1, the best place to put all your JavaScript code and including the jQuery library, is inside the blazor component itself. I also followed the same practice while creating the CRUD app with blazor. But, things have changed in blazor 0.3 and this no longer works now.
Today, when you add a <script> inside any blazor component, the compiler will issue an error “Script tags should not be placed inside components because they cannot be updated dynamically.” Check this issue for more detail.
To fix this issue, you need to move the script tag to the index.html file or another static location. So, the index.html file placed inside wwwroot folder is the place for putting all your JavaScript code and adding reference of the jQuery library. This should have worked with blazor 0.1, but there was an issue with index.html in 0.1 version, where it was not regenerated under bin folder when wwwroot/index.html is changed. Like,
Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.
