Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

Metronic, Blazor Server, NET 5 and Visual Studio


Hello!
Where can I find documentation, if it exists, to mount a metronic template in an existing blazor application created with visual studio?
I'm working in Visual Studio 2019 Community edition.

My steps have been:
1. Download the demo5
2. Copy assets folder into wwwroot
3. Splitting the theme into different Blazor pages
a. _Host.cshtml contains
body
<component type="typeof(App)" render-mode="ServerPrerendered" />
javascripts
b. MainLayout.razor contains anything else
Main
Root
Drawers
Toolbar
Modals

Apparently it does work, but, in example, clicking over the user's avatar the dropdown menu does not work.

Any suggestion, doc, video?
Thank you!


user
BBros 2 years ago
Blazor HTML Metronic
15 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 (15)

user
BBros 2 years ago

I noticed that removing this line 


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


the template works again. Something conflicts with metronic script for dropdowns menu.
I'll keep investigating.


user
BBros 2 years ago

I also tried to import the main theme dependencies inside /Shared/MainLayout.razor in OnAfterRenderAsync lifecycle hook.

And commenting both scripts in _Host.cshtml


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

 }
 }
}


... no success... sad


user
Lauris Stepanovs Author2 years ago

Could you please specify which integration you are trying to achieve, Blazor Server or Blazor Webassembly?


user
Lauris Stepanovs Author2 years ago

Hi,

Your integration steps look fine, you can find our Metronic 8 Blazor Server integration doc here: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/integration/blazor.html


user
BBros 2 years ago

I'm talking about blazor server integration.

Thank you for the link.
I followed those steps one by one.
My point is that when Blazor starts the Metronic scripts do not work.
I tried different approaches as well, like stopping Blazor autostart script

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


and calling the metronic script import in page


<script>
 Blazor.start().then(function () {

 var customScript = document.createElement("script");
 customScript.setAttribute("src", "assets/plugins/global/plugins.bundle.js");
 document.body.appendChild(customScript);

 var anotherScript = document.createElement("script");
 anotherScript.setAttribute("src", "assets/js/scripts.bundle.js");
 document.body.appendChild(anotherScript);
 });
</script>


but accordion, and dropdowns do not work when blazor has started.
I don't have any error in console.

Since I'm using visual studio, when I make it start, I tried both using the integrated IISExpress and the asp.net core executable in windows environment.

I don't think I can publish my project for metronic's license reason, but do you know if it is possibile to have a sample visual studio project running in order to better understand what's wrong in mine?

Ah, just a suggestion; in the docs the path of theme and tools are obsolete and when tried using metronic 8.0.34 I needed to change; anyhow it is well documented and easy to understand.


user
BBros 2 years ago

Since I'm compiling the server using visual studio, shall I skip the webpack script compilation?
I was missing that point, since the site is working when blazor scripts are not loaded.


user
Lauris Stepanovs Author2 years ago

Do only menu components doesn't work?

Could you please show all scripts which you are connecting in Pages/_Layout.cshtml?


user
BBros 2 years ago

In the new model the page name is Pages/_Host.cshtml but I guess this does not matter.


<!--begin::Body-->
<body class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled toolbar-fixed aside-enabled aside-fixed" >
 <component type="typeof(App)" render-mode="ServerPrerendered" />
 <div>
 <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="%22%20class=%22reload" target="_blank">Reload</a>
 <a class="dismiss">&eth;&#159;&#151;&#153;</a>
 </div>

 <!--begin::Javascript-->
 <script>var hostUrl = "assets/";</script>
 <!--begin::Global Javascript Bundle(used by all pages)-->
 <script src="assets/plugins/global/plugins.bundle.js"></script>
 <script src="assets/js/scripts.bundle.js"></script>
 <!--end::Global Javascript Bundle-->
 <!--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/create-app.js"></script>
 <script src="assets/js/custom/utilities/modals/users-search.js"></script>
 <!--end::Page Custom Javascript-->
 <script src="_framework/blazor.server.js"></script>
 <!--end::Javascript-->
</body>
<!--end::Body-->


This is the only part in which scripts are allowed; inside the "App" there are no scripts.

Moving blazor script just after the component does not change the behavior; moving it just before makes blazor not working.


user
BBros 2 years ago

I checked some demo 1 homepage feature and it does not work:

  • Accordion in left-side menu

  • Menus like "crafted", "user profile", "filter", "top-right panel menu" like the one in todo

  • Accordion in left-side menu

  • right-side panel won't show, it just grayes-out the page background, but not panels



It is working:
  • Modals



here is the result <a>https://metronic-test.bbros.cloud/</>
user
Lauris Stepanovs Author2 years ago

1) Remove theme script tags from this file, leave only a blazor.server.js script.

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


2) You have to load theme global js files inside Shared/MainLayout.razor in function OnAfterRenderAsync as it is shown in our integration doc.


user
BBros 2 years ago

I did, but with no luck (I know it's confusing, sorry, it was my 3rd post).

Now at the end of MainLayout.razor I've

@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/plugins/custom/datatables/datatables.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"));
 await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/apps/chat/chat.js"));
 await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/utilities/modals/upgrade-plan.js"));
 await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/utilities/modals/create-app.js"));
 await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/utilities/modals/users-search.js"));
 }
 }
}


and in _Host.cshtml I have only the blazor script.

I also commented other scripts but the default two in OnAfterRenderAsync, same result.

I published what happens in this link https://metronic-test.bbros.cloud/ in case it helps.


user
BBros 2 years ago

I've got news!


I changed the blazor logging level, and now both in browser and executable console I get an error message.
I noticed that the second metronic script scripts.bundle.js won't ever loaded because it fails during the first one plugins.bundle.js

error message is
Microsoft.JSInterop.JSException: Cannot set properties of undefined (setting 'moment')
TypeError: Cannot set properties of undefined (setting 'moment')
at https://localhost:5001/assets/plugins/global/plugins.bundle.js:25:168435
at https://localhost:5001/assets/plugins/global/plugins.bundle.js:25:168440
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)


function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.moment=t()}

user
Lauris Stepanovs Author2 years ago

In file MainLayout.razor in function OnAfterRenderAsync please load only two files listed below.

assets/plugins/global/plugins.bundle.js
assets/js/scripts.bundle.js


From your error it looks like you have bundled assets with a gulp, could you please rebuild assets with our webpack script?

Please check our webpack doc for more info:
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/build/webpack.html


user
BBros 2 years ago

Thank you! I confirm I get all working after compiling using webpack!


user
Lauris Stepanovs Author2 years ago

Glat to hear that happy All the best with your project!


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