Blazor Server App JavaScript Libraries Not working (Metronic Template)

Question

I have Blazor Server Side app, where I have added JavaScript and CSS Libraries for Metronic Bootstrap Template.

The template is fully loaded when I run the app, but the JavaScript is not responding.

For example when I click on Side Menu (Arrow Icon) or Expand the Lists, or click on User Profile Drop down, all those sections are not working.

But when I comment out line, Blazor Server Library (blazor.server.js) template starts working, but other Blazor Components don't work properly (e.g. Counter).

In _Host.cshtml file Head Section added following CSS References:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />    
<link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />

In Body Section added following JavaScript References.

<script src="_framework/blazor.server.js"></script>
<script src="./assets/plugins/global/plugins.bundle.js"></script>
<script src="./assets/js/scripts.bundle.js"></script>
<script src="./assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
<script src="./assets/js/custom/widgets.js"></script>
<script src="./assets/js/custom/apps/chat/chat.js"></script>
<script src="./assets/js/custom/modals/create-app.js"></script>
<script src="./assets/js/custom/modals/upgrade-plan.js"></script>

I also tried the following methods, but nothing is working. Looks like Blazor Server App is Rendering before these JavaScript files are loaded into DOM. How Can I load these Scripts and work them properly. Any help will be much appriciated.

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start().then(function () {
        var customScript = document.createElement('script');
        customScript.setAttribute('src', scriptURLs);
        document.head.appendChild(customScript);
    });

    const scriptURLs = [
        "./assets/plugins/global/plugins.bundle.js",
        "./assets/js/scripts.bundle.js",
        "./assets/plugins/custom/fullcalendar/fullcalendar.bundle.js",
        "./assets/js/custom/widgets.js",
        "./assets/js/custom/apps/chat/chat.js",
        "./assets/js/custom/modals/create-app.js",
        "./assets/js/custom/modals/upgrade-plan.js",
        // ...
    ];
</script>

In my MainLayout.razor

@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime

<div class="d-flex flex-column flex-root">
    <div class="page d-flex flex-row flex-column-fluid">
        <MainSidebar />
        <div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">
            <MainHeader />
            @Body
            <MainFooter />
        </div>
    </div>
</div>

Answer 1

Just add the following:

<script>
            function InitMetronicScript() {
                $.getScript('theme/assets/plugins/global/plugins.bundle.js');
                $.getScript('theme/assets/js/scripts.bundle.js');
                $.getScript('theme/assets/js/custom/widgets.js');
</script>
    

to your _Host.cshtml file

and call it with

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JsRuntime.InvokeVoidAsync("InitMetronicScript");
}

in your Layout.razor and it should work fine.

Answer 2

You need to start Metronic's plugin after the page is rendered and you need to compile those scripts using webpack; if you don't compile using webpack you will have the following error:

Microsoft.JSInterop.JSException: Cannot set properties of undefined (setting 'moment') TypeError: Cannot set properties of undefined (setting 'moment')

At the end of MainLayout.razor file you need to add

@inject IJSRuntime JSRuntime

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

And your _Host.cshtml you need to let the other Metronic's scripts, like in this snippet:

<body>

    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <!--begin::Javascript-->
    <script>var hostUrl = "/assets/";</script>
    <!--begin::Page Vendors Javascript(used by this page)-->
    <script src="~/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
    <script src="~/assets/plugins/custom/datatables/datatables.bundle.js"></script>
    <!--end::Page Vendors Javascript-->
    <!--begin::Page Custom Javascript(used by this page)-->
    <script src="~/assets/js/widgets.bundle.js"></script>
    <script src="~/assets/js/custom/widgets.js"></script>
    <script src="~/assets/js/custom/apps/chat/chat.js"></script>
    <script src="~/assets/js/custom/utilities/modals/upgrade-plan.js"></script>
    <script src="~/assets/js/custom/utilities/modals/users-search.js"></script>
    <script src="~/assets/js/custom/utilities/modals/new-target.js"></script>
    <!--end::Page Custom Javascript-->

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.server.js"></script>
    <!--end::Javascript-->
</body>

I got it working using metronic v8.0.38 html demo5

Answer 3

Please note that Metronic have released a Blazor sample which does everything better than I described here: https://devs.keenthemes.com/metronic/blazor/demo1/download

Cheers,

Max