Adding Code Examples for <form> and Response.Htmx() in Htmx.Net

Htmx.sln

@@ -1,21 +1,24 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.33516.290
+MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{A404D2D4-BFE7-4A5C-95DB-2F4BE79CAB3E}"
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "test", "test", "{81536BF5-DC4A-4ED9-956C-4333A63FD9B1}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Htmx", "src\Htmx\Htmx.csproj", "{1928D4F8-0E6F-4FC9-A7E0-003E884C1FDC}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Htmx", "src\Htmx\Htmx.csproj", "{1928D4F8-0E6F-4FC9-A7E0-003E884C1FDC}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Htmx.TagHelpers", "src\Htmx.TagHelpers\Htmx.TagHelpers.csproj", "{2198BCC6-E9FC-4BCB-9C8E-D2D4C9EB6125}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Htmx.TagHelpers", "src\Htmx.TagHelpers\Htmx.TagHelpers.csproj", "{2198BCC6-E9FC-4BCB-9C8E-D2D4C9EB6125}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Htmx.Tests", "test\Htmx.Tests\Htmx.Tests.csproj", "{F6A44600-B556-4224-9B63-0B13C0A3010C}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Htmx.Tests", "test\Htmx.Tests\Htmx.Tests.csproj", "{F6A44600-B556-4224-9B63-0B13C0A3010C}"
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "shared", "shared", "{49B8F483-7FD2-4FA0-8461-9E951574542F}"
  ProjectSection(SolutionItems) = preProject
  shared\JetBrains.Annotations.cs = shared\JetBrains.Annotations.cs
  EndProjectSection
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Sample", "test\Sample\Sample.csproj", "{38C328C0-9B25-4C87-B1C5-77FA1B562E9C}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sample", "test\Sample\Sample.csproj", "{38C328C0-9B25-4C87-B1C5-77FA1B562E9C}"
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "_", "_", "{19EE77F6-636E-4497-BF89-5F0E7B5B4616}"
  ProjectSection(SolutionItems) = preProject
@@ -45,10 +48,16 @@ Global
  {38C328C0-9B25-4C87-B1C5-77FA1B562E9C}.Release|Any CPU.ActiveCfg = Release|Any CPU
  {38C328C0-9B25-4C87-B1C5-77FA1B562E9C}.Release|Any CPU.Build.0 = Release|Any CPU
  EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
  GlobalSection(NestedProjects) = preSolution
  {1928D4F8-0E6F-4FC9-A7E0-003E884C1FDC} = {A404D2D4-BFE7-4A5C-95DB-2F4BE79CAB3E}
  {2198BCC6-E9FC-4BCB-9C8E-D2D4C9EB6125} = {A404D2D4-BFE7-4A5C-95DB-2F4BE79CAB3E}
  {F6A44600-B556-4224-9B63-0B13C0A3010C} = {81536BF5-DC4A-4ED9-956C-4333A63FD9B1}
  {38C328C0-9B25-4C87-B1C5-77FA1B562E9C} = {81536BF5-DC4A-4ED9-956C-4333A63FD9B1}
  EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {54F419A2-3076-4CF7-A7A8-7CBBB1343334}
+ EndGlobalSection
 EndGlobal

test/Sample/Pages/Forms.cshtml

@@ -0,0 +1,28 @@
+@page
+@model FormsModel
+@{
+ ViewData["Title"] = "Forms";
+}
+
+<h6>
+ Demonstrate <code>&lt;form&gt;</code> usage.
+</h6>
+<form hx-post hx-page="./Forms" hx-indicator="#login-indicator">
+ <p>
+ For username, you may input any username. <br/>
+ For password any text will get you in, except the word <code>password</code>
+ </p>
+
+ <div>
+ Username: <input asp-for="Username"/> <br/>
+ Password: <input asp-for="Password" type="password"/>
+ </div>
+
+ <div>
+ <p id="login-indicator" class="htmx-indicator">Logging in...</p>
+
+ <button type="submit">Login</button>
+ </div>
+
+ @Html.AntiForgeryToken()
+</form>

test/Sample/Pages/Forms.cshtml.cs

@@ -0,0 +1,35 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using System.ComponentModel.DataAnnotations;
+using Htmx;
+
+namespace Sample.Pages
+{
+ public class FormsModel : PageModel
+ {
+ [BindProperty]
+ [Required, Display(Name = "Username", Prompt = "(Any username will do)")]
+ public string? Username { get; set; }
+
+ [BindProperty]
+ [Required, Display(Name = "Password", Prompt = "(Anything but the word password)")]
+ public string? Password { get; set; }
+
+ public async Task<IActionResult> OnPost()
+ {
+ // simulating waiting...
+ await Task.Delay(1000);
+
+ var isValid = Password != "password";
+
+ if (!isValid)
+ {
+ return Content("Username or password is wrong", "text/html");
+ }
+ else
+ {
+ return Content($"Welcome {Username}!", "text/html");
+ }
+ }
+ }
+}

test/Sample/Pages/Response.cshtml

@@ -0,0 +1,31 @@
+@page
+@model ResponseModel
+@{
+ ViewData["Title"] = "Response.Htmx()";
+}
+
+<h6>
+ Demonstrate <code>Response.Htmx(headers => headers.WithTrigger())</code> usage.
+</h6>
+<div>
+ <p>
+
+ </p>
+
+ <form hx-post hx-page="./Response" hx-swap="none" hx-indicator="#sending-indicator">
+ <textarea asp-for="Message"></textarea>
+ <br/>
+
+ <p id="sending-indicator" class="htmx-indicator">Sending...</p>
+ <button type="submit">
+ Send to server
+ </button>
+ </form>
+</div>
+
+<script type="text/javascript">
+ window.addEventListener("showMessage", evt => {
+ let message = evt.detail.message;
+ alert('This event is triggered by the server to client side. Message: ' + message)
+ });
+</script>

test/Sample/Pages/Response.cshtml.cs

@@ -0,0 +1,25 @@
+using Htmx;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using System.ComponentModel.DataAnnotations;
+
+namespace Sample.Pages
+{
+ public class ResponseModel : PageModel
+ {
+ [BindProperty]
+ [Required, Display(Name = "Message", Prompt = "Write anything")]
+ public string? Message { get; set; }
+
+ public async Task OnPost()
+ {
+ // Pretend the server is doing something heavy
+ await Task.Delay(500);
+
+ Response.Htmx(headers =>
+ {
+ headers.WithTrigger("showMessage", new { message = Message });
+ });
+ }
+ }
+}

test/Sample/Pages/Shared/_Layout.cshtml

@@ -31,6 +31,12 @@
  <li class="nav-item">
  <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
  </li>
+ <li class="nav-item">
+ <a class="nav-link text-dark" asp-area="" asp-page="/Forms">Forms</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link text-dark" asp-area="" asp-page="/Response">Response.Htmx()</a>
+ </li>
  <li class="nav-item">
  <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
  </li>

test/Sample/Sample.csproj

@@ -15,6 +15,7 @@
 
  <ItemGroup>
  <ProjectReference Include="..\..\src\Htmx.TagHelpers\Htmx.TagHelpers.csproj" />
+ <ProjectReference Include="..\..\src\Htmx\Htmx.csproj" />
  </ItemGroup>
 
 </Project>