N

Multi-target update

One request refreshes two (or more) independent regions — no page reload, no duplicated fetches.

#When to use

A mutation that affects state the user can see in several places at once. Example: completing a task should update the task list AND the "X remaining" stat card AND the chart.

#Markup

html 
<form hx-post="/tasks/@Model.Id?handler=Complete"
      hx-target="#tasks_list"
      hx-swap="outerHTML">
    <button type="submit">Mark complete</button>
</form>

<div id="tasks_list">…table…</div>
<div id="tasks_stats">…KPI cards…</div>
<div id="tasks_chart">…SVG…</div>

The form's hx-target is the primary target (#tasks_list). The other two regions are refreshed via out-of-band swaps — each fragment in the response carries hx-swap-oob="true" and htmx places it into the live DOM by id.

#Handler

The server response must contain markup for all targets — primary first, then OOB fragments:

csharp 
public async Task<IActionResult> OnPostCompleteAsync(int id, CancellationToken ct)
{
    await _tasks.CompleteAsync(id, ct);

    var dashboard = await _tasks.DashboardAsync(ct);
    return new HtmxPartialResult("_TasksRefreshWrapper", dashboard, statusCode: null);
}

Where _TasksRefreshWrapper.cshtml renders the primary partial first (matches hx-target), then OOB fragments for the other regions:

cshtml 
@model DashboardVm

@* Primary — htmx swaps this into #tasks_list (the hx-target) *@
<partial name="_TasksList" model="Model.List" />

@* Out-of-band fragments — htmx finds the matching ids and swaps in place *@
<div id="tasks_stats" hx-swap-oob="true">
    <partial name="_TasksStats" model="Model.Stats" />
</div>
<div id="tasks_chart" hx-swap-oob="true">
    <partial name="_TasksChart" model="Model.Chart" />
</div>

#When to prefer sync blocks instead

If a target should refresh on every write (not just this one), register it as a sync block via AddHtmx(o => o.RegisterSyncBlock("_NotificationsBadge")) instead. Multi-target is for this-request-only refreshes; sync blocks are for cross-cutting state.

#Related