# PagingTagHelper v1.0.0: Enterprise-Ready Pagination für modernen ASP.NET Core
2025-11-07T19:12
> HINWEIS: KOMING SOON, nur den letzten Schliff zu setzen. [Folgen Sie dem GitHub! ](https://github.com/scottgal/mostlylucid.pagingtaghelper).
**Das ist nur, um Ihnen zu zeigen, dass ich mit dieser Kontrolle Fortschritte mache! Es wird das Warten wert sein.**
## Einleitung
Nach monatelanger Entwicklung und wertvollem Feedback aus der Community (5.7k+ Downloads!) freue ich mich, bekannt zu geben, dass die PagingTagHelper-Bibliothek die Version 1.0.0 erreicht hat. Dies ist nicht nur eine Versionsnummernumerierung – sie stellt eine vollständige Reifung der Bibliothek mit Funktionen dar, die sie für reale Produktionsanwendungen geeignet machen.
Wenn Sie diese Serie verfolgt haben, werden Sie sich erinnern, dass wir mit [Bare-Knochen-Paging](https://www.mostlylucid.net/blog/pagingtaghelper), hinzugefügt [sortierbare Kopfzeilen](https://www.mostlylucid.net/blog/pagingtaghelperpt11), und extrahiert [Seitengrößenregler](https://www.mostlylucid.net/blog/pagingtaghelperpt2). Version 1.0.0 nimmt alles, was wir gelernt haben, und fügt kritische Unternehmensfunktionen hinzu:
- **Fortsetzung Token Pagination** für NoSQL-Datenbanken (Cosmos DB, DynamoDB, Azure Table Storage)
- **Mehrsprachige Lokalisierung** Unterstützung von 8 Sprachen aus dem Kasten
- **Flexible JavaScript-Modi** von HTMX zum Null-JavaScript
- **Reine Rückenwind-Ansichten** ohne DaisyUI Abhängigkeiten
- **Intelligente URL-Parameter-Reservierung** über die gesamte Navigation
- **HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,0,4 HTMX 2.0,4 HTMX 2.0,4 HTMX 2.0,4** Upgrade mit Rückwärtskompatibilität
Lassen Sie uns in jede dieser Funktionen eintauchen und sehen, wie sie zusammenarbeiten, um eine wirklich flexible Paginationslösung zu schaffen.
[](https://www.nuget.org/packages/mostlylucid.pagingtaghelper)
[](https://www.nuget.org/packages/mostlylucid.pagingtaghelper)
[TOC]
## Fortsetzung Token-Pagination {#Continuation-Token-Pagination}
Traditionelle Pagination funktioniert wunderbar mit SQL-Datenbanken, wo Sie leicht `SKIP` und `TAKE` Datensätze. Aber was passiert, wenn Sie mit NoSQL-Datenbanken wie Cosmos DB, DynamoDB oder Azure Table Storage arbeiten? Diese Datenbanken unterstützen keine Offset-basierte Paginierung – stattdessen verwenden sie **Fortsetzungs-Token**.
### Token-Based Pagination verstehen {#Token-Based-Pagination verstehen}
Hier ist, wie Fortsetzung Token Pagination unterscheidet sich von traditionellen Pagination:
```mermaid
graph TD
A[Traditional Paging] --> B[Page 1: OFFSET 0 LIMIT 10]
A --> C[Page 2: OFFSET 10 LIMIT 10]
A --> D[Page 3: OFFSET 20 LIMIT 10]
E[Token-Based Paging] --> F[Page 1: No token]
F --> G[Returns: Data + Token_A]
G --> H[Page 2: Token_A]
H --> I[Returns: Data + Token_B]
I --> J[Page 3: Token_B]
style A stroke:#0ea5e9,stroke-width:3px
style E stroke:#ec4899,stroke-width:3px
```
**Traditionelles Paging:**
- Sie geben genau an, welche Datensätze abgerufen werden sollen (OFFSET/LIMIT)
- Sie können zu jeder Seite direkt springen
- Datenbank muss durch alle vorherigen Datensätze scannen
**Token-Based Paging:**
- Datenbank gibt ein undurchsichtiges Token zurück, das "wo weitergeht"
- Token-Format ist datenbankspezifisch und für den Client undurchsichtig
- Vorwärtsnavigation ist natürlich, Rückwärtsnavigation erfordert Token Geschichte
### Continuation Pager Implementation {#Continuation-Pager-Implementation}
Das neue `` tag helper macht die Umsetzung token-basierte pagination einfach. Zuerst, erstellen Sie ein Modell, das implementiert `IContinuationPagingModel`:
```csharp
public class ProductPagingViewModel : IContinuationPagingModel
{
public string? NextPageToken { get; set; }
public bool HasMoreResults { get; set; }
public int PageSize { get; set; } = 25;
public int CurrentPage { get; set; } = 1;
public Dictionary? PageTokenHistory { get; set; }
public ViewType ViewType { get; set; } = ViewType.TailwindAndDaisy;
// Your actual data
public List Products { get; set; } = new();
}
```
Die Schnittstelle ist minimal, aber leistungsfähig. Schauen wir uns an, was jede Eigenschaft tut:
- `NextPageToken`: Das Token zum Abrufen der nächsten Seite (von Ihrer Datenbank bereitgestellt)
- `HasMoreResults`: Boolean zeigt an, ob es mehr Seiten gibt
- `PageSize`: Artikel pro Seite
- `CurrentPage`: Anzeige-nur Seitennummer für UI
- `PageTokenHistory`: Wörterbuch-Mapping-Seitennummern zu Tokens für die Rückwärtsnavigation
- `ViewType`: Welche CSS-Frameworks für das Rendering zu verwenden sind
Nun lassen Sie uns eine Controller-Aktion implementieren, die Cosmos DB-Stil Pagination simuliert:
```csharp
[Route("Products")]
public async Task Products(
int currentPage = 1,
int pageSize = 25,
string? pageToken = null,
string? tokenHistory = null)
{
// Simulate fetching from Cosmos DB
var cosmosResults = await _cosmosService.GetProductsAsync(
pageSize: pageSize,
continuationToken: pageToken
);
// Deserialize token history for backward navigation
var history = string.IsNullOrEmpty(tokenHistory)
? new Dictionary()
: JsonSerializer.Deserialize>(tokenHistory)
?? new Dictionary();
// Store current token in history
if (!string.IsNullOrEmpty(pageToken))
{
history[currentPage] = pageToken;
}
var viewModel = new ProductPagingViewModel
{
CurrentPage = currentPage,
PageSize = pageSize,
NextPageToken = cosmosResults.ContinuationToken,
HasMoreResults = cosmosResults.HasMoreResults,
PageTokenHistory = history,
Products = cosmosResults.Items
};
if (Request.IsHtmx())
{
return PartialView("_ProductList", viewModel);
}
return View(viewModel);
}
```
Diese Implementierung zeigt, wie Token-History eine Rückwärtsnavigation ermöglicht. Ohne sie würde die Fortsetzungs-Token-Pagination nur "Next"-Buttons unterstützen. Durch die Pflege eines Wörterbuchs von Seiten-zu-Token-Mappings können wir sowohl die "Vorherige" als auch die "Next"-Navigation unterstützen.
Hier ist der Fluss von Token Akkumulation visualisiert:
```mermaid
sequenceDiagram
participant User
participant Controller
participant Database
participant TokenHistory
User->>Controller: Request Page 1 (no token)
Controller->>Database: Query with no token
Database-->>Controller: Data + Token_A
Controller->>TokenHistory: Store Token_A for page 1
Controller-->>User: Display Page 1
User->>Controller: Request Page 2 (Token_A)
Controller->>Database: Query with Token_A
Database-->>Controller: Data + Token_B
Controller->>TokenHistory: Add Token_B for page 2
Controller-->>User: Display Page 2
User->>Controller: Request Page 1 (retrieve from history)
Controller->>TokenHistory: Get Token for Page 1
Controller->>Database: Query with Token_A
Database-->>Controller: Data + Token_A
Controller-->>User: Display Page 1
```
In Ihrer Razor-Ansicht ist die Verwendung des Continuation Pagers einfach:
```razor
@model ProductPagingViewModel
Product
Company
Price
@foreach (var product in Model.Products)
{
@product.Name
@product.CompanyName
$@product.Price.ToString("N2")
}
```
Der Tag-Helfer automatisch:
- Serialisiert die Token-Historie in Abfrageparameter
- Erstellt Navigations-URLs mit entsprechenden Tokens
- Deaktiviert "Vorherig" wenn auf Seite 1
- Deaktiviert "Weiter" wenn `HasMoreResults` ist falsch
- Bewahrt alle anderen Abfrageparameter (Suche, Filter, etc.)
### Token History for Backward Navigation {#token-history}
Das Genie des Token-History-Ansatzes ist, dass es völlig optional ist. Wenn Sie nur "Next" Navigation (unendliche Scroll, zum Beispiel) benötigen, können Sie Token-History vollständig ignorieren:
```razor
```
Dies macht nur einen "Next"-Button ohne Seitenanzeige oder Historienverwaltung.
Für die volle Navigation wird die Token-History automatisch als JSON im Query-String serialisiert. So sieht eine URL mit Token-History aus:
```
/Products?currentPage=3&pageSize=25&pageToken=abc123&tokenHistory=%7B%221%22%3A%22xyz789%22%2C%222%22%3A%22abc123%22%7D
```
Das `tokenHistory` Parameter enthält das kodierte Wörterbuch und macht die Rückwärtsnavigation nahtlos.
### Nummerierte Seitennavigation {#nummerierte Seitennavigation}
Eine der wichtigsten UX-Verbesserungen im Continuation Pager ist **nummerierte Seitentasten**. Während Sie vorwärts navigieren, zeigt der Pager anklickbare Seitennummern für alle besuchten Seiten an:
```
Initial page 1: [Next →]
After next click: [← Prev] [1] [2 active] [3 disabled] [Next →]
After next click: [← Prev] [1] [2] [3 active] [4 disabled] [Next →]
Click page 2: [← Prev] [1] [2 active] [3] [4 disabled] (no next - not visited yet)
```
Dies bietet traditionelle Pagination UX unter Beibehaltung Token-basierte Backend-Architektur. Die Implementierung speichert Token für jede besuchte Seite, so dass direkte Navigation auf jede zuvor aufgerufene Seite.
**Das Wachstum in der Geschichte begrenzen:**
Um eine uneingeschränkte Speichernutzung zu verhindern, setzen Sie `max-history-pages` (Standard: 20):
```razor
```
Wenn das Limit erreicht ist, werden die ältesten Seiten-Token automatisch getrimmt.
### Kritisch: Abfrageparameter Erhaltung {#query-parameter-reservation}
**Dies ist das wichtigste Merkmal der Continuation Pager-Implementierung.**
Kontinuationstoken sind nur mit demselben Abfragekontext gültig (Filter, Arten, Suchen), der sie erzeugt hat. Mit einem Token mit unterschiedlichen Abfrageparametern werden falsche Daten zurückgegeben oder komplett fehlgeschlagen.
Der Continuation Pager bewahrt automatisch ALLE Abfrageparameter außer seinen eigenen:
```html
/Products?category=electronics&brand=acme&minPrice=100
/Products?category=electronics&brand=acme&minPrice=100¤tPage=2&pageToken=xyz123&tokenHistory={...}
```
Sie können dieses Verhalten bei Bedarf deaktivieren:
```razor
```
Aber das ist **stark entmutigt** Es sei denn, Sie sind absolut sicher, dass Ihre Token nicht vom Abfragekontext abhängen.
**Warum das so wichtig ist:**
Beispiel der Kosmos-DB:
```csharp
// Page 1 with filter
var query = container.GetItemQueryIterator(
"SELECT * FROM c WHERE c.category = 'electronics'",
continuationToken: null
);
var response = await query.ReadNextAsync();
// Returns: Products + Token_A
// Page 2 with SAME filter - Token_A is valid
var query2 = container.GetItemQueryIterator(
"SELECT * FROM c WHERE c.category = 'electronics'",
continuationToken: Token_A // ✅ Works!
);
// Page 2 with DIFFERENT filter - Token_A is invalid
var query3 = container.GetItemQueryIterator(
"SELECT * FROM c WHERE c.category = 'computers'",
continuationToken: Token_A // ❌ Wrong results or error!
);
```
Die automatische Parameterkonservierung des Continuation Pagers sorgt dafür, dass Token immer mit ihrem ursprünglichen Abfragekontext verwendet werden.
---
## Lokalisierungsunterstützung {#lokalisierungs-support}
Moderne Anwendungen dienen globalen Zielgruppen, und Paginationssteuerungen müssen die Sprache Ihrer Benutzer sprechen. Version 1.0.0 enthält umfassende Lokalisierungsunterstützung direkt in die Bibliothek integriert.
### Eingebaute Sprachen {#eingebaute Sprachen}
Die Bibliothek wird mit Übersetzungen für 8 Sprachen ausgeliefert:
Sprache
|------|----------|
| `en` Englisch (Standard)
| `de` Deutsch (Deutsch)
| `es` Spanisch (Español)
| `fr` Französisch (Français)
| `it` Italienisch (Italiano)
| `pt` Portugiesisch (Português)
| `ja` Japanisch (日本語)
| `zh-Hans` Chinesisch Vereinfacht ( ‐ 中文)
Der gesamte Text ist lokalisiert, einschließlich:
- Vorherige/Nächste/Erste/Letzte Schaltflächenbeschriftungen
- Zusammenfassung der Seite ("Zeige X zu Y von Z-Elementen")
- ARIA-Etiketten für die Zugänglichkeit
- Bezeichnung der Seitengröße ("Artikel pro Seite")
Das Lokalisierungssystem wird von `.resx` Ressourcen-Dateien, so dass es einfach, Ihre eigenen Sprachen. Alle Ressourcen-Dateien sind in `mostlylucid.pagingtaghelper/Resources/`.
### Lokalisierung Verwendung {#lokalisierung-useage}
Lokalisierung ist einfach. Fügen Sie einfach die `language` Attribut:
```razor
```
Damit wird der gesamte Text in deutscher Sprache wiedergegeben:
```html
Zeige 1 bis 10 von 256 Einträgen
```
Stellen Sie für dynamische Sprachumschaltungen basierend auf Benutzereinstellungen die Sprache in Ihrem Controller ein:
```csharp
public async Task Products(
int page = 1,
int pageSize = 10,
string language = "en")
{
var pagingModel = await GenerateModel(page, pageSize);
ViewBag.SelectedLanguage = language;
return View(pagingModel);
}
```
Erstellen Sie dann in Ihrer Ansicht einen Sprachauswahlschalter:
```razor
@{
var selectedLanguage = ViewBag.SelectedLanguage as string ?? "en";
var languages = new Dictionary
{
{ "en", "English" },
{ "de", "German" },
{ "es", "Spanish" },
{ "fr", "French" },
{ "it", "Italian" },
{ "pt", "Portuguese" },
{ "ja", "Japanese" },
{ "zh-Hans", "Chinese" }
};
}
```
Sie können auch einzelne Text-Strings überschreiben, während Sie noch von der Lokalisierung für andere Elemente profitieren:
```razor
```
Das `PagingLocalizer` Service behandelt kulturspezifische Formatierung automatisch. Wenn Sie einen ungültigen Sprachcode übergeben, fällt es anmutig auf Englisch zurück.
Für die HTMX-Integration möchten Sie die Sprache über Anfragen hinweg erhalten:
```html
```
Dadurch wird sichergestellt, dass HTMX-Teilansichtsupdates die ausgewählte Sprache beibehalten.
---
## JavaScript Modes {#javascript-modes}
Eine der wichtigsten Verbesserungen in v1.0.0 ist die Einführung von flexiblen JavaScript-Modi. Zuvor hatten Sie eine boolesche Wahl: `use-htmx="true"` oder `use-htmx="false"`Jetzt haben Sie fünf verschiedene Modi, die jeweils für verschiedene Szenarien optimiert sind.
### Verfügbare Modes {#available-modes}
Hier ist die vollständige Aufschlüsselung der JavaScript-Modi:
```mermaid
graph TD
A[JavaScript Modes] --> B[HTMX]
A --> C[HTMXWithAlpine]
A --> D[Alpine]
A --> E[PlainJS]
A --> F[NoJS]
B --> B1[Uses HTMX for partial updates]
B --> B2[hx-get, hx-target, hx-swap]
C --> C1[HTMX + Alpine.js directives]
C --> C2[Enhanced interactivity]
D --> D1[Pure Alpine.js]
D --> D2[x-data, @click handlers]
E --> E1[Vanilla JavaScript]
E --> E2[onclick handlers]
F --> F1[Zero JavaScript]
F --> F2[Standard anchor links & forms]
```
Lassen Sie uns jeden Modus in Aktion sehen:
**1. HTMX-Modus (Standard)**
```razor
```
Renders:
```html
```
Perfekt für dynamische Seiten-Updates ohne volle Seiten-Reloads. Dies ist der empfohlene Modus für moderne ASP.NET Core-Anwendungen.
**2. HTMXWithAlpine-Modus**
```razor
```
Renders:
```html
```
Kombiniert HTMX zur Navigation mit Alpine.js für zusätzliche clientseitige Interaktivität. Verwenden Sie dies, wenn Sie reaktive UI-Elemente neben der Pagination benötigen (Ladeindikatoren, Animationen, Client-seitige Validierung).
**3. Alpenmodus**
```razor
```
Renders:
```html
```
Pure Alpine.js ohne HTMX. Nützlich, wenn Sie bereits Alpine.js verwenden, aber keine HTMX-Abhängigkeiten wollen.
**4. EinfachJS-Modus**
```razor
```
Renders:
```html
```
Keine Framework-Abhängigkeiten, nur Vanille JavaScript. Dieser Modus enthält auch einen Helfer für Seitengrößenänderungen:
```razor
@Html.PageSizeOnchangeSnippet()
```
Dies injiziert das notwendige JavaScript für die Bearbeitung von Seitengröße Dropdown-Änderungen ohne HTMX.
**5. NoJS-Modus**
```razor
```
Renders:
```html
Next ›
```
Null JavaScript erforderlich. Perfekt für:
- Anforderungen an die Zugänglichkeit
- Szenarien zur schrittweisen Verbesserung
- Umgebungen, in denen JavaScript deaktiviert ist
- SEO-kritische Seiten, auf denen Sie eine crawlerfreundliche Navigation wünschen
Die Schönheit dieses Systems ist, dass **alle Modi bewahren Ihre vorhandenen Abfrageparameter**Ob Sie nach Kategorie filtern, suchen oder sortieren, die Paginierung hält Ihren Zustand automatisch aufrecht.
### Migration aus Use-htmx {#Migration aus Use-htmx}
Für Rückwärtskompatibilität, die alte `use-htmx` Attribut funktioniert noch:
```razor
```
Ich empfehle jedoch die Migration zu den neuen `js-mode` Attribut für Klarheit:
```razor
```
---
## AnzeigenVerbesserungen {#viewtype-enhancements}
Version 1.0.0 führt zwei wichtige ViewType-Additionen ein, die sich mit gängigen Real-World-Szenarien befassen.
### Reiner Rückenwind {#reiner Rückenwind}
Zuvor, wenn Sie wollte TailwindCSS Styling, haben Sie die `TailwindAndDaisy` Ansicht, die DaisyUI Komponenten verwendet. Dies ist großartig, wenn Sie bereits DaisyUI verwenden, aber was, wenn Sie reinen Tailwind ohne die DaisyUI Abhängigkeit wollen?
Eingabe `ViewType.Tailwind`:
```razor
```
Dies macht nur mit Standard Tailwind Utility-Klassen:
```html