# Filterbalk: Vooruitgang, Bugs, en Little Wins

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

## Inleiding

Ik heb een goede filterbalk samengesteld voor de bloglijst: taal, datumbereik, sorteren, en paginatie die pittig blijft met HTMX.

Het gaat nu dicht.Maar zoals altijd is de laatste 20% het kruidige bit: data, caches, en waarom werkt dat lokaal, maar niet na een ruil?[Als je de diepe duik met veel code en diagrammen wilt, zie:](/blog/filterbarprogressandissues)

> /blog/filterbarprogressand issues

[TOC]

## Vergeet niet dat deze site is een werk in uitvoering, dit soort dingen zal gebeuren als je eet-uw-eigen-hond voedsel!

- TL;DR
- Nieuwe filterbalk: Taal + Sorteren + Datumbereik
- HTMX gedeeltelijke swaps houden de pagina snel; back/forward werkt omdat ik altijd de bijgewerkte URL push`/blog/calendar-days`Kalender hoogtepunten komen uit een kleine
- eindpunt
- Vast: datumbereik bij het wijzigen van taal/volgorde
- Fixed: agenda niet verfrissend na HTMX swaps of thema wijzigingen

## Server caching varieert nu met alle relevante zoektoetsen

- Wat werkt goed?
- URL-eerste gedrag: Alle interacties updaten de URL; u kunt deep-linken naar een filterstatus`LinkUrl`Paginatie behoudt de huidige filters (
- is ingesteld op de 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 bereik standaardwaarden voor de huidige query waarden indien aanwezig en markeert dagen met berichten

### De bugs die ik heb gerepareerd (en nieuwe functies!)

Zichtbaarheid en inhoudscontrole

- **De grootste toevoeging: goed post visibility management:**Verborgen posten`IsHidden`: Berichten kunnen nu als verborgen gemarkeerd worden (
- **vlag) en zal niet verschijnen in lijsten**Geplande publicatie`ScheduledPublishDate`: Posts kunnen een
- **en pas na die tijd verschijnen**Gepinde posten`IsPinned`: Posten gemarkeerd met

```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);
}
```

### verschijnen altijd eerst op pagina 1 (groot voor aankondigingen)

- **Datumbereikverbeteringen`/blog/date-range`Nieuw**eindpunt
- **: Geeft de min/max data terug over alle berichten (taal-bewust) zodat de datum picker verstandige grenzen kan instellen**Hulp voor param-tags wissen`<clear-param>`: Toegevoegd

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

### tag helper om eenvoudig query parameters te wissen

- Bugfixes
  - Verliezen van het datumbereik bij het wisselen van taal of bestelling`new URL(window.location.href)`Fix: Start vanaf

```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);
});
```

- Als Flatpickr een selectie heeft, doe het dan opnieuw.
  
  - Kalender highlights niet verfrissend na HTMX swaps`fp.redraw()`Fix: Vernietig/creëer Flatpickr op init, haal dan hoogtepunten voor de zichtbare maand en aanroep`htmx:afterSwap`.

- ; ook opnieuw uitgevoerd init op
  
  - Donkere modestijlen die niet op de agenda van toepassing zijn`<html class>`Fix: observeren`fp.redraw()`en roepen

## Als het verandert.

```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
```

## Hoe de stukken praten

HTMX pagina verzoek detectie`pagerequest`De filterbalk gebruikt een aangepaste

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

header om de server te helpen een onderscheid te maken tussen volledige paginaladingen en gedeeltelijke HTMX-swaps:

> **Dit stelt de controller in staat om alleen de gedeeltelijke weergave voor HTMX-verzoeken en volledige paginaweergaven voor directe navigatie terug te geven.**Opmerking

## : De paging tag helper extensie en query parameter helder Alpine.js component verdienen hun eigen diepe duik.Ik zal deze in detail behandelen in een toekomstige post over het bouwen van herbruikbare HTMX/Alpine componenten.

- Nog te doen.
- Snelle datum voorinstellingen (Laatste 7/30 dagen, Dit jaar)
- LocalStorage-zaad voor taal

Toetsenbordondersteuning op bereik picker