How to use Hydro inside MVC view

[taublast]

All examples are just for Razor pages while readme states this is MVC/Razor compatible.

If i include inside an MVC Index.cshtml page my component like that:

<div>     
    <hydro name="Counter" />
</div>

then in browser I get something like that and click is not working:

the counter is like in example:

@model  App.Pages.Components.Counter

<div>
    Count: <strong>@Model.Count</strong>
    <button hydro-on:click="@(() => Model.Add())">
        Add
    </button>
</div>

and

using Hydro;

namespace App.Pages.Components
{
    public class Counter : HydroComponent
    {
        public int Count { get; set; }

        public void Add()
        {
            Count++;
        }
    }
}

[kjeske]

Hi! Have you added the tag helpers to your _ViewImports.cshtml file, according to the docs?

@addTagHelper *, Hydro
@addTagHelper *, {Your project assembly name}

[taublast]

Yes, i did, in [Views]/_ViewImports.cshtml

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Hydro
@addTagHelper *, App

[taublast]

There must be something "awesome" with my project..
UPDATE: I'm using controllersandviews and razorpages at the same. Created similar _ViewImports.cshtml for both folders and counter renders fine for MVC and razorpages but onclick is not attached.. Will investigate further.

[kjeske]

It looks like the tag helpers are not initialized for some reason, like _ViewImports.cshtml was ignored. Just to verify that, please add @addTagHelper *, Hydro on the top of your view Counter.cshtml.

[taublast]

Razor. Looks like now it attached but clicking does nothing, Add() is not hit in debugger and nothing happens. Sorry for the mess..

[kjeske]

I don't see the content in the head tag, which should contain:

<meta name="hydro-config" />
<script defer src="~/hydro/hydro.js" asp-append-version="true"></script>
<script defer src="~/hydro/alpine.js" asp-append-version="true"></script>

[taublast]

It was there indeed. Nevertheless i made the razor version work by adding its appropriate layout and import inside Pages. Then i cannot explain why then the MVC version started to work as well. 😂 It remains a total mystery for me what exact change made it happen.

[kjeske]

Good to hear it started to work! Thanks for taking the time to try Hydro! 😄