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?

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

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