Metronic with Blazor WebAssembly

Hi,

Do you plan to create a manual how to integrate Metronic with Blazor WebAssembly? Existing instruction for Blazor Server is fine as long as you replace whole index.html and not use Blazor components. When trying to navigate through website with dynamically replaced pages, some Metronic components doesn't work. I guess the problem is with JavaScript libraries, where these cannot see updated areas of particular pages. Would be great to have some example how to make Metronic fully working with Blazor (and all its features).

Thanks
J

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 (6)

Hi,

You can create a WebAssembly project with the command:
dotnet new blazorwasm -o BlazorApp

Then steps related to the npmjs folder must be the same as described in our doc https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/integration/blazor.html#initialize-npm

Then in file index.html instead of addicting bundled files directly try the example below:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
Blazor.start().then(function () {
const modules = [
"assets/plugins/global/plugins.bundle.js",
"assets/js/scripts.bundle.js",
"assets/plugins/custom/fullcalendar/fullcalendar.bundle.js",
"assets/plugins/custom/datatables/datatables.bundle.js",
"assets/js/widgets.bundle.js",
"assets/js/custom/widgets.js",
"assets/js/custom/apps/chat/chat.js",
"assets/js/custom/utilities/modals/upgrade-plan.js",
"assets/js/custom/utilities/modals/create-app.js",
"assets/js/custom/utilities/modals/users-search.js"
];

modules.forEach(item => {
const script = document.createElement('script');
script.setAttribute('src', item);
document.head.appendChild(script);
})
})
</script>

For more info about the plugin initialization checkout our customization doc:
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/customization/javascript.html

Hi,

The tutorial is not for WASM.

The tutorial does not work. I report the bugs to the team.

If you can make it work, please consider doing a tutorial, making a YouTube video, or posting a template from a Visual Studio project. It would be of great help to everyone.

Greetings and thank you very much!

Arsenio, you're right. Also tried to configure it today following Lauris' suggestions. Unfortunately with no luck.

Having some step by step tutorial or VS project template would be amazing.

KeenThemes team: do you plan something like that at some point in the future?

Metronic theme is great but I'm afraid right now I need to go with "no javascript" option and script everything I need directly in .NET.

Hi,

Yes, at the moment our tutorial is a Server-Side Blazor Integration, but some steps are acceptable for WASM as well.

We will consider adding a separate WASM doc in upcoming releases.

Hi,

Please note that we only support Server Side Blazor Integration.

blazor Webassembly integration is not available at the moment.

Regards

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