# Barra del filtro: avanzamento, bug e piccole vincite

<!--category-- HTMX, ASP.NET, JavaScript -->
<datetime class="hidden">2025-11-10T14:10</datetime>

## Introduzione

Ho messo insieme una barra filtrante adeguata per l'elenco del blog: lingua, intervallo di date, ordinamento e paginazione che rimane snappy con HTMX.

Si chiude ora ma come sempre, l'ultimo 20% è la punta piccante: date, cache, e perché funziona localmente ma non dopo uno swap?[Se si desidera l'immersione profonda con un sacco di codice e diagrammi, vedere:](/blog/filterbarprogressandissues)

> /blog/filterbarprogress eissues

[TOC]

## Ricordate questo sito è un lavoro in corso, questo genere di cose accadranno quando si mangia-il vostro-proprio-cibo da cane!

- TL;DR
- Nuova barra del filtro: Lingua + Ordina + Gamma di date
- HTMX parziale swaps mantenere la pagina veloce; back/forward funziona perché ho sempre spingere l'URL aggiornato`/blog/calendar-days`I punti salienti del calendario provengono da un piccolo
- Endpoint
- Fisso: le date vengono eliminate quando si cambia lingua/ordine
- Fisso: calendario non rinfrescante dopo swap HTMX o cambiamenti di tema

## La cache del server ora varia da tutte le chiavi di interrogazione rilevanti

- Che cosa funziona bene
- Comportamento URL-first: Tutte le interazioni aggiornano l'URL; è possibile collegare in profondità a uno stato di filtro`LinkUrl`La paginazione conserva i filtri correnti (
- è impostato sul server)

```csharp
// Server: cache and vary for index
[ResponseCache(Duration = 300, VaryByHeader = "hx-request",
  VaryByQueryKeys = new[] { "page", "pageSize", nameof(startDate), nameof(endDate), nameof(language), nameof(orderBy), nameof(orderDir) },
  Location = ResponseCacheLocation.Any)]
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" },
  VaryByQueryKeys = new[] { nameof(page), nameof(pageSize), nameof(startDate), nameof(endDate), nameof(language), nameof(orderBy), nameof(orderDir) })]
public async Task<IActionResult> Index(int page = 1, int pageSize = 20, DateTime? startDate = null, DateTime? endDate = null,
  string language = MarkdownBaseService.EnglishLanguage, string orderBy = "date", string orderDir = "desc")
{
    var posts = await blogViewService.GetPagedPosts(page, pageSize, language: language, startDate: startDate, endDate: endDate);
    posts.LinkUrl = Url.Action("Index", "Blog", new { startDate, endDate, language, orderBy, orderDir });
    if (Request.IsHtmx()) return PartialView("_BlogSummaryList", posts);
    return View("Index", posts);
}
```

## Flatpickr spazia di default ai valori attuali delle query se presenti ed evidenzia i giorni con i post

### I bug che ho risolto (e le nuove funzionalità!)

Visibilità e controllo dei contenuti

- **L'aggiunta più grande: corretta gestione della visibilità post:**Posti nascosti`IsHidden`: I messaggi possono ora essere contrassegnati come nascosti (
- **bandiera) e non apparirà in elenchi**Pubblicazione programmata`ScheduledPublishDate`: I messaggi possono avere un
- **e appariranno solo dopo quel tempo**Posti bloccati`IsPinned`: Posti contrassegnati con

```csharp
// BlogService now filters appropriately
var now = DateTimeOffset.UtcNow;
postQuery = postQuery.Where(x =>
    !x.IsHidden &&
    (x.ScheduledPublishDate == null || x.ScheduledPublishDate <= now));

// Pinned posts sorted first on page 1
if (isFirstPage)
{
    postQuery = postQuery.OrderByDescending(x => x.IsPinned)
                         .ThenByDescending(x => x.PublishedDate.DateTime);
}
```

### compaiono sempre prima a pagina 1 (grande per gli annunci)

- **Miglioramenti dell'intervallo di date`/blog/date-range`Nuovo**Endpoint
- **: Restituisce le date min/max in tutti i post (language-aware) in modo che il picker della data possa impostare limiti ragionevoli**Pulisci l'helper del tag param`<clear-param>`: Aggiunto

```cshtml
<clear-param name="startDate">Clear Date</clear-param>
<clear-param all="true" exclude="language">Clear All Filters</clear-param>
```

### tag helper per cancellare facilmente i parametri della query

- Correzioni bug
  - Perdere l'intervallo di date quando si cambia lingua o ordine`new URL(window.location.href)`Corretto: inizia da

```js
langSelect.addEventListener('change', async function(){
  const u = new URL(window.location.href);
  u.searchParams.set('language', langSelect.value);
  u.searchParams.set('page','1');
  const [ob,od] = (orderSelect.value||'date_desc').split('_');
  u.searchParams.set('orderBy', ob);
  u.searchParams.set('orderDir', od);
  if(input._flatpickr && input._flatpickr.selectedDates.length===2){
    const [s,e] = input._flatpickr.selectedDates;
    u.searchParams.set('startDate', s.toISOString().substring(0,10));
    u.searchParams.set('endDate',   e.toISOString().substring(0,10));
  }
  applyNavigation(u);
});
```

- e scavalca solo i parami cambianti; se Flatpickr ha una selezione, riapplicala.
  
  - Calendar highlights not refreshing after HTMX swaps`fp.redraw()`Correggi: Distruggi/ricrea Flatpickr su init, poi prendi i punti salienti per il mese visibile e chiama`htmx:afterSwap`.

- ; anche re-run init on
  
  - Stili di modalità scura che non si applicano al calendario`<html class>`Correggi: osserva`fp.redraw()`e chiamare

## quando cambia.

```mermaid
sequenceDiagram
  participant User
  participant JS as blog-index.js
  participant HT as HTMX
  participant S as Server

  User->>JS: Change language/order or pick a date range
  JS->>JS: Update URLSearchParams, pushState
  JS->>HT: htmx.ajax('GET', /blog?...)
  HT->>S: GET /blog
  S-->>HT: HTML partial (_BlogSummaryList)
  HT-->>User: Swap #content
```

## Come parlano i pezzi

HTMX Page Request Detection Detection`pagerequest`La barra dei filtri utilizza una barra personalizzata

```csharp
public static bool IsPageRequest(this HttpRequest request)
{
    return request.Headers.ContainsKey("pagerequest") &&
           request.Headers["pagerequest"] == "true";
}
```

header per aiutare il server a distinguere tra carichi a pagina intera e swap parziali HTMX:

> **Ciò consente al controller di restituire solo la vista parziale per le richieste HTMX e le viste a pagina intera per la navigazione diretta.**Nota

## : L'estensione dell'helper del tag paging e il parametro della query più chiaro componente Alpine.js meritano un'immersione profonda che coprirò in dettaglio in un post futuro sulla costruzione di componenti HTMX/Alpine riutilizzabili.

- Ancora da fare
- Preimpostazioni rapide della data (Ultimi 7/30 giorni, Quest'anno)
- Semi di stoccaggio locale per la lingua

Supporto tastiera sul raccoglitore di gamma