Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


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



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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(