Skip to content

Commit 43f7916

Browse files
dodygdodyg
committedJul 6, 2024
Add sample for hx-push-url
1 parent 92e8a04 commit 43f7916

File tree

7 files changed

+179
-3
lines changed

7 files changed

+179
-3
lines changed
 

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ You can find samples on new features availabel in ASP.NET Core 9(3) [here](/proj
3434
| [Generic Hosting](/projects/generic-host) | 9 | |
3535
| [gRPC](/projects/grpc) (including grpc-Web) | 12 | |
3636
| [Health Check](/projects/health-check) | 6 | |
37-
| [HTMX](/projects/htmx) | 18 | |
37+
| [HTMX](/projects/htmx) | 19 | |
3838
| [IHttpClientFactory](/projects/httpclientfactory) | 4 | |
3939
| [IHostedService](/projects/ihosted-service) | 2 | |
4040
| [Logging](/projects/logging) | 5 | |

‎projects/htmx/Readme.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# HTMX (18)
1+
# HTMX (19)
22

33
This example shows various examples on how to integrate [HTMX](https://htmx.org/) with ASP.NET Core Minimal API. We will be using [HTMX Nuget Package](https://www.nuget.org/packages/Htmx). We are using [HTMX 2](https://htmx.org/) in all samples.
44

@@ -32,6 +32,10 @@ This example shows various examples on how to integrate [HTMX](https://htmx.org/
3232

3333
This example shows how to use `hx-prompt` to ask user for a single input before making a request
3434

35+
* [push-url](push-url)
36+
37+
This example shows how to use `hx-push-url` to push url into browser location history.
38+
3539
## Core Attributes
3640

3741
* [trigger-load](trigger-load)
@@ -64,7 +68,7 @@ This example shows various examples on how to integrate [HTMX](https://htmx.org/
6468

6569
* [boost](boost)
6670

67-
This example shows how to use `hx-boost` to transform HTML links and form to use AJAX request and target `body` tag.
71+
This example shows how to use `hx-boost` to transform HTML links and form to use AJAX request and target `body` tag.
6872

6973
## Form
7074

‎projects/htmx/push-url/.vscode/settings.json

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

‎projects/htmx/push-url/Program.cs

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
using Htmx;
2+
using Microsoft.AspNetCore.Antiforgery;
3+
using Microsoft.AspNetCore.Mvc;
4+
5+
var builder = WebApplication.CreateBuilder();
6+
builder.Services.AddAntiforgery();
7+
var app = builder.Build();
8+
9+
app.UseAntiforgery();
10+
11+
app.MapGet("/", (HttpContext context, [FromServices] IAntiforgery anti) =>
12+
{
13+
var token = anti.GetAndStoreTokens(context);
14+
15+
var html = $$"""
16+
<!DOCTYPE html>
17+
<html>
18+
<head>
19+
<style>
20+
li{
21+
cursor:pointer;
22+
}
23+
</style>
24+
<meta name="htmx-config" content='{ "antiForgery": {"headerName" : "{{ token.HeaderName}}", "requestToken" : "{{token.RequestToken }}" } }'>
25+
</head>
26+
<body>
27+
<h1>Push URL to browser history</h1>
28+
<p>Click on the links below to see the URL change in the browser address bar.</p>
29+
<ul hx-push-url="true">
30+
<li hx-get="/htmx/get">GET</li>
31+
<li hx-post="/htmx/post">POST</li>
32+
<li hx-put="/htmx/put">PUT</li>
33+
<li hx-patch="/htmx/patch">PATCH</li>
34+
<li hx-delete="/htmx/delete">DELETE</li>
35+
</ul>
36+
<script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
37+
<script>
38+
document.addEventListener("htmx:configRequest", (evt) => {
39+
let httpVerb = evt.detail.verb.toUpperCase();
40+
if (httpVerb === 'GET') return;
41+
42+
let antiForgery = htmx.config.antiForgery;
43+
if (antiForgery) {
44+
// already specified on form, short circuit
45+
if (evt.detail.parameters[antiForgery.formFieldName])
46+
return;
47+
48+
if (antiForgery.headerName) {
49+
evt.detail.headers[antiForgery.headerName]
50+
= antiForgery.requestToken;
51+
} else {
52+
evt.detail.parameters[antiForgery.formFieldName]
53+
= antiForgery.requestToken;
54+
}
55+
}
56+
});
57+
</script>
58+
</body>
59+
</html>
60+
""";
61+
return Results.Content(html, "text/html");
62+
});
63+
64+
var htmx = app.MapGroup("/htmx").AddEndpointFilter(async (context, next) =>
65+
{
66+
if (context.HttpContext.Request.IsHtmx() is false)
67+
return Results.Content("");
68+
69+
if (context.HttpContext.Request.Method == "GET")
70+
return await next(context);
71+
72+
await context.HttpContext.RequestServices.GetRequiredService<IAntiforgery>()!.ValidateRequestAsync(context.HttpContext);
73+
return await next(context);
74+
});
75+
76+
htmx.MapGet("/get", (HttpRequest request) =>
77+
{
78+
return Results.Content($"GET => {DateTime.UtcNow}");
79+
});
80+
81+
htmx.MapPost("/post", (HttpRequest request) =>
82+
{
83+
return Results.Content($"POST => {DateTime.UtcNow}");
84+
});
85+
86+
htmx.MapDelete("/delete", (HttpRequest request) =>
87+
{
88+
return Results.Content($"DELETE => {DateTime.UtcNow}");
89+
});
90+
91+
htmx.MapPut("/put", (HttpRequest request) =>
92+
{
93+
return Results.Content($"PUT => {DateTime.UtcNow}");
94+
});
95+
96+
htmx.MapPatch("/patch", (HttpRequest request) =>
97+
{
98+
return Results.Content($"PATCH => {DateTime.UtcNow}");
99+
});
100+
101+
app.Run();

‎projects/htmx/push-url/README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# hx-push-url attribute
2+
3+
This example shows how to use `hx-push-url` to push a URL into the browser location history ([doc](https://htmx.org/attributes/hx-push-url/))
4+
5+
```html
6+
<ul hx-push-url="true">
7+
<li hx-get="/htmx/get">GET</li>
8+
<li hx-post="/htmx/post">POST</li>
9+
<li hx-put="/htmx/put">PUT</li>
10+
<li hx-patch="/htmx/patch">PATCH</li>
11+
<li hx-delete="/htmx/delete">DELETE</li>
12+
</ul>
13+
```

‎projects/htmx/push-url/push-url.csproj

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
<PropertyGroup>
3+
<TargetFramework>net8.0</TargetFramework>
4+
<ImplicitUsings>true</ImplicitUsings>
5+
</PropertyGroup>
6+
<ItemGroup>
7+
<PackageReference Include="Htmx" Version="1.8.0" />
8+
</ItemGroup>
9+
</Project>

‎projects/htmx/push-url/push-url.sln

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.5.002.0
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "push-url", "push-url.csproj", "{8B829D9F-E9BC-4257-A5E0-A55CF79AB067}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{8B829D9F-E9BC-4257-A5E0-A55CF79AB067}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{8B829D9F-E9BC-4257-A5E0-A55CF79AB067}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{8B829D9F-E9BC-4257-A5E0-A55CF79AB067}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{8B829D9F-E9BC-4257-A5E0-A55CF79AB067}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {17475240-E5ED-4809-A2B4-25A5FDDAA3BD}
24+
EndGlobalSection
25+
EndGlobal

0 commit comments

Comments
 (0)
Please sign in to comment.