Paning टैग मदद v1. 0. 0: आधुनिक एनईएसई.

Friday, 07 November 2025

गौर कीजिए: पूरा दिन खत्म होने पर ध्यान दीजिए । Gikh पर चलो! .

यह सिर्फ आप सभी को दिखाने के लिए है मैं इस नियंत्रण के साथ प्रगति कर रहा हूँ! यह इंतजार के लायक होगा.

परिचय

एवोल्यूशन के महीनों और महत्वपूर्ण प्रतिक्रियाओं के बाद (5.7k+k+ डाउनलोड!), मैं घोषणा करने के लिए उत्सुक हूँ कि Pidider सहायता लाइब्रेरी संस्करण 1 पर पहुँचा है.

आप इस श्रृंखला का पालन किया गया है, आप याद है हम के साथ शुरू किया जाएगा एकसार एनवायरनमेंट - begin{ vlinelineजोड़ा गया छांटे शीर्ष, और निकाला पृष्ठ आकार नियंत्रण. संस्करण 1. 0 हमने सीखा है सब कुछ लेता है और महत्वपूर्ण उत्पादन विशेषताएँ जोड़ता है:

सक्रियीकरण के लिए जारी करें कोई एसक्यूएल डाटाबेस के लिए (कोमोएसी डीबी, डीनामोडीबी, फिल्टरिंग तालिका भंडार)
बहु- वर्गीकृत स्थानीयीकरण बक्स में से 8 भाषाओं का समर्थन करें
सख्त जावास्क्रिप्ट मोड एचएमएमएक्स से शून्य- जावा स्क्रिप्ट में
शुद्ध फ़्लिला दृश्य गुलबहार बिना
स्मार्ट यूआरएल पैरामीटर प्रीवेशन सभी नेविगेशन के पार
एचएसएमएक्स 2. 4 टिक सुसंगतता के साथ उन्नत करें

चलो इन गुणों में से प्रत्येक में कटौती करते हैं और देखते हैं कि कैसे वे एक वास्तव में सहवासिक समाधान बनाने के लिए एक साथ काम करते हैं।

अंश को जारी रखने के लिए त्रुटि

पारंपरिक परीक्षण एसक्यूएल डाटाबेस के साथ उत्कृष्ट रूप से काम करता है जहाँ आप आसानी से कर सकते हैं SKIP और TAKE रिकॉर्ड. लेकिन क्या होता है जब आप कोमोट डीबी, DyymaDB, या डीएक्रिंग टेबल भंडार की तरह नी डाटाबेस के साथ काम कर रहे हैं? इन डाटाबेस ऑफसेट- आधारित प्रिवेंशन का समर्थन नहीं करते हैं, इसके बजाय, वे इस्तेमाल करते हैं चिह्नों को चिह्नित करें.

MSACKT-ओन-क्लोरेशन

यहाँ कैसे जारी टोकन पार करना पारंपरिक panceing से भिन्न है:

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

पारंपरिक प्राथमिकता:

आप वास्तव में निर्दिष्ट करते हैं कि कौन सा रिकार्ड प्राप्त किया जाना है (ओएफएफ2/LILLINT)
आप सीधे किसी पृष्ठ पर कूद सकते हैं
डाटाबेस को पिछले सभी पिछले रिकार्डों के माध्यम से स्कैन करना चाहिए

परन- बेसिंग:

डाटाबेस का एक अपारदर्शी टोकन बताता है "कहाँ जारी" का प्रतिनिधित्व करता है
MAM प्रारूप डाटाबेस विशेष और अपारदर्शी है क्लाइंट को
आगे का नेविगेशन अक्षम है, पीछे- पीछे का नेविगेशन को इतिहास की आवश्यकता है

पुष्टिकरण पृष्ठ कार्यान्वयन {#ary- प्रबंधक- प्रोग्रेसन}

नया <continuation-pager> टैग मदद से चिह्नों को सीधे ही लागू किया जा सकता है. प्रथम, एक मॉडल बनाएँ जो लागू करता है IContinuationPagingModel:

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<int, string>? PageTokenHistory { get; set; }
    public ViewType ViewType { get; set; } = ViewType.TailwindAndDaisy;

    // Your actual data
    public List<Product> Products { get; set; } = new();
}

इंटरफेस न्यूनतम है लेकिन शक्तिशाली. चलो हर संपत्ति क्या करता है पर देखते हैं:

NextPageToken: अगले पृष्ठ को प्राप्त करने के लिए (आपके डाटाबेस द्वारा समर्थित)
HasMoreResults: यदि अधिक पृष्ठों हैं तो इसका प्रदर्शन करने के लिए बूलिए रूप से प्रदर्शित करें
PageSize: प्रति पृष्ठ वस्तुएँ
CurrentPageसिर्फ यूआई के लिए प्रदर्शक पृष्ठ संख्या
PageTokenHistory: घड़ी भर के लिए चिह्नों को चिह्नों के रूप में दिखाएँ
ViewType: अनुवाद के लिए कौन सा सीएसएस फ्रेमवर्क इस्तेमाल करने के लिए

अब एक नियंत्रक क्रिया लागू करें जो कोकूके डीबी- शैली का प्रस्ताव रखता है:

[Route("Products")]
public async Task<IActionResult> 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<int, string>()
        : JsonSerializer.Deserialize<Dictionary<int, string>>(tokenHistory)
          ?? new Dictionary<int, string>();

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

यह कार्यान्वयन दिखाता है कि कैसे चिन्हित इतिहास सक्षम करता है. इसके बिना, Contation सिर्फ "अगला" बटन को समर्थन देता है. पृष्ठ-to-tes के शब्दकोश को बनाए रखने के द्वारा, हम दोनों " पिछला" तथा "अगला" नेविगेशन का समर्थन कर सकते हैं.

यहाँ संकेत इकट्ठा करने वाले चित्र का प्रवाह है:

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

अपने Razor दृश्य में, Contation पृष्ठ का उपयोग करना सरल है:

@model ProductPagingViewModel

<div id="product-container">
    <table class="table">
        <thead>
            <tr>
                <th>Product</th>
                <th>Company</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var product in Model.Products)
            {
                <tr>
                    <td>@product.Name</td>
                    <td>@product.CompanyName</td>
                    <td>[email protected]("N2")</td>
                </tr>
            }
        </tbody>
    </table>

    <continuation-pager
        model="Model"
        htmx-target="#product-container"
        show-page-number="true"
        show-pagesize="true" />
</div>

टैग सहायक स्वचालित:

क्वैरी पैरामीटर में चिह्न इतिहास को सीरियल करता है
संकेतक को उचित संकेतों के साथ बनाता है
पृष्ठ 1 पर " पिछला" अक्षम करें
जब "अगला" अक्षम करें HasMoreResults गलत है
सभी अन्य क्वैरी पैरामीटरों को सुरक्षित रखता है (उदा, फिल्टर, आदि.)

पीछे की ओर नेविगेशन के लिए के लिए इतिहास

"अगला" नेविगेशन (उदाहरण के लिए, उदाहरण के लिए) आप इतिहास को पूरी तरह से नज़रअंदाज़ कर सकते हैं:

<continuation-pager
    model="Model"
    enable-token-accumulation="false"
    show-page-number="false" />

यह सिर्फ "अगला" बटन को किसी पृष्ठ सूचक या इतिहास प्रबंधन के साथ अनुवाद करता है.

पूर्ण नेविगेशन के लिए, चिह्न इतिहास स्वचालित रूप से क्वैरी वाक्यांश में JSON के रूप में कैद किया गया है. यहाँ क्या एक यूआरएल चिह्न इतिहास की तरह दिखता है:

/Products?currentPage=3&pageSize=25&pageToken=abc123&tokenHistory=%7B%221%22%3A%22xyz789%22%2C%222%22%3A%22abc123%22%7D

वह tokenHistory पैरामीटर में अंतर्निर्मित शब्दकोश है, जो पीछे का नेविगेशन समुद्री स्तर बना सकता है.

संख्या पृष्ठ नेविगेशन

एक सबसे महत्वपूर्ण यूएक्स सुधार जो कि सहेजे गए पृष्ठ में है पृष्ठ बटनों की संख्या. आगे बढ़ते क्रम में, पृष्ठर प्रदर्शित करने के लिए सभी पृष्ठ क्रमांक:

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)

यह पारंपरिक ट्रेडिशन यूएक्स प्रदान करता है चिन्हित करता है चिह्नों को चिन्हित करता है. प्रत्येक पृष्ठ के लिए कार्यान्वयन विवरण देता है, जो कि पहले पहुँच पृष्ठ पर है.

इतिहास वृद्धि को सीमित करना:

विशाल स्मृति प्रयोग से रोकने के लिए, सेट max-history-pages (डिफ़ॉल्ट: 20):

<continuation-pager
    model="Model"
    max-history-pages="50"
    show-page-number="true" />

जब सीमा पहुँच जाती है, तब सबसे पुराना पृष्ठ चिन्ह स्वचालित रूप से प्रमाणित होते हैं ।

गंभीर: क्वैरी पैरामीटरPervence

यह चलते हुए पृष्ठ कार्यान्वयन का सबसे महत्वपूर्ण विशेषता है.

सूचना चिह्न सिर्फ एक ही क्वैरी संदर्भ के साथ वैध हैं (fers, क़िस्म, खोज) जो उन्हें उत्पन्न करता है. भिन्न क्वैरी पैरामीटर के साथ एक टोकन का उपयोग करने से गलत डाटा वापस आएगा या पूरी तरह से असफल.

जारी रखने वाले पेजर - स्वचलित सभी क्वैरी पैरामीटरों को संरक्षित करता है:

<!-- URL with filters -->
/Products?category=electronics&brand=acme&minPrice=100

<!-- After clicking Next -->
/Products?category=electronics&brand=acme&minPrice=100&currentPage=2&pageToken=xyz123&tokenHistory={...}

<!-- All filters preserved! Token is valid because query context matches. -->

यदि आवश्यक हो तो आप इस बर्ताव को अक्षम कर सकते हैं:

<continuation-pager
    model="Model"
    preserve-query-parameters="false" />

लेकिन यह है तीव्र निराशा जब तक आप पूरी तरह से यकीन कर रहे हैं अपने चिह्नों प्रश्न संदर्भ पर निर्भर नहीं है.

यह बात क्यों:

कोस डिबी उदाहरण:

// Page 1 with filter
var query = container.GetItemQueryIterator<Product>(
    "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<Product>(
    "SELECT * FROM c WHERE c.category = 'electronics'",
    continuationToken: Token_A  // ✅ Works!
);

// Page 2 with DIFFERENT filter - Token_A is invalid
var query3 = container.GetItemQueryIterator<Product>(
    "SELECT * FROM c WHERE c.category = 'computers'",
    continuationToken: Token_A  // ❌ Wrong results or error!
);

जारी रखने वाले पृष्ठ का स्वचालित पैरामीटर बचाव यह सुनिश्चित करता है कि चिह्न हमेशा अपने मूल क्वेरी संदर्भ में प्रयोग में लिए जाते हैं.

स्थानीयकरण समर्थन {# signature- समर्थन}

आधुनिक अनुप्रयोग वैश्विक दर्शकों के लिए सेवा करते हैं, और pridion नियंत्रण आपके उपयोक्ता की भाषा को बोलने की जरूरत है. संस्करण 1 में व्यापक स्थानीयीकरण समर्थन को लाइब्रेरी में बनाया गया है.

अंतर्निर्मित भाषा {# 19-in}

पुस्तकालयों में 8 भाषाओं के लिए अनुवाद होते हैं:

BAR ZLACLLLLLLLLLCL |------|----------| | en सरलीकृत अंग्रेजी (डिफ़ॉल्ट) 2002- 2003 | de ज्यार्जियाई जर्मन (डिस्कसच) 2002- 2005 | es लिथुआनियाई स्पेनी (कान्या) औऐल | fr फ्रेंच फ्रांसीसी (Fancios) दिखाने के लिए (Fukraine) | it सर्बियाई इतालवी (आर्टियनो) (maukraine. kgm) | pt मार्बल पुर्तगाली (पोर्टकुगल्गाइस) Name | ja शोपन जापानी (सरल) japan. kgm | zh-Hans सरलीकृत चीनी सरल (सरल)

सभी पाठ स्थानीय हैं, जैसे:

पिछला/ अगला/ पहला/ अंतिम बटन लेबल
पृष्ठ सारांश पाठ (" Z मद के Y पर एक्स दिखाएँ)
पहुँच के लिए एशिया लेबल
पृष्ठ आकार लेबल ("इसे प्रति पृष्ठ")

स्थानीयीकरण सिस्टम द्वारा नियंत्रित किया गया है .resx संसाधन फ़ाइलें, आपके अपने भाषाओं को जोड़ने के लिए आसान बना सकते हैं. सभी संसाधन फ़ाइलें भीतर हैं mostlylucid.pagingtaghelper/Resources/.

स्थानीयीकरण उपयोग

स्थानीयीकरण का उपयोग सीधा है । language गुण:

<paging
    model="Model"
    language="de"
    show-summary="true"
    first-last-navigation="true" />

यह इस अनुवाद में जर्मन भाषा में सभी पाठ का अनुवाद करता है:

<!-- Previous button -->
<button>‹ Vorherige</button>

<!-- Summary -->
<div class="text-sm text-gray-600">
    Zeige 1 bis 10 von 256 Einträgen
</div>

<!-- Next button -->
<button>Nächste ›</button>

उपयोक्ता वरीयता पर आधारित गतिशील भाषा स्विच के लिए, आपके नियंत्रण में भाषा सेट:

public async Task<IActionResult> Products(
    int page = 1,
    int pageSize = 10,
    string language = "en")
{
    var pagingModel = await GenerateModel(page, pageSize);
    ViewBag.SelectedLanguage = language;
    return View(pagingModel);
}

फिर अपने दृश्य में एक भाषा चयनक बनाना:

@{
    var selectedLanguage = ViewBag.SelectedLanguage as string ?? "en";
    var languages = new Dictionary<string, string>
    {
        { "en", "English" },
        { "de", "German" },
        { "es", "Spanish" },
        { "fr", "French" },
        { "it", "Italian" },
        { "pt", "Portuguese" },
        { "ja", "Japanese" },
        { "zh-Hans", "Chinese" }
    };
}

<select onchange="window.location.href='/Products?language=' + this.value">
    @foreach (var lang in languages)
    {
        <option value="@lang.Key" selected="@(lang.Key == selectedLanguage)">
            @lang.Value
        </option>
    }
</select>

<paging
    model="Model"
    language="@selectedLanguage"
    link-url="/Products" />

आप अन्य तत्वों के लिए अभी भी स्थानीयीकरण से लाभ प्राप्त कर सकते हैं जब आप अपने पाठ वाक्यांश को भी ओवरराइड कर सकते हैं:

<paging
    model="Model"
    language="ja"
    previous-page-text="戻る"
    next-page-text="次へ"
    summary-template="全{TotalItems}件中 {StartItem}～{EndItem}件を表示" />

वह PagingLocalizer सेवा संस्कृति के विशिष्ट फ़ॉर्मेटिंग स्वचालित संभालता है. यदि आप एक अवैध भाषा कोड पास करते हैं तो यह सहज रूप से अंग्रेज़ी में वापस आता है.

HMAX एकीकरण के लिए, आप निवेदन के दौरान भाषा को सुरक्षित रखना चाहते हैं:

<script>
    htmx.on('htmx:configRequest', function(event) {
        if (event.detail.path.includes('/Products')) {
            event.detail.parameters.language = '@selectedLanguage';
        }
    });
</script>

यह सुनिश्चित करता है कि HMMMMMMMMMMMMMMMS सेवा वर्तमान चुनी गई भाषा अद्यतन को बनाए रखता है.

जावास्क्रिप्ट मोड्स {jaseks जावास्क्रिप्ट- modes}

v1 में सबसे महत्वपूर्ण सुधार. 0 में से एक है जावा स्क्रिप्ट मोड की परिचय. पहले, आपके पास एक बुलियन विकल्प था: use-htmx="true" या use-htmx="false". अब आपके पास पाँच अलग अलग अलग - अलग मोड हैं, और अलग - अलग घटनाओं के लिए हर स्तर बनाए गए हैं ।

उपलब्ध मोड

यहाँ जावास्क्रिप्ट मोड्स पूरी तरह से विभाजित हैं:

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]

चलो हर मोड को क्रिया में देखते हैं:

1. HMMX मोड (डिफ़ॉल्ट)

<paging
    model="Model"
    js-mode="HTMX"
    htmx-target="#results-container" />

रेंडर:

<button hx-get="/Products?page=2" hx-target="#results-container" hx-swap="outerHTML">
    Next ›
</button>

पूर्ण पृष्ठ को फिर से लोड किए बिना गतिशील पृष्ठ अद्यतन के लिए सही. यह आधुनिक एनईएससी अनुप्रयोग के लिए अनुशंसित मोड है.

2. एटीएम अचूक मोड के साथ

<paging
    model="Model"
    js-mode="HTMXWithAlpine"
    htmx-target="#results-container" />

रेंडर:

<button
    x-data
    hx-get="/Products?page=2"
    hx-target="#results-container"
    hx-swap="outerHTML">
    Next ›
</button>

अतिरिक्त क्लाएंट के लिए नेविगेशन के लिए HMMMMX संयोजन. इसका प्रयोग करें जब आपको प्रिसाइडिंग यूआई तत्वों को पार करने की जरूरत होती है जैसे कि prounding के साथ (लोड, एनीमेशन, ग्राहक के साथ वैध).

3 अटूट विश्‍वास

<paging
    model="Model"
    js-mode="Alpine" />

रेंडर:

<button
    x-data
    @click="window.location.href = '/Products?page=2'">
    Next ›
</button>

बिना HMMMX. उपयोगी जब आप पहले से ही एक अमिट्स का उपयोग कर रहे हैं, लेकिन HMMMX निर्भरता नहीं चाहते.

4.JS मोड

<paging
    model="Model"
    js-mode="PlainJS" />

रेंडर:

<button onclick="window.location.href = '/Products?page=2'">
    Next ›
</button>

कोई फ्रेमवर्क निर्भरता, सिर्फ वैनीला जावास्क्रिप्ट. इस मोड में पृष्ठ आकार के लिए एक सहायक भी शामिल है:

@Html.PageSizeOnchangeSnippet()

यह बिना स्क्रीन्स के परिवर्तनों को हैंडल करने के लिए आवश्यक जावास्क्रिप्ट को बाहर करता है.

5.JS मोड

<paging
    model="Model"
    js-mode="NoJS" />

रेंडर:

<!-- Navigation uses standard anchor links -->
<a href="/Products?page=2">Next ›</a>

<!-- Page size uses a form with submit button -->
<form method="get" action="/Products">
    <input type="hidden" name="page" value="1" />
    <select name="pageSize" onchange="this.form.submit()">
        <option value="10">10</option>
        <option value="25" selected>25</option>
        <option value="50">50</option>
    </select>
    <noscript>
        <button type="submit">Update</button>
    </noscript>
</form>

शून्य जावास्क्रिप्ट आवश्यक है. इसके लिए बिल्कुल सही:

पहुँच आवश्यकताएँ
प्रगतिशील सुधार - स्थिति
वातावरण जहाँ जावास्क्रिप्ट अक्षम है
भौगोलिक पृष्ठ जहाँ आप क्रॉल करना चाहते हैं

इस व्यवस्था की खूबसूरती यही है सभी मोड्स आपके मौजूदा क्वैरी पैरामीटर्स को सुरक्षित रखती हैंक्या आप वर्ग के द्वारा फ़िल्टरिंग कर रहे हैं, खोज करें या छंटाई, prenting अपनी स्थिति को स्वतः बनाए रखता है.

उपयोग से उत्प्रवासन

पीछे की अनुकूलता के लिए, पुराने use-htmx गुण अभी भी काम करता है:

<!-- Old syntax (still works) -->
<paging model="Model" use-htmx="true" />
<!-- Equivalent to js-mode="HTMX" -->

<paging model="Model" use-htmx="false" />
<!-- Equivalent to js-mode="PlainJS" -->

लेकिन, मैं नए में भाग लेने की सलाह देता हूँ js-mode स्पष्टता के लिए गुण:

<!-- New syntax (recommended) -->
<paging model="Model" js-mode="HTMX" />
<paging model="Model" js-mode="PlainJS" />

दृश्य प्रकार संवर्द्धन

संस्करण 1.org दो महत्वपूर्ण दृश्य क़िस्म का परिचय देता है जो कि सामान्य रूप से वास्तविक संसार का दृश्‍य है.

शुद्ध जाल

पहले, अगर आप Tilling Willing चाहते थे, आप मिल गया TailwindAndDaisy देखो कौन स्यूलायूआई घटकों का उपयोग करता है. यह महान है अगर आप पहले से ही KuUUI का उपयोग कर रहे हैं, लेकिन क्या होगा अगर आप Gugoliowwwayyymowioyyy के बिना शुद्ध हवा चाहते हैं?

प्रविष्ट करें ViewType.Tailwind:

<paging
    model="Model"
    view-type="Tailwind" />

यह अनुवाद सिर्फ मानक ब्लिंग यूटिलिटी क्लास का उपयोग कर रहा है:

<div class="flex gap-2 items-center">
    <button class="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700">
        ‹ Previous
    </button>

    <div class="px-3 py-1 text-sm font-medium bg-gray-100 dark:bg-gray-700 dark:text-white rounded-md">
        Page 1
    </div>

    <button class="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700">
        Next ›
    </button>
</div>

नहीं btn, badge, या join वर्ग - सिर्फ शुद्ध क्लीनिंग. यह आपको बिना लाइब्रेरी निर्भरता पर पूरा नियंत्रण देता है.

तुलना:

INVECT दृश्य प्रकार सीएसएस फ्रेमवर्क घटक लाइब्रेरी केस का उपयोग करें |----------|---------------|-------------------|----------| | TailwindAndDaisy XIVERwolirajuUIC प्रोजेक्ट पहले से ही GugudUIL का प्रयोग कर रहा है | Tailwind XIVERTYEALLLLLLLLLLLL | Bootstrap भंवर बूट बूट बूटर कम्पाइलर कम्पाइलर बूट़र बिरंबद परियोजनाएं | Plain Libisofs का निर्माण सूची नहीं करता हैcolombia. kgm | NoJS एंबेडेड सीएसएस गोपित कुछ नहीं शून्य जावास्क्रिप्ट आवश्यकताएँ निर्धारित करता है

कोईJS मोड

वह NoJS सादा सीएसएस के साथ शून्य जावास्क्रिप्ट देखें:

<paging
    model="Model"
    view-type="NoJS"
    show-pagesize="true" />

अन्य दृश्य किस्म से कुंजी भिन्नता:

नेविगेशन लंगर लिंक का उपयोग करता है, बटन नहीं:

<a href="/Products?page=2" class="pager-button">Next ›</a>

पृष्ठ आकार चयनक एक फार्म है:

<form method="get" action="/Products" class="page-size-form">
    <!-- Preserves all current query parameters as hidden inputs -->
    <input type="hidden" name="search" value="laptop" />
    <input type="hidden" name="category" value="electronics" />

    <!-- Reset to page 1 when changing page size -->
    <input type="hidden" name="page" value="1" />

    <label for="pageSize">Items per page:</label>
    <select name="pageSize" onchange="this.form.submit()">
        <option value="10">10</option>
        <option value="25" selected>25</option>
        <option value="50">50</option>
    </select>

    <!-- Button visible when JavaScript is disabled -->
    <noscript>
        <button type="submit" class="page-size-button">Update</button>
    </noscript>
</form>

वह onchange="this.form.submit()" जावास्क्रिप्ट उपलब्ध है लेकिन जब सुविधा उपलब्ध होती है तो सुविधा देता है <noscript> बटन पूरे कार्यशीलता को सुनिश्चित करता है जब यह नहीं होता है.

यूआरएल पैरामीटर प्रीव्शन {# कर्ट- पूर्व- पूर्व- पूर्व}

पृष्ठ 1 के बीच झाड़ी करने के दौरान आप अपने फिल्टर, खोज शर्तों, या तरह - तरह के क्रम को खो रहे हैं. 0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx सभी क्वैरी पैरामीटरों को स्वचालित बनाए रखें सिवाय शीर्षकों के.

यह विशेषता एक जैसे काम करती है नियमित तौर पर पेजों और प्रोग्रामों के बीच फर्क करने के लिए आप क्या कर सकते हैं?, और पार सभी जावास्क्रिप्ट मोड तथा दृश्य प्रकार.

यहाँ यह कैसे आंतरिक काम करता है:

string BuildQueryString(string? token, int page)
{
    var query = new Dictionary<string, string>();

    // Define continuation pager's own parameters that should be excluded from preservation
    var pagerParams = new HashSet<string>(StringComparer.OrdinalIgnoreCase)
    {
        "pageSize", "currentPage", "pageToken", "tokenHistory"
    };

    // Add parameter prefix variants if using prefixed parameters
    if (!string.IsNullOrEmpty(Model.ParameterPrefix))
    {
        pagerParams.Add($"{Model.ParameterPrefix}_pageSize");
        pagerParams.Add($"{Model.ParameterPrefix}_currentPage");
        pagerParams.Add($"{Model.ParameterPrefix}_pageToken");
        pagerParams.Add($"{Model.ParameterPrefix}_tokenHistory");
    }

    // Preserve all existing query parameters (except pager's own) if enabled
    if (Model.PreserveQueryParameters)
    {
        foreach (var param in ViewContext.HttpContext.Request.Query)
        {
            if (!pagerParams.Contains(param.Key))
            {
                query[param.Key] = param.Value.ToString();
            }
        }
    }

    // Add continuation pager parameters (with prefix if specified)
    var pageSizeParam = Model.GetParameterName("pageSize");
    var currentPageParam = Model.GetParameterName("currentPage");
    var pageTokenParam = Model.GetParameterName("pageToken");
    var tokenHistoryParam = Model.GetParameterName("tokenHistory");

    query[pageSizeParam] = pageSize.ToString();
    query[currentPageParam] = page.ToString();

    if (!string.IsNullOrEmpty(token))
        query[pageTokenParam] = token;

    if (Model.EnableTokenAccumulation)
        query[tokenHistoryParam] = tokenHistoryJson;

    return string.Join("&", query.Select(kvp =>
        $"{Uri.EscapeDataString(kvp.Key)}={Uri.EscapeDataString(kvp.Value)}"));
}

ऐसा करने का मतलब है:

उदाहरण 1: खोज + अंश

Initial URL: /Products?search=laptop&category=electronics&page=1
Click Next: /Products?search=laptop&category=electronics&page=2
Change Page Size: /Products?search=laptop&category=electronics&page=1&pageSize=50

उदाहरण 2: क्रमबद्ध करने की + अंश

Initial URL: /Products?orderBy=price&descending=true&page=1
Click Page 3: /Products?orderBy=price&descending=true&page=3

उदाहरण 3: फ़िल्टर के साथ जारी पृष्ठ

Initial URL: /Products?category=electronics&brand=acme
Click Next: /Products?category=electronics&brand=acme&currentPage=2&pageToken=abc123&tokenHistory={...}

वही संरक्षण फ़ॉर्म में कार्य करता है (कोईJS मोड नही). जब पृष्ठ आकार का अनुवाद किया जाता है तो दृश्य में स्वचलित ही सहेजे जाने वाले पैरामीटर्स के लिए छुपा इनपुट शामिल है:

<form method="get" action="@linkUrl" class="page-size-form">
    @* Preserve all existing query parameters except pageSize and page-related ones *@
    @foreach (var param in ViewContext.HttpContext.Request.Query)
    {
        if (!new[] { "pageSize", "currentPage", "pageToken", "tokenHistory" }
            .Contains(param.Key, StringComparer.OrdinalIgnoreCase))
        {
            <input type="hidden" name="@param.Key" value="@param.Value" />
        }
    }

    @* Reset to page 1 when changing page size *@
    <input type="hidden" name="currentPage" value="1" />

    <select name="pageSize" onchange="this.form.submit()">
        <!-- options -->
    </select>
</form>

यह समुद्र - तट के पार अटल रूप से कार्य करता है सभी जावास्क्रिप्ट मोड और सभी दृश्य प्रकार. आपको कभी भी अपने आप को क्वैरी वाक्यांश इम्प्यूशन का नियंत्रण नहीं करना चाहिए.

उत्प्रवासन गाइड {APMog-ग्रेड}

पूर्व- सीधे संस्करण से उन्नत किया जा रहा है, लेकिन कुछ ब्रेक किए गए परिवर्तन हैं के बारे में अवगत होने के लिए.

परिवर्तनों को ब्रेक किया जा रहा है

1. use-htmx पदावनत किया गया है (लेकिन अब भी काम करता है)

पुराना:

<paging model="Model" use-htmx="true" />
<paging model="Model" use-htmx="false" />

नया (अनुशंसित):

<paging model="Model" js-mode="HTMX" />
<paging model="Model" js-mode="PlainJS" />

2. दृश्य क़िस्म.Tapowi और Dyy अब पूरा Kyysy उन घटकों का उपयोग करता है

यदि आप उपयोग कर रहे हैं ViewType.TailwindAndDaisy और साधारण बरतने की चीज़ भी किसी को नहीं देते

पुराना व्यवहार (प्रचला शुद्ध):

<paging model="Model" view-type="TailwindAndDaisy" />

नया (डिप्रयोग प्राप्त करने के लिए):

<paging model="Model" view-type="Tailwind" />

प्रयोग कर रखें TailwindAndDaisy यदि आप गुलजारयूआई घटकों का उपयोग कर रहे हैं:

<paging model="Model" view-type="TailwindAndDaisy" />
<!-- Uses btn, join, badge, select, etc. -->

3. HMAXHITEKT 2. 4 को 0 के लिए उन्नत बनाया गया है.

यदि आप अपने अनुप्रयोग में HMSX अन्य कहीं का उपयोग कर रहे हैं, तो HMAX 2.4 के साथ सुसंगतता सुनिश्चित करें. अधिकांश HMXEX कोड असक्रिय करता है, लेकिन समीक्षा करें HMAX 2. 0 उत्प्रवासन मार्गदर्शन किनारे के मामलों के लिए.

चरण- से- स्टेप उत्प्रवासन

चरण 1: अद्यतन Nu आए पैकेज

dotnet add package mostlylucid.pagingtaghelper --version 1.0.0

चरण 2: मौजूदा कोड की समीक्षा करें

ढूंढें कोड के लिए use-htmx गुण:

# PowerShell
Get-ChildItem -Recurse -Include *.cshtml | Select-String "use-htmx"

# Bash/Git Bash
grep -r "use-htmx" --include="*.cshtml" .

कदम 3: cs- mos (अनुसंश) पर अद्यतन

बदलें use-htmx के साथ js-mode:

- <paging model="Model" use-htmx="true" htmx-target="#results" />
+ <paging model="Model" js-mode="HTMX" htmx-target="#results" />

- <paging model="Model" use-htmx="false" />
+ <paging model="Model" js-mode="PlainJS" />

चरण ४: ब्लैडिसी इस्तेमाल की समीक्षा करें

आप गुलदानयूआई संस्थापित नहीं है लेकिन प्रयोग कर रहे थे TailwindAndDaisy:

- <paging model="Model" view-type="TailwindAndDaisy" />
+ <paging model="Model" view-type="Tailwind" />

कदम 5: जाँच अच्छी तरह से करें

अपना अनुप्रयोग चलाएँ तथा जांच करें:

पृष्ठ नेविगेशन
पृष्ठ आकार परिवर्तन
HMMX आंशिक अद्यतन (यदि HMMX का प्रयोग किया जाता है)
फ़िल्टर/ सर्च संरक्षण
मोबाइल प्रतिक्रियाएँGenericName

बातचीत के लिए नयी विशेषताएँ

एक बार फिर इन नए पहलुओं को अपनाने पर विचार कीजिए:

स्थानीयकरण:

<paging
    model="Model"
    language="@CultureInfo.CurrentUICulture.TwoLetterISOLanguageName" />

त्रुटि: (यदि लागू न हो)

<continuation-pager
    model="Model"
    htmx-target="#results-container"
    show-page-number="true" />

कोईJS मोड ( पहुंचनीयता के लिए):

<paging model="Model" js-mode="NoJS" />

डेमो अनुप्रयोग

लाइब्रेरी में व्यापक डेमो अनुप्रयोग सभी विशेषताओं को प्रदर्शित करता है. आप इसे स्थानीय रूप से चला सकते हैं या इसे देख सकते हैं डेमो साइट ( जल्द ही आ रहा है.

डेमो स्थानीय चलाएँ:

git clone https://github.com/scottgal/mostlylucid.pagingtaghelper.git
cd mostlylucid.pagingtaghelper/mostlylucid.pagingtaghelper.sample
dotnet run

यहाँ नेविगेट करें https://localhost:5001 खोजने के लिए:

मॉडल के साथ मूल प्रवेश - पारंपरिक जैसे एसक्यूएल- जैसे परिधन के साथ जारी
एचएसएमएक्स संयोजन - पूर्ण पृष्ठ पुनः लोड किए बिना गतिशील पृष्ठ अद्यतन
एचएमएमएक्स के साथ ढूंढें - एकीकृत खोज तथा गुण
सादा सीएसएस - कोई फ्रेमवर्क निर्भरता नहीं
शुद्ध जाल - गुलबहार बिना ताजी जाल
कोई जावास्क्रिप्ट नहीं - पूरी तरह से शून्य प्रवेश
जावास्क्रिप्ट मोड्स - सभी पांच जेएस मोड से पता चलता है साइड- बगल
पृष्ठ छांटक - HMASX के साथ फिट करने योग्य हेडर
पृष्ठ छाँटें कोई HMMX - पूर्ण पृष्ठ भार सहित हेडर को क्रमबद्ध करें
एचएमएमएक्स के साथ पृष्ठ आकार - गतिशील पृष्ठ आकार परिवर्तन
पृष्ठ आकार कोई HMMX नहीं - फ़ॉर्म जमा करने के साथ पृष्ठ आकार
फाईल की संरचना - कोई- दर- रंग- चिन्ह- भरें- पार्ट- पार्ट नहीं
स्थानीयाइज़ेशन - भाषा चयनक 8 भाषाओं के साथ

हर डेमो में शामिल है:

कार्यशील श्रोत कोड
तकनीक की व्याख्या
Git कार्यान्वयन की लिंक
प्रयोग के लिए अंतर्क्रियात्मक नियंत्रक

कंटेनमेंट

संस्करण 1 का मतलब है कि Paning टैग मदद लाइब्रेरी के लिए एक खास खास दिन का प्रतिनिधित्व करता है. क्या एक सरल कार्य मांग के रूप में शुरू हो गया है एक व्यापक, उत्पादन को तैयार करने का समाधान है जो नियंत्रण करता है:

पारंपरिक एसक्यूएल समझौता ऑफसेट/ स्थिर के साथ
कोई एसक्यूएल का संपादन नहीं कोस डिब, डनेमोबी, आदि.
बहु- वर्गीकृत स्थानीयीकरण वैश्विक दर्शकों के लिए
जावास्क्रिप्ट मोड एचएमएमएक्स से शून्य- जावा स्क्रिप्ट में
बहुत से सीएसएस फ्रेमवर्क कि "यह गिरे-पड़े थोड़े लोगों का एक गिरोह है,
स्मार्ट पैरामीटर संरक्षण सभी नेविगेशन के पार
पूरी पहुँच समर्थन उरया लेबल तथा कुंजीपट नेविगेशन के साथ

लाइब्रेरी 1. 7k + डाउनलोड किया गया है और उत्पादन के लिए तैयार है. सभी 106 इकाई जाँच समाप्त हो गई है, तथा व्यापक डेमो अनुप्रयोग दिखाता है कि वास्तव में तंत्र का उपयोग पैटर्न है.

अगला क्या है?

भावी सुधार मैं विचार कर रहा हूँ:

अतिरिक्त सीएसएस फ्रेमवर्क समर्थन (ममॉट यूआई, बीुल्मा)
ज़्यादा स्थानीयीकरण की भाषाएँ (अनुप्रयोगी अंशदानों का स्वागत है!)
सर्वर- साइड्जर अवयव
विशाल डाटासेटों के लिए उन्नत पहुंचनीयता

प्रारंभ करें

नेयू लेप द्वारा संस्थापित करें:

dotnet add package mostlylucid.pagingtaghelper --version 1.0.0

दस्तावेज़ की जाँच करें:

बगबब पर एक वाद - विषय खोलें या ट्विटर पर पहुंचें @ info: whatsthis.

खुशी की बात है!