Skip to content

Hydro

Create .NET apps with SPA feeling without JS

Bring stateful and reactive components to ASP.NET Core without writing JavaScript

Hydro

Quick example: binding

razor
<!-- NameForm.cshtml -->

@model NameForm

<div>
  <input asp-for="Name" hydro-bind:keydown>
  <div>Hello @Model.Name</div>
</div>
<!-- NameForm.cshtml -->

@model NameForm

<div>
  <input asp-for="Name" hydro-bind:keydown>
  <div>Hello @Model.Name</div>
</div>
c#
// NameForm.cs

public class NameForm : HydroComponent
{
    public string Name { get; set; }
}
// NameForm.cs

public class NameForm : HydroComponent
{
    public string Name { get; set; }
}

Quick example: validation

razor
<!-- NameForm.cshtml -->

@model NameForm

<form hydro-on:submit="@(() => Model.Save())">
  <input asp-for="Name" hydro-bind>
  <span asp-validation-for="Name"></span>
  
  <button type="submit">Save</button>
  
  @if (Model.Message != null)
  {
    <div>@Model.Message</div>
  }
</form>
<!-- NameForm.cshtml -->

@model NameForm

<form hydro-on:submit="@(() => Model.Save())">
  <input asp-for="Name" hydro-bind>
  <span asp-validation-for="Name"></span>
  
  <button type="submit">Save</button>
  
  @if (Model.Message != null)
  {
    <div>@Model.Message</div>
  }
</form>
c#
// NameForm.cs

public class NameForm : HydroComponent
{
    [Required, MaxLength(50)]
    public string Name { get; set; }
    
    public string Message { get; set; }
    
    public void Save()
    {
        if (!Validate())
        {
            return;
        }
        
        Message = "Success!";
        Name = "";
    }
}
// NameForm.cs

public class NameForm : HydroComponent
{
    [Required, MaxLength(50)]
    public string Name { get; set; }
    
    public string Message { get; set; }
    
    public void Save()
    {
        if (!Validate())
        {
            return;
        }
        
        Message = "Success!";
        Name = "";
    }
}

Quick example: calling actions

razor
<!-- Counter.cshtml -->

@model Counter

<div>
  Count: @Model.Count
  
  <button hydro-on:click="@(() => Model.Add(10))">
    Add
  </button>
</div>
<!-- Counter.cshtml -->

@model Counter

<div>
  Count: @Model.Count
  
  <button hydro-on:click="@(() => Model.Add(10))">
    Add
  </button>
</div>
c#
// Counter.cs

public class Counter : HydroComponent
{
    public int Count { get; set; }
    
    public void Add(int value)
    {
        Count += value;
    }
}
// Counter.cs

public class Counter : HydroComponent
{
    public int Count { get; set; }
    
    public void Add(int value)
    {
        Count += value;
    }
}