Blazor 服务器应用程序 JavaScript 库不工作（Metronic 模板）

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 (eg 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