# फ़िल्टर बार: प्रगति, बग तथा छोटे जीत

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

## परिचय

मैं एक साथ ब्लॉग सूची के लिए एक उचित फ़िल्टर पट्टी लगा रहा हूँ: भाषा, तारीख सीमा, तरह, और pMAX के साथ अवरोधित करती भाषा, और पटती है.

यह अभी बंद है - लेकिन, हमेशा के रूप में, अंतिम 20% है Scrat बिट: तारीख़, कैश, और “क्यों कि स्थानीय रूप से काम करता है लेकिन एक रस्सी के बाद नहीं?[यदि आप बहुत सारे कोड तथा आरेखों के साथ गहरा बल चाहते हैं, तो देखें:](/blog/filterbarprogressandissues)

> / वेब साइट्‌स/ फ़िल्टर्ग्रेस

[TOC]

## याद रखें कि इस साइट की प्रगति में एक काम है, सामान के इस प्रकार होगा जब आप अपने-अपने-छोटे भोजन खाना खाते हैं!

- टीएल; डीआर
- नया फ़िल्टर पट्टी: भाषा + छांटना + तिथि सीमा
- HMMX आंशिक वर्गीकरण पृष्ठ को तेजी से बनाए रखता है; पीछे/forward कार्य करता है क्योंकि मैं हमेशा अद्यतन किए गए यूआरएल को धक्का देता हूँ`/blog/calendar-days`पंचांग संकेत एक छोटे से यहाँ से आता है
- अंत- बिन्दु
- स्थिर: जब भाषा/क्रम में बदला जा रहा हो तो तिथि सीमा सीमा को छोड़ा जा रहा है
- निश्चित रूप से: HMMX स्वेप या प्रसंग परिवर्तन के बाद पंचांग को ताज़ा नहीं कर रहा है

## सर्वर कैशिंग अब सभी संबंधित क्वैरी कुंजियों द्वारा बदलता है

- काम अच्छी तरह से
- यूआरएल- प्रथम व्यवहार: सभी सम्पर्क यूआरएल अद्यतन करते हैं; आप फ़िल्टर स्थिति में गहरे लिंक कर सकते हैं`LinkUrl`प्रवेश करना वर्तमान फ़िल्टर की रक्षा करता है (ए)
- सर्वर पर सेट है

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

## वर्तमान क्वैरी मूल्यों को डिफ़ॉल्ट रूप में चिह्नित करें यदि वर्तमान तथा पोस्ट के साथ उभारे जाने वाले दिनों को बदलता है

### बग मैंने स्थिर किया (और नई विशेषताएँ!)

दृश्यता तथा सामग्री नियंत्रण

- **सबसे बड़ा अतिरिक्त: उचित पोस्ट विडंचर:**छुपी पोस्ट्स`IsHidden`: पोस्ट्स अब छुपा के रूप में चिह्नित हो सकते हैं (ए)
- **फ्लैग) और लिस्ट्स में प्रकट नहीं होगा**अनुसूचित प्रकाशन`ScheduledPublishDate`पोस्ट्स में हो सकते हैं
- **और बाद को आने वाले समय के बाद ही प्रकट हो जाते हैं**पोस्ट- पोस्ट`IsPinned`: पोस्ट चिह्नित

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

### पृष्ठ 1 पर हमेशा प्रथम प्रतीत होता है (अनुप्रयोगों के लिए बड़ी)

- **तिथि सीमा सुधार`/blog/date-range`नया**अंत- बिन्दु
- **: सभी पोस्टों में मिनट/max की तिथि लौटाता है (अंग्रेजी) ताकि जाँचक सीमाओं को सीमित कर सके**साफ करें`<clear-param>`जोड़ा गया:

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

### साफ क्वैरी पैरामीटर्स में टैग सहायक

- बग ठीक करने वाला
  - जब भाषा या अनुक्रम स्विच कर रहे हों तो तारीख सीमा बन्द करना`new URL(window.location.href)`ठीक करें: से प्रारंभ करें

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

- और (ऐ रसूल) बस तुम ही कह दो कि जब (उनके हलाक करने के वास्ते) इत्मेनान (का अज़ाब) आ खड़ा हो और खुदा के सिवा किसी को हलाक़ न कर सके
  
  - पंचांग को HMMX स्वेप के बाद ताजा नहीं किया जा सका`fp.redraw()`ठीक है: नष्ट/पुनप पर टाइट- बिल्डर, फिर दृश्‍य महीने के लिए प्रकाश प्राप्त करें तथा कॉल करें`htmx:afterSwap`.

- ; फिर से चालू करें
  
  - कैलेन्डर में लागू नहीं किया जा सका.`<html class>`ठीक करें:`fp.redraw()`और कॉल

## जब यह परिवर्तन होता है.

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

## कैसे टुकड़े बात की

एटीएमएक्स पृष्ठ पता लगाने का निवेदन करता है`pagerequest`फ़िल्टर पट्टी मनपसंद उपयोग करता है

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

सर्वर को संपूर्ण पृष्ठ लोड तथा आंशिक HMMMX स्वेप के बीच अंतर करने में मदद करने के लिए शीर्षक:

> **यह नियंत्रण सिर्फ HMMAX निवेदन और प्रत्यक्ष नेविगेशन के लिए पूर्ण पृष्ठ दृष्टिकोण को लौटने देता है.**टिप्पणी

## : paning टैग मदद विस्तार और क्वैरी पैरामीटर स्पष्ट रूप से Ajsons अवयव उनके अपने गहरे रिलिंग के लायक है - मैं इन विवरणों को निर्माण के बारे में एक भविष्य में दर्ज किया जाएगा सुनिश्चित करने योग्य HTMMMX/ANARS/ANARS अवयव.

- अब भी करने के लिए
- त्वरित तारीख़ (पिछले 7/30 दिन, इस वर्ष)
- भाषा के लिए स्थानीय विटिकर बीज

सीमा चयनक पर कुंजीपटल समर्थन