I followed the Blazor Server instructions and got my code running. Nothing was working on the dashboard on Demo20 so I moved all javascript imports from the body tag in the HTML to the "OnAfterRenderAsync" on the MainLayout.razor file (as indicated on the blazor guide).
I still got the following error when importing the datatables.bundle.js file: await jsRuntime.InvokeAsync("import", NavigationManager.ToAbsoluteUri("assets/plugins/custom/datatables/datatables.bundle.js"));
Error: Microsoft.JSInterop.JSException: undefined has no properties @https://localhost:7299/assets/plugins/custom/datatables/datatables.bundle.js:12:1237627
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at WebApp.Shared.MainLayout.OnAfterRenderAsync(Boolean firstRender) in
Attached an image of how my html code looks (_Layout.cshtml), the MainLayout.razor file and the error.
I’m getting this error on the apps/ecommerce/catalogs/products template: Error: Microsoft.JSInterop.JSException: $.fn.dataTable is undefined @https://localhost:7299/assets/plugins/custom/datatables/datatables.bundle.js:8:2231
All my errors are related to the datatables script, which I’m importing like this on the razor file:
Thanks for your reply, and I understand that. I get the error when initializing the scripts needed for the dashboards. Under the page razor file I try to initialize the page specific scripts found on the html, but I get the error I mentioned in the original post:
Error: Microsoft.JSInterop.JSException: undefined has no properties @https://localhost:7299/assets/plugins/custom/datatables/datatables.bundle.js:12:1237627
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at WebApp.Shared.MainLayout.OnAfterRenderAsync(Boolean firstRender)
Hello, I have issues even on layout, if you try a blazor server project with new .Net 6 template you can't even complete the tutorial. Btw I managed to get things works with no errors on browser console, but seems like events on metronic template are not working, for example the user menu on the upper right corner simply is not showing when you click on it, without any errors. If you comment out the blazor.server.js script everything is working. Even calling manually KTApp.init() has no effect, nothing works while the blazor.server.js script is there. I am really frustated, I'd like to use metronic 8 with blazor (.Net 6) but i can't get things working.
The issue you describe is with all dropdowns. The click event adds some style tag and a css class of "show".
You can manually hook up methods to handle this for you, but it's a bit of a clunky work around...
i.e a click event on the user menu (top right), and a method to handle the click event to apply the class & style tags with a ternary operator. The main challenge with this method is to calculate the z-index values for the position of the menu on the page.
It would be a lot smoother should Metronic properly support Blazor.