forked from dodyg/practical-aspnetcore
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
180 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| { | ||
| "workbench.colorCustomizations": { | ||
| "activityBar.activeBackground": "#0c5dc8", | ||
| "activityBar.background": "#0c5dc8", | ||
| "activityBar.foreground": "#e7e7e7", | ||
| "activityBar.inactiveForeground": "#e7e7e799", | ||
| "activityBarBadge.background": "#f669a6", | ||
| "activityBarBadge.foreground": "#15202b", | ||
| "commandCenter.border": "#e7e7e799", | ||
| "sash.hoverBorder": "#0c5dc8", | ||
| "statusBar.background": "#094798", | ||
| "statusBar.debuggingBackground": "#985a09", | ||
| "statusBar.debuggingForeground": "#e7e7e7", | ||
| "statusBar.foreground": "#e7e7e7", | ||
| "statusBarItem.hoverBackground": "#0c5dc8", | ||
| "statusBarItem.remoteBackground": "#094798", | ||
| "statusBarItem.remoteForeground": "#e7e7e7", | ||
| "titleBar.activeBackground": "#094798", | ||
| "titleBar.activeForeground": "#e7e7e7", | ||
| "titleBar.inactiveBackground": "#09479899", | ||
| "titleBar.inactiveForeground": "#e7e7e799" | ||
| }, | ||
| "peacock.color": "#094798" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| using Htmx; | ||
| using Microsoft.AspNetCore.Antiforgery; | ||
| using Microsoft.AspNetCore.Mvc; | ||
|
|
||
| var builder = WebApplication.CreateBuilder(); | ||
| builder.Services.AddAntiforgery(); | ||
| var app = builder.Build(); | ||
|
|
||
| app.UseAntiforgery(); | ||
|
|
||
| app.MapGet("/", (HttpContext context, [FromServices] IAntiforgery anti) => | ||
| { | ||
| var token = anti.GetAndStoreTokens(context); | ||
| var html = $$""" | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| li{ | ||
| cursor:pointer; | ||
| } | ||
| </style> | ||
| <meta name="htmx-config" content='{ "antiForgery": {"headerName" : "{{ token.HeaderName}}", "requestToken" : "{{token.RequestToken }}" } }'> | ||
| </head> | ||
| <body> | ||
| <h1>htmx:afterOnLoad</h1> | ||
| <p>Click on the below links to see the response</p> | ||
| <ul> | ||
| <li id="get-trigger" hx-get="/htmx">GET</li> | ||
| <li id="post-trigger" hx-post="/htmx">POST</li> | ||
| <li id="put-trigger" hx-put="/htmx">PUT</li> | ||
| <li id="patch-trigger" hx-patch="/htmx">PATCH</li> | ||
| <li id="delete-trigger" hx-delete="/htmx"'>DELETE</li> | ||
| </ul> | ||
| <script src="https://unpkg.com/[email protected]" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script> | ||
| <script> | ||
| document.addEventListener("htmx:afterOnLoad", (evt) => { | ||
| let li = evt.detail.elt; | ||
| alert(li.id); | ||
| }); | ||
|
|
||
| document.addEventListener("htmx:configRequest", (evt) => { | ||
| // This is for the anti-forgery token | ||
| let httpVerb = evt.detail.verb.toUpperCase(); | ||
| if (httpVerb === 'GET') return; | ||
| let antiForgery = htmx.config.antiForgery; | ||
| if (antiForgery) { | ||
| // already specified on form, short circuit | ||
| if (evt.detail.parameters[antiForgery.formFieldName]) | ||
| return; | ||
| if (antiForgery.headerName) { | ||
| evt.detail.headers[antiForgery.headerName] | ||
| = antiForgery.requestToken; | ||
| } else { | ||
| evt.detail.parameters[antiForgery.formFieldName] | ||
| = antiForgery.requestToken; | ||
| } | ||
| } | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| """; | ||
| return Results.Content(html, "text/html"); | ||
| }); | ||
|
|
||
| var htmx = app.MapGroup("/htmx").AddEndpointFilter(async (context, next) => | ||
| { | ||
| if (context.HttpContext.Request.Method == "GET") | ||
| return await next(context); | ||
|
|
||
| await context.HttpContext.RequestServices.GetRequiredService<IAntiforgery>()!.ValidateRequestAsync(context.HttpContext); | ||
| return await next(context); | ||
| }); | ||
|
|
||
| htmx.MapGet("/", (HttpRequest request) => | ||
| { | ||
| if (request.IsHtmx() is false) | ||
| return Results.Content(""); | ||
|
|
||
| return Results.Content($"GET => {DateTime.UtcNow}"); | ||
| }); | ||
|
|
||
| htmx.MapPost("/", (HttpRequest request) => | ||
| { | ||
| if (request.IsHtmx() is false) | ||
| return Results.Content(""); | ||
|
|
||
| return Results.Content($"POST => {DateTime.UtcNow}"); | ||
| }); | ||
|
|
||
| htmx.MapDelete("/", (HttpRequest request) => | ||
| { | ||
| if (request.IsHtmx() is false) | ||
| return Results.Content(""); | ||
|
|
||
| return Results.Content($"DELETE => {DateTime.UtcNow}"); | ||
| }); | ||
|
|
||
| htmx.MapPut("/", (HttpRequest request) => | ||
| { | ||
| if (request.IsHtmx() is false) | ||
| return Results.Content(""); | ||
|
|
||
| return Results.Content($"PUT => {DateTime.UtcNow}"); | ||
| }); | ||
|
|
||
| htmx.MapPatch("/", (HttpRequest request) => | ||
| { | ||
| if (request.IsHtmx() is false) | ||
| return Results.Content(""); | ||
|
|
||
| return Results.Content($"PATCH => {DateTime.UtcNow}"); | ||
| }); | ||
|
|
||
| app.Run(); | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| # Listen to htmx:afterOnLoad event | ||
|
|
||
| This example shows how to listen to `htmx:afterOnLoad` ([doc](https://htmx.org/events/#htmx:afterOnLoad)). | ||
|
|
||
| > This event is triggered after an AJAX onload has finished. Note that this does not mean that the content has been swapped or settled yet, only that the request has finished. | ||
| ```js | ||
| document.addEventListener("htmx:afterOnLoad", (evt) => { | ||
| let li = evt.detail.elt; | ||
| alert(li.id); | ||
| }); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <Project Sdk="Microsoft.NET.Sdk.Web"> | ||
| <PropertyGroup> | ||
| <TargetFramework>net8.0</TargetFramework> | ||
| <ImplicitUsings>true</ImplicitUsings> | ||
| </PropertyGroup> | ||
| <ItemGroup> | ||
| <PackageReference Include="Htmx" Version="1.8.0" /> | ||
| </ItemGroup> | ||
| </Project> |