Invoke JS from inside MVC views with Hydro component

[taublast]

First would like to thank the author for this awesome library, it feels like fresh air to start coding with Blazor-like tech inside an mvc app.

I'm trying to invoke JS to scroll to top of the page after I navigated (using Hydro) without page reload to another section.

In the docs I don't see much.

Tried to use Client.Invoke("onAfterNavigated()"); here and there but no luck, well, nothing happens. Maybe this works in Razor Pages but not for Controllers with views?

A workaround could be to somehow detect in DOM that it was a Hydro navigation event. If I attach anobserver with JS I'm getting all the DOM changes coming not only from Hydro..

[kjeske]

Thank you!

When it comes to the scrolling it should work out-of-the-box due to this line.

This is how the navigation action looks like:

public void Go()
{  
    Location(Url.Action("Index", "MyController"));
}

And BTW, also the JS invocation should work, when you do it like that:

<button type="button" hydro-on:click="@(() => Model.Client.Invoke("alert()"))">
  Show alert
</button>

Let me know if it worked.

[taublast]

Hi
Thank you for the prompt answer!

When I "navigate using Hydro" in this specific case it's the component that rebuilds itself with a new screen, without using Location().
And the scroll position stays the same indeed, while visually we have a new screen built with a component and that screen was somewhere deeper than <body> inside some other wrapper.
So the need for me here to be able to execute JS to scroll to top after Hydro finished rendering the new screen.

JS invocation is not really working from inside Hydro. Why?

hydro-on:click="@(() => Model.Client.Invoke("alert()"))"

is translated to

hydro-on:click="alert()"

this works, and we could avoid writing Model.Client.Invoke here.

Once we replace this code with hydro-on:click="@(() => Model.ExecuteCode())" having

        public void ExecuteCode()
        {
            Client.Invoke("alert()");
        }

it shows that the JS is not executed in browser, when the wrapper code is executed on server.

Maybe we could fix this like this: when Client.Invoke is executed on server:

1. queue those orders and pass the ordered queue as payload once hydro requests the state from server
2. re-render in browser, execute queued JS.

This could also fix #49 the "Maybe hydro should have some kind of mechanism for executing javascript as part of the request".

At the same time I just found a workaround, thanks to your tip at this line.

I have added some "native events", to be consumed in JS to respond to Hydro activities.

What I have so far:

    <script>


        document.addEventListener('HydroLocation', function (event) {
            
            const { url, selector, push, payload } = event.detail;
            
            console.log("HydroLocation:", event.detail);


        });

        document.addEventListener('HydroUpdate', function (event) {

            const { componentId, componentName, url, type } = event.detail;
            
            console.log("HydroUpdate: ", event.detail);

        });

        document.addEventListener('HydroRedirect', function (event) {

            const { url } = event.detail;
            
            console.log("HydroRedirect: ", event.detail);

        });

        document.addEventListener('HydroComponentInit', function (event) {

            const { component } = event.detail;
            
            console.log("HydroComponentInit: ", event.detail);

        });
    </script>

This way I can scroll to top when I get a nice HydroUpdate checking it comes from KbDisplayComponent. This still remains a workaround though, as would indeed prefer it to be ordered by the component itself.

Example of native events incoming:

• 1 and 2 these is the page rendering at the first time, initializing 2 component it has
• 3 and 4 these are two times we navigated inside the KbDisplayComponent component (well, no Location() here we just created manually different screens)
• 5 we called hydro Location() to open a different view for the knowledge base article

I could create a PR if this is to interest.

[kjeske]

Thanks for a nice investigation. Those native Hydro events in JS look cool! There is something a bit similar that might be helpful here without additional implementation. You can dispatch an event in Hydro action and listen to it later in JS.

Event:

public record ClientResetScroll;

In hydro action:

DispatchGlobal(new ClientResetScroll());

In your JS file:

document.addEventListener('global:ClientResetScroll', function () {
  window.scrollTo(0, 0);
});

So basically all the global events dispatched in Hydro are also dispatched on the document in JS.

Another thing that might be helpful here is AlpineJs' init directive:

The following code you can put to your page and once it's loaded, the code in x-init will be executed once.

<div x-init="window.scrollTo(0, 0)"></div>

Such snippets can be implemented later also as Hydro views, so you might use them in the code like:

<scroll-to-top />

Was it helpful?

[taublast]

Yes indeed, that DispatchGlobal(anything) looks like the first workaround to try for anything related to client-server!

Also the <div x-init="window.scrollTo(0, 0)"></div> is a very helpful trick.

Do you think it would be worth implementing a JS execution that was ordered on server? Maybe even taking a path toward a simple DispatchGlobal(new ExecuteJs(string)) from a Client.Invoke on server?..

[taublast]

I wrote an implementation for this, as I was really needing it. :)

#54

Overall I'm super happy with this, I can now order JS execution from inside the server component code.

Also solves that #49 "can't find a way to execute javascript from .net".

Explanation:

Added new HydroComponent method ExecuteJs. Point is the data is tight to the component and not to the Client so I cannot use Client.Invoke here to achieve that.

We have 2 main channels to render/deliver component data: static and online.

A. Online is used when we update the component, here we can send component-related data (scripts in this case) with request headers. The HydroComponentUpdate native event is invoked here.

B. Static is used when the component is delivered along with the page content, would it be the initial page load or a partial page content load with Location(). The HydroComponentInit native event is invoked here.

Inside the hydro.js:

• Around the HydroComponentUpdate event we check if script data was sent with headers, and we execute them if any.
• Around the HydroComponentInit event we check if script data was embedded along with component HTML, and we execute them if any.

On server: inside the HydroComponent it's the same logic, for online rendering we send scripts with headers and for static rendering, we embed scripts inside component HTML to be executed later by hydro.js

What is also nice here, I think, is that we enhance the channel of communication server=>client to be used for more similar cases should they be needed.

[kjeske]

Thank you very much for PR! :) That's very impressive how good overview you already have about Hydro's internals. I will review it soon more closely after I'm done with some other bug fixes/improvements I have on the current list.

[kjeske]

Fixed