Blazor: How to add a page which requires initialization?
Hello,
Documentation of the Blazor Starterkit suggests that JavaScript files should be imported like this:
@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri(“/path/to/your/file.“));
}
}
}
And that where initialization is required, it should be called like this:
JS.InvokeVoidAsync("KTComponent.init");Some pages, like /apps/catalog/categories require both - loading of an external file and initialization. I've tried calling JS.InvokeVoidAsync("KTComponent.init"); right after the import (including await), but I get an error that KTComponent is undefined. I suspect this is because after import, the new symbols don't become part of the relevant scope.
How can these pages that require initialization be used with Blazor?
Replies (3)
Hi,
Yes, you can use a method described in our doc only difference is you will need to call initialization inside the file.
Another method that we are using is to include a file with an inline script tag and then initialize it inside Blazor event.
Include script tag:
<script suppress-error="BL9992" src="assets/js/custom/utilities/modals/create-app.js"></script>Initialize file:
protected override void OnAfterRender(bool firstRender){
if(firstRender){
JS.InvokeVoidAsync("KTCreateApp.init");
}
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks! I didn't know about suppress-error="BL9992". Might be worth mentioning in the docs.
Thank you for your feedback.
This is an omission, we will add this information in future updates.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
