Issue with Blazor Server after integration
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.
https://drive.google.com/drive/folders/1X5s7lo2C4adP-e4wSGQGy3GdQbAAQDkT?usp=sharing
I used gulp to build the assets. Let me know if you need any other information.
I still got the following error when importing the datatables.bundle.js file:
await jsRuntime.InvokeAsync
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.
https://drive.google.com/drive/folders/1X5s7lo2C4adP-e4wSGQGy3GdQbAAQDkT?usp=sharing
I used gulp to build the assets. Let me know if you need any other information.
Replies (6)
Hi,
Docs show how you can connect the main script and plugin files and get started with the layout.
Other js theme parts used for page content must be initialized separately inside your .razor files.
You can read more about js usage in the official doc: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0
Docs show how you can connect the main script and plugin files and get started with the layout.
Other js theme parts used for page content must be initialized separately inside your .razor files.
You can read more about js usage in the official doc: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0
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:
await jsRuntime.InvokeAsync("import", NavigationManager.ToAbsoluteUri("assets/plugins/custom/datatables/datatables.bundle.js"));
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:
await jsRuntime.InvokeAsync
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)
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)
Could you please tell me do you managed to setup a layout with script and plugins bundled files as shown in the doc?
As I see you are currently trying to load a full bundled file in your .razor component, could you please try to trigger a separate function?
For example, to init chart widget-1 you need to trigger the initChart function from file charts/widget-1.js.
As I see you are currently trying to load a full bundled file in your .razor component, could you please try to trigger a separate function?
For example, to init chart widget-1 you need to trigger the initChart function from file charts/widget-1.js.
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.
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.
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.
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
