Skip to content

Commit 6cc3edc

Browse files
dodygdodyg
committed
Add a new sample for hydro
1 parent 9b98041 commit 6cc3edc

File tree

14 files changed

+170
-2
lines changed

14 files changed

+170
-2
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ You can find samples on new features availabel in ASP.NET Core 9(3) [here](/proj
1616
## Other Samples
1717

1818
- For ATProtocol (the underlying open protocol for Bluesky) related samples, you can find them [here](https://github.com/dodyg/bluenile).
19-
- For Hydro Framework (Razor Pages compatible), you can find them [here](/projects/hydro/)(5).
19+
- For Hydro Framework (Razor Pages compatible), you can find them [here](/projects/hydro/)(6).
2020
- [Official .NET Aspire samples](https://github.com/dotnet/aspire-samples).
2121
- For Data Access samples, go to the excellent [ORM Cookbook](https://github.com/Grauenwolf/DotNet-ORM-Cookbook).
2222
- .NET team also has [a sample repository](https://github.com/dotnet/samples).

‎projects/hydro/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,8 @@
1818

1919
* [Cookies](cookies)
2020

21-
This sample shows how to set and delete a cookie from a Hydro component.
21+
This sample shows how to set and delete a cookie from a Hydro component.
22+
23+
* [Component-1](component-1)
24+
25+
This sample demonstrates how Hydro support nested components, how the data flow from parent to child, and how to communicate change from parent to child via **key** parameter.

‎projects/hydro/component-1/.vscode/settings.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.activeBackground": "#9a3acf",
4+
"activityBar.background": "#9a3acf",
5+
"activityBar.foreground": "#e7e7e7",
6+
"activityBar.inactiveForeground": "#e7e7e799",
7+
"activityBarBadge.background": "#4d3813",
8+
"activityBarBadge.foreground": "#e7e7e7",
9+
"commandCenter.border": "#e7e7e799",
10+
"sash.hoverBorder": "#9a3acf",
11+
"statusBar.background": "#7e2aac",
12+
"statusBar.debuggingBackground": "#58ac2a",
13+
"statusBar.debuggingForeground": "#15202b",
14+
"statusBar.foreground": "#e7e7e7",
15+
"statusBarItem.hoverBackground": "#9a3acf",
16+
"statusBarItem.remoteBackground": "#7e2aac",
17+
"statusBarItem.remoteForeground": "#e7e7e7",
18+
"titleBar.activeBackground": "#7e2aac",
19+
"titleBar.activeForeground": "#e7e7e7",
20+
"titleBar.inactiveBackground": "#7e2aac99",
21+
"titleBar.inactiveForeground": "#e7e7e799"
22+
},
23+
"peacock.color": "#7e2aac"
24+
}

‎projects/hydro/component-1/Pages/Components/Container.cshtml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@model Component1.Pages.Components.Container
2+
3+
<div>
4+
Container `Model.Text` property: <span style="color:red;">@Model.Text</span>
5+
<br>
6+
This button below will change the `Model.Text` property of this component to current UTC time. Both components below receive the same `Model.Text` property.<br>
7+
<button on:click="@(() => Model.Show(DateTime.UtcNow.ToString()))" class="btn btn-primary">Show</button>
8+
<div class="row mt-3">
9+
<div class="col-md-6">
10+
<div class="card">
11+
<div class="card-body">
12+
<p>This declaration of message component does not use <strong>key</strong> attribute. Without the key attribute, the modification of the parent property is not propagated to the child component.</p>
13+
<message text="@Model.Text"></message>
14+
</div>
15+
</div>
16+
</div>
17+
<div class="col-md-6">
18+
<div class="card">
19+
<div class="card-body">
20+
<p>This declaration of message component does use <strong>key</strong> attribute</p>
21+
<message text="@Model.Text" key="@Model.Text"></message>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</div>

‎projects/hydro/component-1/Pages/Components/Container.cshtml.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
using Hydro;
2+
3+
namespace Component1.Pages.Components;
4+
5+
public class Container : HydroComponent
6+
{
7+
public string Text { get; set; } = "Hello, World!";
8+
9+
public void Show(string text)
10+
{
11+
Text = text;
12+
}
13+
}

‎projects/hydro/component-1/Pages/Components/Message.cshtml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@model Component1.Pages.Components.Message
2+
3+
<div>
4+
<h1>Text Property: @Model.Text</h1>
5+
<h2>Text2 Property: @Model.Text2</h2>
6+
7+
<button on:click="@(() => Model.TriggerRender())" class="btn btn-primary">Trigger</button>
8+
</div>

‎projects/hydro/component-1/Pages/Components/Message.cshtml.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using Hydro;
2+
3+
namespace Component1.Pages.Components;
4+
public class Message : HydroComponent
5+
{
6+
public string Text { get; set; }
7+
8+
public string Text2 { get; set;}
9+
10+
public void TriggerRender()
11+
{
12+
Text2 = "Render Triggered";
13+
}
14+
}

‎projects/hydro/component-1/Pages/Index.cshtml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@page "/"
2+
@using Hydro
3+
@{
4+
Layout = "/Pages/Shared/_Layout.cshtml";
5+
}
6+
7+
<h2>This container demonstrates changing the property of the parent impacts the child components</h2>
8+
<container></container>

‎projects/hydro/component-1/Pages/Shared/_Layout.cshtml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta name="hydro-config" />
5+
<script defer src="~/hydro/hydro.js" asp-append-version="true"></script>
6+
<script defer src="~/hydro/alpine.js" asp-append-version="true"></script>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
8+
<title>Component Data Flow</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
@RenderBody()
13+
</div>
14+
<script src="/_framework/aspnetcore-browser-refresh.js"></script>
15+
</body>
16+
</html>

‎projects/hydro/component-1/Pages/_ViewImports.cshtml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@addTagHelper *, Hydro
2+
@addTagHelper *, Component1
3+
@using Component1.Pages.Components

0 commit comments

Comments
 (0)