How to inject a javascript file dynamically in blazor server side

Question

I've a .js file which contains following javascript code:

         <script>     
            abc= window.abc|| {};
            abc.Metrics = abc.Metrics || {};
            abc.Metrics.sc = abc.Metrics.sc || {};
            abc.Metrics.sc.country = "us";         /***dynamic value based on site***/
            abc.Metrics.sc.language = "en";        /***dynamic value based on site***/
            abc.Metrics.sc.segment = "corp";      /***dynamic value based on site***/
            abc.Metrics.sc.customerset = "19";    /***dynamic value based on site***/
            abc.Metrics.sc.cms = "stp";           /***dynamic value based on site***/
            abc.Metrics.sc.pagename = "pname";  /***relevant unique page name***/
            abc.Metrics.sc.applicationname = "Browse:Product Detail"; 
         
        </script>
      
      <!-- Refer the below script in DEV -->
      <script src="//gbxDev/Bootstrap.js"></script>

Now, I want to inject this piece of code from .cs file without adding the reference of this js file in _Host.cshtml. Also, I've to set those variable values dynamically at the startup. Is it possible in blazor server side?

Do you want to add this configuration script to all pages or just some pages? — Yogi
– Yogi, Commented Sep 2, 2021 at 11:39
I want this configuration script on all pages but want to inject it dynamically with dynamic values to the variables. — LogicalDesk
– LogicalDesk, Commented Sep 2, 2021 at 12:17

ilyas varol · Accepted Answer · 2021-09-02 11:25:37Z

7

You can add any js file dynamically with this way:

@code {   
 protected override async void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync(identifier: "import", "/js/yourfile.js");
        }
    }
}

The above code just lets you call. If you want to call with initial value you want to send. You should follow this way:

@code {   
 protected override async void OnAfterRender(bool firstRender)
    {
        String parameter1 = "test";
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync(identifier: "yourMethodName", parameter1);
        }
    }
}

JS File Side

window.yourMethodName= (parameter) => { *** }

*You have to add this js file in _host.cshtml

edited Sep 2, 2021 at 11:25

answered Sep 2, 2021 at 11:16

ilyas varol

9884 gold badges16 silver badges27 bronze badges

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

1 Comment

David Hirst Over a year ago

It should be "await jsRuntime" not "await JSRuntime" otherwise you will get a non-existing method error when trying to call InvoiceVoidAsync

Collectives™ on Stack Overflow

How to inject a javascript file dynamically in blazor server side

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related