Example 10
+Submit HTMX forms while the toolkit automatically supplies the verification token
+hx-post with antiforgeryThe layout configures token inclusion and the toolkit script attaches it to every HTMX request.
+Example 08
+Identify a request initiated by an hx-boost link
IsHtmxBoosted()The link is progressively enhanced and its response is placed into the result panel.
+Example 04
+Set HTMX response headers from the page handler with Response.Htmx()
The response changes the target or swap mode chosen by the triggering element.
+Prepended to top with AfterBegin swap!
"); + } + + public IActionResult OnGetRetarget() + { + Response.Htmx(h => h.Retarget("#fluent-result")); + return Content("Retargeted to #fluent-result!"); + } +} diff --git a/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/Headers.cshtml b/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/Headers.cshtml new file mode 100644 index 0000000..bf3e030 --- /dev/null +++ b/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/Headers.cshtml @@ -0,0 +1,33 @@ +@page +@model HeadersModel +@{ + ViewData["Title"] = "Request headers"; +} + +Example 03
+Define custom HTMX headers declaratively in Razor
+hx-header-*The handler reads the header and triggers two client events.
+Example 06
+Return an appropriate representation when the handler is called asynchronously or directly
+Request.IsHtmxRequest()Compare a normal browser navigation with an HTMX request to the same handler.
+IsHtmxRequest())"
+ : "Full page response. This wouldn't normally be a Content result, but demonstrates the check.");
+}
diff --git a/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/Polling.cshtml b/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/Polling.cshtml
new file mode 100644
index 0000000..94efabc
--- /dev/null
+++ b/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/Polling.cshtml
@@ -0,0 +1,32 @@
+@page
+@model PollingModel
+@{
+ ViewData["Title"] = "Polling";
+}
+
+Example 05
+Stop a repeating HTMX request from the server when a condition is reached
+HtmxResponse.StopPolling()The request is evaluated every second. The server randomly asks HTMX to stop polling.
+Example 09
+A compact baseline HTMX interaction using a Razor Page handler
+Click the button to request a fresh server-generated value.
+Example 07
+Override an element's HTMX swap strategy in the response handler
+ReswapThe trigger asks for outerHTML, but the server responds with innerHTML.
Response.Htmx(h => h.Reswap(HtmxSwap.InnerHtml))!");
+ }
+}
diff --git a/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/RouteData.cshtml b/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/RouteData.cshtml
new file mode 100644
index 0000000..fd8c136
--- /dev/null
+++ b/samples/Ramstack.HtmxToolkit.Demo/Pages/Examples/RouteData.cshtml
@@ -0,0 +1,44 @@
+@page
+@model RouteDataModel
+@{
+ ViewData["Title"] = "Route parameters";
+}
+
+Example 02
+Pass route data with individual attributes or one Razor dictionary
+hx-route-* and hx-all-route-dataBoth forms produce a typed Razor Pages URL without composing a query string manually.
+Example 01
+Generate HTMX URLs with familiar Razor Pages routing attributes
+hx-page + hx-page-handlerThe toolkit generates the request URL and uses hx-get by default.
Interactive documentation
+Explore the Ramstack.HtmxToolkit API through focused, runnable Razor Pages examples.
+Generate handler URLs declaratively.
+Pass route values without query-string assembly.
+Attach custom HTMX headers in Razor.
+Configure response directives on the server.
+Stop repeated requests from a handler.
+Detect asynchronous requests.
+Override the requested swap strategy.
+Detect links enhanced by HTMX.
+Request and swap a small response.
+Post a protected form via HTMX.
+${name}: ${message}
`); + } +})(); diff --git a/src/Ramstack.HtmxToolkit/Assets/htmx-toolkit.js b/src/Ramstack.HtmxToolkit/Assets/htmx-toolkit.js index f954ee8..2233f54 100644 --- a/src/Ramstack.HtmxToolkit/Assets/htmx-toolkit.js +++ b/src/Ramstack.HtmxToolkit/Assets/htmx-toolkit.js @@ -25,9 +25,9 @@ document._r_htmx ||= ((document, htmx) => { }); document.addEventListener("_r_proxy", e => { - for (let kvp of e.detail) + for (let kvp of e.detail.value) { htmx.trigger(e.target, kvp.key, kvp.value); + } }); - return true; })(document, htmx); diff --git a/src/Ramstack.HtmxToolkit/Assets/htmx-toolkit.min.js b/src/Ramstack.HtmxToolkit/Assets/htmx-toolkit.min.js index 8703d23..671f04a 100644 --- a/src/Ramstack.HtmxToolkit/Assets/htmx-toolkit.min.js +++ b/src/Ramstack.HtmxToolkit/Assets/htmx-toolkit.min.js @@ -1 +1 @@ -document._r_htmx||=((e,t)=>(e.addEventListener("htmx:afterOnLoad",e=>{if(e.detail.boosted){const r=(new DOMParser).parseFromString(e.detail.xhr.responseText,"text/html").querySelector("meta[name='htmx-config']");r&&(t.config.antiForgery=JSON.parse(r.content).antiForgery)}}),e.addEventListener("htmx:configRequest",e=>{if(!/^get$/i.test(e.detail.verb)){const{headerName:r,formFieldName:a,requestToken:n}=t.config.antiForgery??{};n&&!e.detail.parameters[a]&&(r?e.detail.headers[r]=n:e.detail.parameters[a]=n)}}),e.addEventListener("_r_proxy",e=>{for(let r of e.detail)t.trigger(e.target,r.key,r.value)}),!0))(document,htmx); \ No newline at end of file +document._r_htmx||=((e,t)=>(e.addEventListener("htmx:afterOnLoad",e=>{if(e.detail.boosted){const r=(new DOMParser).parseFromString(e.detail.xhr.responseText,"text/html").querySelector("meta[name='htmx-config']");r&&(t.config.antiForgery=JSON.parse(r.content).antiForgery)}}),e.addEventListener("htmx:configRequest",e=>{if(!/^get$/i.test(e.detail.verb)){const{headerName:r,formFieldName:a,requestToken:n}=t.config.antiForgery??{};n&&!e.detail.parameters[a]&&(r?e.detail.headers[r]=n:e.detail.parameters[a]=n)}}),e.addEventListener("_r_proxy",e=>{for(let r of e.detail.value)t.trigger(e.target,r.key,r.value)}),!0))(document,htmx); \ No newline at end of file diff --git a/src/Ramstack.HtmxToolkit/Ramstack.HtmxToolkit.csproj b/src/Ramstack.HtmxToolkit/Ramstack.HtmxToolkit.csproj index f9b5bec..bfb969f 100644 --- a/src/Ramstack.HtmxToolkit/Ramstack.HtmxToolkit.csproj +++ b/src/Ramstack.HtmxToolkit/Ramstack.HtmxToolkit.csproj @@ -1,6 +1,6 @@