Blazor Server App JavaScript Libraries Not working (Metronic Template)

[usmanjalilusa]

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 from Header. All those sections are not working. But when I comment out this JavaScript library (blazor.server.js), template start working, but other Blazor Components don't work properly (e.g. Counter Component button click don't respond), As soon as I uncomment the (blazor.server.js) reference the Razor Component start working and again my JavaScript for template don't response as I mentioned in beginning.

I have placed css files reference in _Host.cshtml section.
In Body added
Then in before closing body tag added

<script src="_framework/blazor.server.js"></script>

and then other JavaScript reference libraries.

In My MainLayout.razor page I have

`

    <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>`

for more details can also visit the following link:
https://stackoverflow.com/questions/68745702/blazor-server-app-javascript-libraries-not-working-metronic-template

[usmanjalilusa]

@danroth27

[SteveSandersonMS]

I suspect that you're using the 3rd-party JS library to add functionality to the prerendered DOM, not the live DOM that gets inserted when the Blazor Server application starts up. In general, make sure you're using JavaScript APIs that interact well with dynamically-added DOM or it won't work. This advice applies to all SPA frameworks (e.g., Angular, React) not just Blazor.

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.