Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Unable to get Blazor working with Metronic


Hey

Like many others I'm also struggling to get a Blazor Server example of Metronic up and running.

I have got to the stage where JS is working on initial page load, but anytime I navigate to a new page the JS stops working as per the widgets not loading.

I'm not able to get all of the functionality without loading all of my required scripts within MainLayout.razor, whereas the docs specify just to load plugins.bundle.js and scripts.bundle.js

MainLayout.razor

@inject IJSRuntime JS

@inject NavigationManager MyNavigationManager



@code {

 protected override async Task OnAfterRenderAsync(bool firstRender)

 {

 if (firstRender)

 {

 await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));

 await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));



await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"));

await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/widgets.bundle.js"));

await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/widgets.js"));

 }

 }

}


I have not specified any other JS elsewhere in the code. Perhaps you can share working example of Blazor as I'm sure this would help many others. Alternatively I can upload my code on GitHub for you to review


L
Luke Shields 4 years ago
7 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)

L
Luke Shields 4 years ago

When loading the JS files seperately within Index.razor for example, and leaving main js files within MainLayout.razor I receive the following:

blazor.server.js:1 [2022-04-19T19:15:17.842Z] Error: Microsoft.JSInterop.JSException: KTUtil is not defined
ReferenceError: KTUtil is not defined
 at Object.../demo1/src/js/widgets/cards/widget-1.js (http://localhost:5133/assets/js/widgets.bundle.js:174:1)
 at __webpack_require__ (http://localhost:5133/assets/js/widgets.bundle.js:14109:41)
 at http://localhost:5133/assets/js/widgets.bundle.js:14120:11
 at http://localhost:5133/assets/js/widgets.bundle.js:14171:12
 at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
 at BookingApp.Pages.Index.OnAfterRenderAsync(Boolean firstRender) in C:\Users\luke-\source\repos\BookingApp - Copy\BookingApp\Pages\Index.razor:line 2804
 at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Code within Index.razor:

@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager

@code {



 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
 if (firstRender)
 {
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"));
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/js/widgets.bundle.js"));
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/widgets.js"));
 }
 }
}
user
Lauris Stepanovs Author 4 years ago

The required files are

await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js");

await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));


Please import only these files in MainLayout.razor.


L
Luke Shields 4 years ago

Hey Lauris,

I have done this, however as per your comment previously, "other files must be initialized and loaded separately."

I have tried doing so as I mentioned above, but I receive KTUtil not defined error. Perhaps I'm using the wrong lifecycle method?


user
Lauris Stepanovs Author 4 years ago

Hi Luke,

Could you please show how you are initializing other files?


L
Luke Shields 4 years ago

Sure!

MainLayout.razor

@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));
            await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));
        }
    }
}

Index.razor

						@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager

					@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"));
            await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/js/widgets.bundle.js"));
            await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/widgets.js"));
        }
    }
}

And then the error when intialising in this way (Note that the nav menu is still working so MainLayout.razor JS is fine):

blazor.server.js:1 [2022-04-19T19:15:17.842Z] Error: Microsoft.JSInterop.JSException: KTUtil is not defined
ReferenceError: KTUtil is not defined
 at Object.../demo1/src/js/widgets/cards/widget-1.js (http://localhost:5133/assets/js/widgets.bundle.js:174:1)
 at __webpack_require__ (http://localhost:5133/assets/js/widgets.bundle.js:14109:41)
 at http://localhost:5133/assets/js/widgets.bundle.js:14120:11
 at http://localhost:5133/assets/js/widgets.bundle.js:14171:12
 at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
 at BookingApp.Pages.Index.OnAfterRenderAsync(Boolean firstRender) in C:\Users\luke-\source\repos\BookingApp - Copy\BookingApp\Pages\Index.razor:line 2804
 at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
user
Lauris Stepanovs Author 4 years ago

Hi,

Right now we are initializing almost all js files inside the onDOMContentLoaded event, but in Blazor you can trigger the initialization event manually.

For example:

  1. In file src/js/custom/widgets.js you can remove the initialization from onDOMContentLoaded event.
  2. Add a global KTWidgets instance.


    3. window.KTWidgets = require("@/src/js/custom/widgets.js");
  3. Trigger the KTWidgets init function from your C#.


    4. await JS.InvokeVoidAsync("KTWidgets.init");


    user
    Lauris Stepanovs Author 4 years ago

    Hi Luke,

    Please do not load all bundled files inside MainLayout.razor, you have to load only two main js files, other files must be initialized and loaded separately.

    Check example in our Blazor integration doc.


    Text formatting options
    Submit
    Click any option to insert into your comment. Select text first to wrap it.
    • **text** to make things bold
    • *text* to emphasize
    • ### Heading to make headings
    • [link text](url) for links
    • ![alt text](image-url) to paste in an image
    • - item to make a list
    • 1. item to make an ordered list
    • > quote to quote somebody
    • `code` for single line of code
    • ```js ... ``` for JS code block
    • ```html ... ``` for HTML code block
    • ```scss ... ``` for SCSS code block
    • ```php ... ``` for PHP code block
    • --- for a horizontal rule
    • happy  :)
    • shocked  :|
    • sad  :(
    Text formatting options
    Submit
    Click any option to insert into your comment. Select text first to wrap it.
    • **text** to make things bold
    • *text* to emphasize
    • ### Heading to make headings
    • [link text](url) for links
    • ![alt text](image-url) to paste in an image
    • - item to make a list
    • 1. item to make an ordered list
    • > quote to quote somebody
    • `code` for single line of code
    • ```js ... ``` for JS code block
    • ```html ... ``` for HTML code block
    • ```scss ... ``` for SCSS code block
    • ```php ... ``` for PHP code block
    • --- for a horizontal rule
    • happy  :)
    • shocked  :|
    • sad  :(