Getting Started, cant get it working

[mxmissile]

There is probably a basic concept I am missing, but clicking the Add Invoice button does nothing, followed the Getting Started guide, here is my view:

@page "/"
@model IndexModel

@{
    Layout = "../UI/Layouts/MainLayout";
}

<h1>hello world</h1>

<button class="btn btn-primary" hydro-on:click="@(() => Model.Add())">
    <span class="loading loading-spinner loading-sm spinner" aria-hidden="true"></span>
    Add invoice
</button>

And here is my model:

  public class IndexModel : HydroComponent
  {
      public void OnGet()
      {
      }

      [SkipOutput]
      public void Add()
      {
          throw new NotImplementedException();
          //Location(Url.Page("/Invoices/Add"));
      }
  }

The Add() method is not firing. hydro.js and alpine.js are being loaded.

[kjeske]

Hi! Try to separate your page and the Hydro component:

AddTest.cshtml.cs

public class AddTest : HydroComponent
{
    [SkipOutput]
    public void Add()
    {
        throw new NotImplementedException();
        //Location(Url.Page("/Invoices/Add"));
    }
}

AddTest.cshtml

@model AddTest

<div>
  <h1>hello world</h1>

  <button class="btn btn-primary" hydro-on:click="@(() => Model.Add())">
      <span class="loading loading-spinner loading-sm spinner" aria-hidden="true"></span>
      Add invoice
  </button>
</div>

Index.cshtml.cs:

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

Index.cshtml

@page "/"
@model IndexModel

@{
    Layout = "../UI/Layouts/MainLayout";
}

<hydro name="AddTest" />