htmx Demos

Modern Web Interactivity with HTMX: An Overview of the ASP.NET Core Demos

In the world of modern web development, there's often a perceived requirement to use heavy JavaScript frameworks to achieve a smooth, reactive user experience. However, htmx offers a powerful alternative by allowing you to access modern browser features directly from HTML, without sacrificing the simplicity of server-side rendering with ASP.NET Core Razor Pages.

This project serves as a comprehensive workshop for understanding how HTMX can transform traditional web applications. Below is an overview of the key demos included in this collection and the reasoning behind each pattern.

What is HTMX?

HTMX is a library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML using attributes. It follows the "Hypermedia as the Engine of Application State" (HATEOAS) principle, where the server returns HTML fragments rather than JSON. This reduces complexity by keeping your state and logic on the server.

Why HTMX with ASP.NET Core?

ASP.NET Core Razor Pages is a natural fit for HTMX. Since HTMX expects HTML fragments, you can use Partial Views and Named Page Handlers to return exactly what the client needs, avoiding full page reloads and keeping your C# code clean and centralized.

The Demo Collection

1. Data Interaction Patterns

These demos showcase how to handle common data-driven tasks with minimal overhead:

• Active Search: Triggers a search request as the user types, updating the results table in real-time.
• Bulk Update: Demonstrates selecting multiple rows to perform a collective action, like updating status or deleting.
• Click To Edit / Edit Row: Implements inline editing patterns where a row or a detail view toggles between "view" and "edit" modes without a page refresh.
• Delete Row: Shows how to remove data from the UI and server with a simple AJAX request and smooth CSS transitions.

2. Advanced Loading Techniques

Improve perceived performance by loading only what is necessary:

• Lazy Loading: Defers the loading of heavy components (like charts) until after the initial page shell is rendered.
• Infinite Scroll & Click To Load: Alternatives to traditional pagination that provide a seamless "feed-like" experience for large datasets.
• Progress Bar: Handles long-running server tasks by polling for status updates and updating a visual progress indicator.

3. Enhanced UI Components

Bringing desktop-like interactivity to the browser:

• Animations: Shows how to use CSS transitions with HTMX to create smooth UI updates, such as fading out deleted elements or animating color changes.
• Dialogs (Browser, UIKit, Custom): Explore three ways to handle modals—using native browser alerts, framework-specific components, or fully custom HTML/CSS modals.
• Tabs: Implements a tabbed interface where content is swapped dynamically, reducing the initial payload.
• Inline Validation: Provides immediate feedback on form fields (e.g., "Email already exists") as the user moves between inputs.
• Drag & Drop Sortable: Integrates with libraries like SortableJS to allow reordering of lists, with the new order saved back to the server.
• Keyboard Shortcuts: Demonstrates how to trigger HTMX actions using global or context-sensitive key presses.

The Purpose of These Demos

The goal of this workshop is to prove that you don't always need a SPA. By leveraging HTMX, you can:

1. Reduce Complexity: Eliminate the need for complex state management on the frontend.
2. Stay in C#: Keep your business logic in your Razor Page handlers.
3. Improve Performance: Send only the HTML that changes, reducing bandwidth and improving responsiveness.

Explore the sidebar to dive into each demo!