How to inject css / js files from a Blazor Razor Class Library to ASP.NET Core Blazor Project

Question

Usual process to import css / js files from a library to a main project is reference them with

<script src="_content/RazorLib1/hello.js"></script>

But there are some Blazor libraries like DevExpress.Blazor and this one that are able to inject their css / js files without explicit them on main project. What is required to do is call the functions services.AddMyLibrary() and/or services.UseMyLibrary()

How is it possible? I've looked inside Toolbelt.Blazor.LoadingBar library but I didn't find how he reached this behaviour.

HannesPreishuber · Accepted Answer · 2020-01-10 10:58:14Z

4

did a blog post for that (German) https://blog.ppedv.de/post/Razor-Classlibrary-JavaScript-einbinden

answered Jan 10, 2020 at 10:58

HannesPreishuber

3421 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leonardo Lurci Over a year ago

Thank you. your blog post was useful! If I use your code inside each component of my library I will have a <script> tag for each component loaded with the page. I wrote another JS code to inject inside my component. This code will add a <script> tag if and only if it isn't already inside the page. Can I suggest to edit your code inside jsRuntime.InvokeVoidAsync as I've done as a reply to my question?

Leonardo Lurci · Accepted Answer · 2020-01-10 11:59:55Z

1

I solved it thanks to HannesPreishuber's blog post. I suggest following his post changing the js code called inside jsRuntime.InvokeVoidAsync with

(function() {
   let scripts = document.getElementsByTagName("script");
   let exists = false;
   let index = 0;

   while(index < scripts.length && !exists){
       exists = scripts[index].src.endsWith('_content/RazorClassLibrary1/exampleJsInterop.js');
       index++;
   }

   if(!exists) {
       document.body.appendChild(
           Object.assign (
               document.createElement ('script'), {
                   src: '_content/RazorClassLibrary1/exampleJsInterop.js',
                   type: 'text/javascript'
               }));
       }
})()

so the js library will be append once.

edited Jan 10, 2020 at 11:59

answered Jan 10, 2020 at 11:50

Leonardo Lurci

3,0594 gold badges22 silver badges38 bronze badges

1 Comment

Kasrak Over a year ago

IMO when you found a useful post, instead of just commenting under it, you can at least upvote it if it is not the exact answer you were looking for.

Collectives™ on Stack Overflow

How to inject css / js files from a Blazor Razor Class Library to ASP.NET Core Blazor Project

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related