Back to "Поступ панелі фільтрування (І виконання діапазону дат)"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

This is a preview from the server running through my markdig pipeline

ASP.NET HTMX JavaScript

Поступ панелі фільтрування (І виконання діапазону дат)

Monday, 10 November 2025

Вступ

За останні декілька днів я просувався у новій панелі фільтрування блогу: вибір мови, впорядкування та інструмент вибору діапазону дат, який намагається бути дуже розумним (іноді занадто розумним).

Цей пошта йде через те, що я збудував, чому деякі речі пішли в сторону (дата, яка не поводиться, підкреслює, що не відсвіжує), і як я їх полагодив.

Много источников и пара схем русалки, чтобы показать поток.

Пам'ятайте, що цей сайт є роботою, таке може статися, коли ви з'їсте свою догову їжу!

  • Що змінилося?
  • Ось висота: я додав відповідну панель фільтрування до індексу блогу, який включає:
  • Мова Виберіть, що зберігає ваші поточні фільтри і перепитує список за допомогою HTMX
  • Впорядкування оберіть (дата/ назва, якc/desc), що також зберігає контекст
  • Піпетка за діапазоном дат (Flatpicker у режимі діапазону) з підсвічуванням дня сервера}

Стан адреси завжди зберігається під час синхронізації (працює back/ forward, працює з глибокими посиланнями)

  • Тепер кешування сервера правильно залежить від параметрів фільтруванняНове у цьому оновленні (Великий Виправлення!)
  • Фільтри видимості: Тепер дощечки можна ховати, планувати на майбутнє видання або кріпитися до верху/blog/date-rangeТочка завершення періоду
  • : СтворитиAPI повертає дати min/ max для розсудливих меж вибору<clear-param>Спорожнити допоміжний теґ

: Простий спосіб очистити фільтри за допомогою

помічник для міток з альпійськими.js

Вздовж шляху у мене було декілька вад: дати діапазони, загублені на мові або порядку зміни, календар висвітлює не відсвіжаючи під час свопінгу, і веселий, де темні стилі режимів зробили календар зламаним, тому що Flatpickr не був перемальовування.

<div id="filters" hx-target="#content">
  <select id="languageSelect">…</select>
  <select id="orderSelect">
    <option value="date_desc">Newest first</option>
    <option value="date_asc">Oldest first</option>
    <option value="title_asc">Title A–Z</option>
    <option value="title_desc">Title Z–A</option>
  </select>
  <input id="dateRange" type="text" placeholder="YYYY-MM-DD → YYYY-MM-DD" />
  <button id="clearDateFilter">Clear</button>
  <div id="filterSummary"></div>
</div>

<div id="content"><!-- HTMX swaps blog list here --></div>

Панель фільтрування у DOM

Це нерівна структура, яку очікує сценарій:Mostlylucid/src/js/blog-index.jsКлієнт: HTMX + проводки Flatpickr

  • Корінь поведінки живе в
function applyNavigation(u){
  const target = document.querySelector('#content');
  try{ window.history.pushState({}, '', u.toString()); }catch{}
  if(window.htmx && target){
    window.htmx.ajax('GET', u.toString(), {
      target: '#content',
      swap: 'outerHTML show:none',
      headers: {'pagerequest': 'true'}
    });
  } else {
    window.location.href = u.toString();
  }
}

const url = new URL(window.location.href);
const existingStart = url.searchParams.get('startDate');
const existingEnd   = url.searchParams.get('endDate');
const existingLang  = url.searchParams.get('language') || 'en';
const existingOrderBy = (url.searchParams.get('orderBy') || 'date').toLowerCase();
const existingOrderDir = (url.searchParams.get('orderDir') || 'desc').toLowerCase();

langSelect.value = existingLang;
orderSelect.value = `${existingOrderBy}_${existingOrderDir}`;
updateSummary();
  • Декілька важливих елементів:
async function fetchMonth(year, month, language){
  const res = await fetch(`/blog/calendar-days?year=${year}&month=${month}&language=${encodeURIComponent(language||'en')}`);
  if(!res.ok) return new Set();
  const j = await res.json();
  return new Set(j.dates || []);
}

function formatYMD(d){ return d.toISOString().substring(0,10); }

let highlightDates = new Set();
const fp = window.flatpickr(input, {
  mode: 'range',
  dateFormat: 'Y-m-d',
  defaultDate: [existingStart, existingEnd].filter(Boolean),
  onDayCreate: function(_dObj,_dStr,fpInstance,dayElem){
    const ymd = formatYMD(dayElem.dateObj);
    if(highlightDates.has(ymd)){
      dayElem.classList.add('has-post');
      dayElem.style.background = 'rgba(76,175,80,0.35)';
      dayElem.style.borderRadius = '6px';
    }
  },
  onMonthChange: async function(_sd,_ds,fpInstance){
    highlightDates = await fetchMonth(fpInstance.currentYear, fpInstance.currentMonth+1, langSelect.value);
    fpInstance.redraw();
  },
  onOpen: async function(_sd,_ds,fpInstance){
    highlightDates = await fetchMonth(fpInstance.currentYear, fpInstance.currentMonth+1, langSelect.value);
    fpInstance.redraw();
  },
  onChange: function(selectedDates){
    if(selectedDates.length === 2){
      const [start,end] = selectedDates;
      const u = new URL(window.location.href);
      u.searchParams.set('startDate', formatYMD(start));
      u.searchParams.set('endDate', formatYMD(end));
      u.searchParams.set('page','1');
      u.searchParams.set('language', langSelect.value);
      const [ob,od] = orderSelect.value.split('_');
      u.searchParams.set('orderBy', ob);
      u.searchParams.set('orderDir', od);
      updateSummary();
      applyNavigation(u);
    }
  }
});
  • Збереження URL і навігація HTMX
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', formatYMD(s));
    u.searchParams.set('endDate', formatYMD(e));
  }
  // refresh calendar highlights for new language
  if(input._flatpickr){
    const fp = input._flatpickr;
    highlightDates = await fetchMonth(fp.currentYear, fp.currentMonth+1, langSelect.value);
    fp.redraw();
  }
  updateSummary();
  applyNavigation(u);
});
  • Ініціалізація, типове значення з URL і синхронізація інтерфейсу резюме
const obs = new MutationObserver(() => {
  const dr = root.querySelector('#dateRange');
  const fp = dr && dr._flatpickr;
  if(fp && typeof fp.redraw === 'function') fp.redraw();
});
obs.observe(document.documentElement, { attributes:true, attributeFilter:['class'] });

Плавчика у діапазоні з підсвічуваннями дня сервера (сервера)

Зберігати дати при зміні мови або порядку

  • Перемалювати календар, коли тема вмикає (темно/ освітлено) таким чином Flatpicker перемальовує*
  • Сервер: кінцеві точки і кешуванняcalendar-daysТри кінцевих точки степінь сторінки:
  • Сам індекс, який приймає сторінку, pageSize, startDate/endDate, мову і порядокdate-rangeА
// GET /blog
[HttpGet]
[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);
}

// GET /blog/calendar-days?year=2025&month=11&language=en
[HttpGet("calendar-days")]
[ResponseCache(Duration = 300, VaryByHeader = "hx-request", VaryByQueryKeys = new[] { nameof(year), nameof(month), nameof(language) }, Location = ResponseCacheLocation.Any)]
[OutputCache(Duration = 1800, VaryByHeaderNames = new[] { "hx-request" }, VaryByQueryKeys = new[] { nameof(year), nameof(month), nameof(language) })]
public async Task<IActionResult> CalendarDays(int year, int month, string language = MarkdownBaseService.EnglishLanguage)
{
    if (year < 2000 || month < 1 || month > 12) return BadRequest("Invalid year or month");
    var start = new DateTime(year, month, 1);
    var end = start.AddMonths(1).AddDays(-1);
    var posts = await blogViewService.GetPostsForRange(start, end, language: language);
    if (posts is null) return Json("");
    var dates = posts.Select(p => p.PublishedDate.Date).Distinct().OrderBy(d => d).Select(d => d.ToString("yyyy-MM-dd")).ToList();
    return Json(new { dates });
}

// GET /blog/date-range?language=en
[HttpGet("date-range")]
[ResponseCache(Duration = 3600, VaryByHeader = "hx-request", VaryByQueryKeys = new[] { nameof(language) }, Location = ResponseCacheLocation.Any)]
[OutputCache(Duration = 7200, VaryByHeaderNames = new[] { "hx-request" }, VaryByQueryKeys = new[] { nameof(language) })]
public async Task<IActionResult> DateRange(string language = MarkdownBaseService.EnglishLanguage)
{
    var allPosts = await blogViewService.GetAllPosts();
    if (allPosts is null || !allPosts.Any())
    {
        return Json(new
        {
            minDate = DateTime.UtcNow.AddYears(-1).ToString("yyyy-MM-dd"),
            maxDate = DateTime.UtcNow.ToString("yyyy-MM-dd")
        });
    }

    var posts = allPosts;
    if (!string.IsNullOrEmpty(language) && language != MarkdownBaseService.EnglishLanguage)
    {
        posts = allPosts.Where(p => p.Language.Equals(language, StringComparison.OrdinalIgnoreCase)).ToList();
    }

    if (!posts.Any()) posts = allPosts;

    var minDate = posts.Min(p => p.PublishedDate.Date);
    var maxDate = posts.Max(p => p.PublishedDate.Date);

    return Json(new
    {
        minDate = minDate.ToString("yyyy-MM-dd"),
        maxDate = maxDate.ToString("yyyy-MM-dd")
    });
}

кінцева точка, яка повертає набір днів у даному місяці з дописами (для підсвічування)LinkUrlА

public class BasePagingModel<T> : Interfaces.IPagingModel<T> where T : class
{
    public int Page { get; set; }
    public int TotalItems { get; set; } = 0;
    public int PageSize { get; set; }
    public ViewType ViewType { get; set; } = ViewType.TailwindAndDaisy;
    public string LinkUrl { get; set; }
    public List<T> Data { get; set; }
}

кінцева точка, яка повертає дати min/ max у всіх дописах (автома мова)

sequenceDiagram
  participant U as User
  participant FP as Flatpickr
  participant JS as blog-index.js
  participant HT as HTMX
  participant C as BlogController

  U->>FP: Selects 2025-11-01 → 2025-11-10
  FP-->>JS: onChange([start,end])
  JS->>JS: Update URLSearchParams (startDate, endDate, language, order)
  JS->>HT: htmx.ajax('GET', /blog?...)
  HT->>C: GET /blog with query
  C-->>HT: Partial _BlogSummaryList
  HT-->>U: Swap #content
  JS->>FP: (after swap) ensure highlights + redraw

Недовго убік: грайлива модель має

flowchart TD
  A[Open calendar / Month change] --> B[Fetch /blog/calendar-days]
  B -->|JSON dates: yyyy-mm-dd array| C[Set highlightDates]
  C --> D[flatpickr redraw]
  D --> E[onDayCreate adds .has-post]

так, щоб pagination зберігала поточний контекст фільтра під час показу сервера } side.

Послідовність: спосіб зміни потоків фільтрування

Потік: підсвічування календаряBlogPostEntity:

public class BlogPostEntity
{
    // ... existing fields ...

    public bool IsPinned { get; set; }
    public bool IsHidden { get; set; }
    public DateTimeOffset? ScheduledPublishDate { get; set; }
}

Нові можливості: Керування можливостями і вмістомBlogServiceФільтри KDeviceName

// Filter out hidden posts and posts scheduled for the future
var now = DateTimeOffset.UtcNow;
postQuery = postQuery.Where(x =>
    !x.IsHidden &&
    (x.ScheduledPublishDate == null || x.ScheduledPublishDate <= now));

// For page 1, prioritize pinned posts
var isFirstPage = page == null || page.Value == 1;
if (isFirstPage)
{
    postQuery = postQuery.OrderByDescending(x => x.IsPinned)
                         .ThenByDescending(x => x.PublishedDate.DateTime);
}

Найбільшим поліпшенням у цьому оновленні є належне керування поточною видимістю.

  • Додали три нових поля (IsHidden = trueThe
  • **тепер фільтрує дописи належним чином:**Це означає:ScheduledPublishDate
  • Приховані дописи (IsPinned = true) ніколи не з' являється у списках

Заплановані дописи

з' являється лише після їх

[HtmlTargetElement("clear-param")]
public class ClearParamTagHelper : TagHelper
{
    [HtmlAttributeName("name")]
    public string? Name { get; set; }

    [HtmlAttributeName("all")]
    public bool All { get; set; } = false;

    [HtmlAttributeName("exclude")]
    public string Exclude { get; set; } = "";

    // ... styling and Alpine.js integration ...
}

Фіксовані дописи

<!-- Clear a specific parameter -->
<clear-param name="startDate">Clear Date</clear-param>

<!-- Clear all parameters except language -->
<clear-param all="true" exclude="language">Clear All Filters</clear-param>

) завжди спочатку з'являється на сторінці 1 досконалий текст для оголошень або позначеного змісту.window.queryParamClearerСпорожнити довідку щодо міток

**Новий допоміжний засіб встановлення теґів ASP. NET спрощує вилучення параметрів запиту:**Використання у переглядах Razor:

Помічник з мітками інтегрується з альпійськими.js

  • компонент для роботи з адресами URL і обмін місцями HTMX.

    • ПриміткаstartDate/endDate.
    • : Помічник створення міток і параметр запиту заслуговують на глибші дослідження.new URL(window.location.href)Я оприлюдню всі деталі впровадження, включаючи компонент Billian.js і допоміжні шаблони міток, на майбутній пост про будівництво нових компонентів HTMX/Alpine.language/orderВади, які я ввів (і виправлення)

  • Діапазон дат, програно під час зміни мови/ порядку

    • Причина: я побудував нову адресу URL з нуля, а не з поточної; втрачено
    • Фіксація: завжди починати з

  • і змінювати лише частини, які було змінено, або читати дати з Flatpicker, якщо такі існують.

    • Видите
    • змінити обробники вище.<html class>Завершення календаря пройшло після свопінгу HTMXfp.redraw().

  • Бо: у старого в'язня DOM жив плавчильник, і він помер на обміні.

    • Фірм: On init, знищити будь-який існуючий екземпляр, re}, а потім попередньо завантажити підсвічування для видимого місяця.LinkUrlКрім того, пере) після обміну (див. нижче).
    • Темний режим змусив календар виглядати непрацездатнимposts.LinkUrl = Url.Action("Index","Blog", new { startDate, endDate, language, orderBy, orderDir })Д-р Харріс: "Між класами стилю змінено, але Flatpickr не перемальовував дні.

Фіксація: спостереження

зміни і виклик

(function(){
  function initFromRoot(root){ /* …the big function shown above… */ }
  if(window.htmx){
    document.body.addEventListener('htmx:afterSwap', function(ev){
      const tgt = ev.detail.target;
      // re-init if the content swapped includes the filters/content area
      if(tgt && (tgt.id === 'content' || tgt.querySelector?.('#filters'))){
        initFromRoot(document);
      }
    });
  }
  // also run on first load
  initFromRoot(document);
})();

Контекст фільтра скинених посилань на Pagination

  • Причина:
  • " ні " означає ні " ні ," ні " ні " ні " ні ."
  • Виправлення: на сервері встановлено

так що пейджер правильно створює адреси URL.

logo

© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.