Metronic Blazor WASM integration
Good evening
I've seen a number of posts around integrating Metronic V8 with Blazor WASM.
I have this working with Blazor WASM .NET 6.
I am able to provide advice should anyone still be struggling, potentially, if there is enough appetite I could create a tutorial or a demo project to share.
Let me know.
Replies (18)
please we want more focus on blazor
Hi All,
Any updates on Blazor WASM integration? Anybody got a chance to make it work?
Interaction, popups and scrollbars are not working for me.
Looks like these two js files are not executed properly.
"assets/plugins/global/plugins.bundle.js"
"assets/js/scripts.bundle.js"
Thanks.
I'd be interested in a tutorial for Blazor WASM
Hi!
Do you have an example repo by any change 
?
Iam curious how you got it working!
i was going to try to adapt it to webassembly this weekend, if you can get it working ready I would like to hear from you @Wandie 87
Hey
Following the Blazor Server implementation guide works on the most part, other than the dropdown menus.
If you manage to get them working, please let me know, I'm struggling with them currently as you can see in the discussion so far...
OK I now have the dropdowns working.
Give me a shout if you need any assistance and we can jump into a discord or something to discuss.
Hey hey! I'd appreciate some assistence here
<a>https://devs.keenthemes.com/question/blazor-wasm-ktthememode-is-not-defined</a>
Hi,
Currently, we have a Blazor Server-Side integration doc, which shows how to make a basic integration between Metronic 8 and a Blazor Server.
We will consider the addition of a separate Blazor version, but currently, our main focus is on the HTML, Vue, Angular, React, and Laravel themes.
If you have any suggestions or recommendations about current doc improvements we would appreciate hearing that.
Even following your integration guide doesn't allow the theme to work correctly.
Most of the drop down menus don't work due to having to supply css style tag for "transform:translate()" setting the x & y coordinate for menu position. At minimum this should be handled properly...
Hi,
Menus should work fine. Please make sure that you included bundled file assets/js/scripts.bundle.js.
Happy for you to tell me where I'm going wrong.
I have included:
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>and then in MainLayout.razor I am using:
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync<IJSObjectReference>("import", NavManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", NavManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));
}
}
}With this, the search dropdown in the main header works, and the expandable menus on the left menu work however, the user menu (top right clicking on the avatar), and all of the dropdowns from the multipurpose dashboard (i.e the clicks in the top right corner of the widgets) do not work.
You don't need to include these script tags since these files are loaded asynchronously inside the OnAfterRenderAsync function.
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>Please leave only code inside OnAfterRenderAsync.
Without including these then nothing that uses the JS works. Such as:
- Left menu collapse
- Left menu expandable menus
- Search menu ( within header )
The above things do work when the script tag is included & loaded by the OnAfterRenderAsync function.
Alas, the other dropdowns, such as on the Sales Statistics on the multipurpose dashboard still does not work.
Firstly please remove all theme script tags from Pages/_Layout.cshtml, only the script below must be included.
<script src="_framework/blazor.server.js"></script>The file assets/plugins/global/plugins.bundle.js and assets/js/scripts.bundle.js are loaded globaly, other theme parts which required for a separate pages and widgets must be initilized separatly in your .razor files.
Removing all of the script tags leads to none of the menus working as per my previous comment.
Also please note, this is for Blazor WASM, not Server.
With the configuration as per my previous notes, things like left menu collapse, left menu expandable menus, search header work fine. Only the other dropdowns such as Sales Statistics on the multi purpose dashboard do not work.
Assistance is appreciated.
I think if you are making Blazor WASM then you don't need to include the OnAfterRenderAsync function, just connect these scripts, I guess the problem is because you are loading the same script files two times.
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>I can't edit the original post as it throws errors on submission but additionally:
Question for the Metronic (KeenThemes) Team
When will Blazor WASM officially be supported? The vast majority of greenfield solutions built with Blazor are now using WASM rather than Blazor Server.
