Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
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 2 years ago
7 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)

user
Lauris Stepanovs Author2 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.


L
Luke Shields 2 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<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"));
 }
 }
}


user
Lauris Stepanovs Author1 year 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 1 year 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 Author1 year ago

Hi Luke,

Could you please show how you are initializing other files?


L
Luke Shields 1 year ago

Sure!

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"));
 }
 }
}


Index.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/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"));
 }
 }
}


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 Author1 year 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");


    Text formatting options
    Submit
    Here's a how to add some HTML formatting to your comment:
    • <pre></pre> for JS codes block
    • <pre lang="html"></pre> for HTML code block
    • <pre lang="scss"></pre> for SCSS code block
    • <pre lang="php"></pre> for PHP code block
    • <code></code> for single line of code
    • <strong></strong> to make things bold
    • <em></em> to emphasize
    • <ul><li></li></ul>  to make list
    • <ol><li></li></ol>  to make ordered list
    • <h3></h3> to make headings
    • <a></a> for links
    • <img> to paste in an image
    • <blockquote></blockquote> to quote somebody
    • happy  :)
    • shocked  :|
    • sad  :(
    Text formatting options
    Submit
    Here's a how to add some HTML formatting to your comment:
    • <pre></pre> for JS codes block
    • <pre lang="html"></pre> for HTML code block
    • <pre lang="scss"></pre> for SCSS code block
    • <pre lang="php"></pre> for PHP code block
    • <code></code> for single line of code
    • <strong></strong> to make things bold
    • <em></em> to emphasize
    • <ul><li></li></ul>  to make list
    • <ol><li></li></ol>  to make ordered list
    • <h3></h3> to make headings
    • <a></a> for links
    • <img> to paste in an image
    • <blockquote></blockquote> to quote somebody
    • happy  :)
    • shocked  :|
    • sad  :(