Swap.Htmx

Out-of-Band Updates

Update multiple targets from a single request using OOB swaps

Live Demo

Click Counter
0
Last Click
Never

Click the button to see OOB updates in action

What Happens

  1. #result-area — Shows the click result (primary target)
  2. #click-counter — Increments via OOB swap
  3. #last-click — Shows timestamp via OOB swap

What is OOB?

Out-of-Band (OOB) swaps let you update multiple parts of the page from a single HTMX request. This is perfect for:

  • Updating a counter after adding an item
  • Refreshing notifications after an action
  • Showing success messages alongside main content

Controller Code

public IActionResult DoOobSwap()
{
    _clickCount++;
    
    return this.SwapResponse()
        .WithView("Patterns/_ClickResult", _clickCount)
        .AlsoUpdate("#click-counter", "Patterns/_Counter", _clickCount)
        .AlsoUpdate("#last-click", "Patterns/_LastUpdated", DateTime.Now)
        .Build();
}