Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Keen and Blazor Enhanced Navigation and


Blazor 8 comes with a feature "Enhanced navigation" which basically intercepts navigation using anchor elements and instead of a full page load, issues a fetch request with subsequent DOM diff/patch.

Blazor supports registering an event listener for that scenario which I have currently implemented as follows:

Blazor.addEventListener("enhancedload", () => {
KTComponents.init();
});


This appears to work even though it registers a ton of redundant event handlers. Especially on the body element (which I have fixed locally by creating a special eventId in util.js for the body case and checking window.KTUtilDelegatedEventHandlers for duplicates prior to registering the handlers).

Is anything else missing?


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 Oliver,

Thank you for the suggestion. We will check this initialization approach and consider implementing it for future releases.

In our current version, we handle Javascript initialization through JS interop.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I'm confused. This wasn't a suggestion but a question.



Hi,

From your post, it looks like you are trying to change our Blazor initialization flow.

Currently, we trigger initialization functions from the OnAfterRender event.

Here's an example:


protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JS.InvokeVoidAsync("KTComponents.init");
}
}


You can find full global initialization code in Starterkit/Shared/MasterInit.razor.

You can find the complete global initialization code in Starterkit/Shared/MasterInit.razor. If you're considering a different approach for initialization, you need to ensure that your function is triggered after the DOM elements are rendered.

Does your current code cause any errors?

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