projects/htmx/Readme.md
This example shows various examples on how to integrate HTMX with ASP.NET Core Minimal API. We will be using HTMX Nuget Package. We are using HTMX 2 in all samples.
This example shows all HTTP Verbs supported by HTMX.
This example shows how to access query string in all the HTTP Verbs supported by HTMX.
This example shows how to pass parameters to all supported HTTP Verbs by targeting a single input element using hx-include.
This example shows how to pass parameters (in JSON format) to all supported HTTP Verbs using hx-vals .
This example shows how to pass values via HTTP headers using hx-headers.
This example shows how to use hx-confirm to ask for user confirmation before making a request
This example shows how to use hx-prompt to ask user for a single input before making a request
This example shows how to use hx-push-url to push url into browser location history.
This example shows how to use hx-select to pick up element from the server response.
This example shows how to use hx-select with multiple selectors to pick up multiple elements from server response.
This example shows how to use hx-select-oob to pick up a specific element from server response and swap it with element of the same selection criteria.
This example demonstrates on how to show spinner indicator while waiting for AJAX requests to complete.
This example shows how to use HTMX hx-trigger="load" functionality. It will call a given url when the element is loaded.
This example shows how to use HTMX hx-trigger="load" with delay:1s event modifier and hx-swap="outerHTML" functionalities to create self updating element.
This example shows how to use HTMX event modifier once that only enable trigger to be activated one time.
This example shows how to use HTMX hx-trigger="every" that activate request every specified time (polling).
This example shows how to control where the response from the server will be swapped related to the target using hx-swap.
This example shows how to use hx-swap-oob to enable out of band swap. It is used from the server response.
This example shows how to specify the target element where the response from the server will be swapped using hx-target.
This example shows how to use hx-boost to transform HTML links and form to use AJAX request and target body tag.
This example shows how to use hx-on to respond to HTML events.
This example shows how to use hx-on to respond to HTMX events.
This example shows how to use hx-replace-url to replace the current browser location history.
This example shows how to use hx-replace-url with a custom url to replace the current browser location history.
This example shows how to use hx-sync to synchronize AJAX requests from a single element with option queue first, queue last, and queue all.
This example shows how to use hx-preserve to keep an element unchanged during HTML swap.
This example shows a very simple example on how to handle form submission using HTMX's hx-post.
This example shows a more complex example on how to handle form submission using HTMX's hx-post.
This example shows how to show a modal dialog using HTMX and Bootstrap 5.
This examples shows how to listen to htmx:configRequest event to modify parameters to be sent to the server.
This examples shows how to listen to htmx:responseError event to obtain AJAX response error information.
This example shows how to listen to htmx:afterOnLoad event, which is trigerred after the AJAX response has finished.
This example demonstrates how to use HX-Replace-Url response header to replace the current url at the browser history.
This example demonstrates how to use HX-Trigger response header to trigger a custom event at the browser.
This example demonstrates how to use HX-Trigger response header to trigger a custom event with JSON payload at the browser.
This example demonstrates how to use HX-Trigger response header to trigger multiple custom events at the browser.
This example demonstrates how to use HX-Trigger response header to trigger multiple custom events with JSON payloads at the browser.
This example demonstrates how to use HX-Retarget response header to override request's target and retarget to an element at the client using CSS selector.
This example demonstrates how to use HX-Refresh response header to instruct the web browser to refresh the page.
This example demonstrates how to use HX-Reselect response header to select which part of the response to swap using CSS selector and override hx-select in on the triggering element.