Welcome back, htmx explorer. Today, we’re unlocking two of the most powerful tools in the htmx toolbox: hx-target and hx-swap. These are the keys to making your Razor Pages do precisely what you want without breaking a sweat.
Why Targeting and Swapping Matter
When building interactive web pages, you don’t always want to replace the entire page every time you fetch new content. Sometimes, you want to update a small part of the page, like a form or a specific component. That’s where hx-target and hx-swap come in.
Let’s break down how these features work and see some real-world use cases.
Understanding hx-target
The hx-target attribute tells htmx where to place the response from a request. By default, htmx replaces the element that triggered the request, but you can specify any element you want.
Example Usage
Imagine you have a button that fetches user details without refreshing the page.
Index.cshtml
@page
@model IndexModel
<!DOCTYPE html>
<html>
<head>
<title>htmx Targeting Demo</title>
<script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
<h1>User Details</h1>
<div id="user-info">
<button hx-get="/Index?handler=GetUser" hx-target="#user-info">Load User Info</button>
</div>
</body>
</html>
Index.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace YourNamespace.Pages;
public class IndexModel : PageModel
{
public IActionResult OnGetGetUser()
{
var userHtml = "<div><p>Name: John Doe</p><p>Age: 30</p></div>";
return Content(userHtml, "text/html");
}
}
What’s happening here? The button sends a request to /GetUser, and the result is injected into the #user-info div because of the hx-target attribute. Simple and effective.
Understanding hx-swap
Now let’s talk about hx-swap. It controls how the response is inserted into the target element. Here are your options:
outerHTML(Default): Replaces the entire target element.innerHTML: Replaces only the contents of the target element.beforebegin: Inserts content before the target element.afterbegin: Inserts content inside the target element, before existing content.beforeend: Inserts content inside the target element, after existing content.afterend: Inserts content after the target element.
Example Usage
Suppose you have a list of items you want to update without replacing the entire list.
Index.cshtml
@page
@model IndexModel
<!DOCTYPE html>
<html>
<head>
<title>htmx Swapping Demo</title>
<script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
<h1>Item List</h1>
<div id="item-list">
<button hx-get="/Index?handler=AddItem" hx-swap="beforeend" hx-target="#item-list">Add Item</button>
<div>Item 1</div>
<div>Item 2</div>
</div>
</body>
</html>
Index.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace YourNamespace.Pages;
public class IndexModel : PageModel
{
private static int _itemCount = 2;
public IActionResult OnGetAddItem()
{
_itemCount++;
var newItemHtml = $"<div>Item {_itemCount}</div>";
return Content(newItemHtml, "text/html");
}
}
In this example, hx-swap="beforeend" ensures that every time you click the button, a new item is added to the end of the list instead of replacing the entire list. That’s some serious power with minimal effort.
Use Cases for Dynamic Content Loading
The combination of hx-target and hx-swap is ideal for all kinds of scenarios, such as:
- Infinite Scrolling: Load more content when a user scrolls to the bottom of a page.
- Dynamic Forms: Adding or removing form elements without reloading the page.
- Comment Systems: Appending new comments without refreshing the comment thread.
- Real-time Updates: Swapping out parts of the UI based on live data.
Bringing It All Together
The true power of htmx lies in mixing and matching attributes to make your web apps more interactive without overloading them with client-side logic. Swapping and targeting with htmx is one of the simplest ways to improve your user experience with very little code.
Next up, we’ll be building full-fledged interactive applications where these techniques really shine. Stay tuned.