# HTMX з частковостями ядра ASP.NET: Ренесансу серверів

<datetime class="hidden">2025-11-28T12:00</datetime>

<!--category-- HTMX, ASP.NET Core, Web Development, HTMX.NET -->
## Вступ

Якщо ви створили традиційні програми для роботи з ядром MVC ASP. NET, вам відомі проблеми: страшні " блимання " під час переходу між сторінками користувачів. Перезавантаження сторінок, хромування браузера, перестрибування вмісту у вигляді нової сторінки. Це працює, але це не працює *feel* Сучасно.

Техніка повернення часткових фрагментів HTML з сервера і заміни їх на DOM вирішує це - і це не є чимось новим. Я використовував цей шаблон з днів jquery, і навіть до того за допомогою ваніля JavaScript, `XMLHttpRequest`. Що змінилося, так це те, як *елегантний* Це стає з HTMX.

HTMX надає нам змогу зробити те, що ми завжди робили: повернути HTML- відпущений сервер і поміняти його на сторінку. Немає більше написання нетипового JavaScript для кожної взаємодії. Більше не буде вибору між " правильним " розвитком сервера і плавним досвідом користувача. З HTMX ми отримаємо обидва варіанти.

> **Стаття подружнього партнера:** Ця стаття зосереджується на стороні інтеграції ядра ASP. NET. Для глибокого занурення у події HTMX, життєвий цикл і нетипові розширення дивіться мою супровідну статтю: [A Wistle- stop Tour of HTMX Extensions and Використовується HTMX з ядром ASP. NET](/blog/htmxandaspnetcore).

У цій статті я покажу вам, як HTMX чудово інтегрується з ядром ASP.NET, як чудові **HTMX. NET** бібліотека робить його ще кращим, і як мій [threelucid.pproginghelper](https://github.com/scottgal/mostlylucid.pagingtaghelper) У пакунку NuGe використовується HTMX з мінімальним налаштуванням потужної пагінії.

Цей підхід також стосується оболонок - доданий шаблон Django у версії 6. 0, у Рейлів є блоки Turbo, а ширша веб- екосистема охоплює HTML- перезаряджні шаблони. Тепер слушний час для створення програм, що працюють на сервері.

[TOC]

## Що таке HTMX?

HTMX - це бібліотека, яка надає вам доступ до сучасних можливостей навігатора безпосередньо з HTML, а не написання JavaScript. Вона розширює HTML атрибутами, які надають вам змогу створювати запити AJAX, обмінюватися та створювати багаті взаємодії - все це без залишення розмітки.

Атрибути ключів, які ви використовуватимете найчастіше:

- `hx-get`, `hx-post`, `hx-put`, `hx-delete` - Робити запити HTTP
- `hx-target` - Вкажіть місце відповіді
- `hx-swap` - Керуйте тим, як буде змінено вміст (interHTML, зовнішній HTML тощо)
- `hx-trigger` - Визначте, що викликає запит (клацніть, змініть, завантажте тощо)
- `hx-push-url` - Оновлювати URL навігатора без перезавантаження повної сторінки

Ось її краса: ви все ще пишете код на сервері, повернений до роботи HTML. Немає API JSON, без шаблонів клієнтів, без трубопроводів для збирання. Просто старий HTML за допомогою дроту.

## Взірець, такий давній, як AJAX

Перед HTMX ми досягли такого ж ефекту з набагато більшою церемонією.

```javascript
// jQuery circa 2010
$('#load-more').click(function() {
    $.ajax({
        url: '/posts/page/' + currentPage,
        success: function(html) {
            $('#posts-container').append(html);
            currentPage++;
        }
    });
});
```

І ще раніше, з ванільним JavaScript:

```javascript
// Vanilla JS circa 2005
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('content').innerHTML = xhr.responseText;
    }
};
xhr.open('GET', '/partial-content', true);
xhr.send();
```

Шаблон з боку сервера був ідентичним - повернути фрагменти HTML, поміняти їх на DOM. HTMX просто пересуває цю логіку з JavaScript у HTML- атрибути, роблячи її декламованою, придатною для виявлення, і набагато меншою кількістю помилок. Інновації - це не техніка, а інтерфейс.

Розробники ASP. NET вже роками це роблять. IndatePanels у WebForms (2005), `PartialView()` в MVC с самого первого дня, `Html.RenderAction()` Те, чого нам бракувало, було елегантним, стандартизованим способом прослуховувати його на стороні клієнта.

Широка промисловість також відновила ці шаблони. Терміни на зразок " серверний показ ," " гібридне відображення ," " архітектура " і " belands " в основному описують те, які оболонки завжди робилися, але зі свіжими очима. Перевірка того, що масштаби, виконання дій сервера, виконання і - за допомогою правильних інструментів - є чудовим досвідом для користувачів.

## Налаштування HTMX в ядрі ASP. NET

Спочатку включіть до вашого компонування HTMX. Ви можете скористатися CDN або надати його локально:

```html
<script src="https://unpkg.com/htmx.org@2.0.0"></script>
```

Ось і все. ніяких кроків збирання, ніякого встановлення npm, налаштування веб-пакунку.

## Billian.js: Компонент клієнта- Side

Для реагування на клієнтську частину (показати/ ховати елементи, перемикати стан, локальний стан інтерфейсу користувача) [Альпійський.js](https://alpinejs.dev/) ідеально доповнює HTMX. Лише за допомогою 15KB gzip у програмі передбачено декартову реанімацію, схожу на Vue/ React- act, без loat.

```html
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

Ось як вони працюють разом:

```razor
<div x-data="{ open: false }">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" x-transition>
        <button hx-get="/api/data" hx-target="#results">Load Data</button>
    </div>
</div>
```

Альпійська система керує локальним інтерфейсом користувача (перемиканням), HTMX керує викликами серверів (подача даних). У цій статті ви побачите цей зразок - альпійський для реагування клієнта, HTMX для взаємодії з сервером.

## Бібліотека HTMX. NET

[Халід Абгакмеlithuania_ municipalities. kgm](https://khalidabuhakmeh.com/about)'s' [HTMX. NET](https://github.com/khalidabuhakmeh/Htmx.Net) бібліотека надає можливість інтеграції ядра першого класу ASP. NET. Доступний як `Htmx` і `Htmx.TagHelpers` Пакунки NuGet, вони вважаються природними для .NET і роблять роботу з HTMX абсолютним задоволенням. [GitHub](https://github.com/khalidabuhakmeh).

### Встановлення

```bash
dotnet add package Htmx
dotnet add package Htmx.TagHelpers
```

У вашій `_ViewImports.cshtml`:

```razor
@addTagHelper *, Htmx.TagHelpers
```

### Метод розширення IsHtmx}

Найкориснішим є можливість `Request.IsHtmx()` Метод додавання, за допомогою якого ви можете визначити, чи було надіслано запит за допомогою HTMX. За допомогою цього способу ви можете повернути або повний перегляд, або лише частковий:

```csharp
[HttpGet]
public async Task<IActionResult> Index(int page = 1, int pageSize = 20)
{
    var posts = await blogViewService.GetPagedPosts(page, pageSize);

    if (Request.IsHtmx())
        return PartialView("_BlogSummaryList", posts);

    return View("Index", posts);
}
```

Цей шаблон є абсолютно блискучим. Дії одного контролера слугують обом:

- Завантажування сторінок (якщо користувачі орієнтуються напряму або оновлюють)
- Часті оновлення (коли HTMX робить запит)

Нет разных основ API, никаких повторяющих логической логики, нет серифии ДЖСОН.

> **Поширене неправильне уявлення:** Багато розробників ASP. NET вважають, що вам потрібен `_` префікс (на зразок `_BlogSummaryList.cshtml`) щоб отримати частковий переклад. `PartialView()` Сам метод наказує ASP. NET Core пропустити компонування - він каже " забути розкладку, просто показати цей біт ." Ви можете скористатися `return PartialView("SearchResults", model)` з звичайним файлом перегляду і він працює ідеально. Компіляція підкреслювання походила з веб- сторінок ASP. NET (WebMatrix), за допомогою якої програма запобігала показу файлів безпосередньо за допомогою адреси URL, - але MVC завжди захищав всі перегляди від прямого доступу. Це суто умова назви, яка допомагає визначати перегляди. *намір* як часткові.

### Помічники міток HTMX. NET

У HTMX. NET передбачено допоміжні засоби для роботи з мітками, які роблять роботу з очищувачем регуляторів. Замість створення рядків маршрутів, ви можете скористатися добре визначеними посиланнями:

```razor
<button
    hx-controller="Comment"
    hx-action="GetCommentForm"
    hx-post
    hx-target="#commentform">
    Reply
</button>
```

Ця програма створює правильний маршрут за допомогою системи маршрутизації ядра ASP. NET. Якщо ви перейменуєте регулятор або дію, ваш IDE його зловить. Значно краще ніж магічні рядки!

Ось приклад системи коментарів цього блогу:

```razor
<button
    class="btn btn-outline btn-sm mb-4"
    hx-action="Comment"
    hx-controller="Comment"
    hx-post
    hx-vals
    x-on:click.prevent="window.mostlylucid.comments.setValues($event)"
    hx-on="htmx:afterSwap: window.scrollTo({top: 0, behavior: 'smooth'})"
    hx-swap="outerHTML"
    hx-target="#commentform">
    Comment
</button>
```

Зауважте, як HTMX добре грає з альпійськими.js (`x-on:click.prevent`) для тих випадкових частин клієнтської взаємодії.

### Інші помічники HTMX. NET

Крім того, у бібліотеці передбачено:

- `Request.IsHtmxNonBoosted()` - Перевірте, чи є це запит HTMX, але не покращений
- `Request.IsHtmxRefresh()` - Перевірте, чи це запит на відновлення історії.
- Допоміжні засоби відповіді для заголовків HTMX (утиліти, переспрямування тощо)

## Приклад реального світу: пошук з частковою часткою

Ось контролер пошуку з цього блогу, який показує шаблон повернення до трьох способів:

```csharp
[HttpGet]
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]
public async Task<IActionResult> Search(
    string? query,
    int page = 1,
    int pageSize = 10,
    [FromHeader] bool pagerequest = false)
{
    var searchModel = await BuildSearchModel(query, page, pageSize);

    if (pagerequest && Request.IsHtmx())
        return PartialView("_SearchResultsPartial", searchModel.SearchResults);

    if (Request.IsHtmx())
        return PartialView("SearchResults", searchModel);

    return View("SearchResults", searchModel);
}
```

Три шляхи повернення для трьох сценаріїв:

1. Запити Pagination - мінімальна часткова (просто список результатів)
2. Зміни фільтра - частинний розділ (відбитки з фільтрами)
3. Пряма навігація - повна сторінка (вкладка + все)

Частковий перегляд (`_SearchResultsPartial.cshtml`) використовує помічника відсилання міток:

```razor
@model Mostlylucid.Models.Blog.PostListViewModel
<div class="pt-2" id="content">
    @if (Model.Data?.Any() is true)
    {
        <div class="inline-flex w-full items-center justify-center pb-4">
            @if (Model.TotalItems > Model.PageSize)
            {
                <pager
                    x-ref="pager"
                    link-url="@Model.LinkUrl"
                    hx-boost="true"
                    hx-target="#content"
                    hx-swap="show:none"
                    page="@Model.Page"
                    page-size="@Model.PageSize"
                    total-items="@Model.TotalItems"
                    hx-headers='{"pagerequest": "true"}'>
                </pager>
            }
        </div>
        @foreach (var post in Model.Data)
        {
            <partial name="_ListPost" model="post"/>
        }
    }
</div>
```

Інструмент для обробки міток пейджера:

- `hx-boost="true"` - Інтерцепти з'єднують, конвертують на AJAX
- `hx-target="#content"` - Де ввести відповідь
- `hx-headers='{"pagerequest": "true"}'` - Нетиповий заголовок вказує контролеру, що це загін
- Перевірка контролера `Request.IsHtmx() && pagerequest` щоб повернути лише мінімальну частковість

## Пакунок musiclucid. pachingtaghelper

Я написав [threelucid.pproginghelper](https://github.com/scottgal/mostlylucid.pagingtaghelper) Щоб уникнути коду періодичної пагінації. Спочатку це HTMX, але без JavaScript також працює.

### Встановлення

```bash
dotnet add package mostlylucid.pagingtaghelper
```

Додати до `_ViewImports.cshtml`:

```razor
@addTagHelper *, mostlylucid.pagingtaghelper
```

### Можливості ключів

Реалізація `IPagingModel<T>` І ви закінчили:

```csharp
public class BasePagingModel<T> : IPagingModel<T> where T : class
{
    public int Page { get; set; }
    public int TotalItems { get; set; }
    public int PageSize { get; set; }
    public string LinkUrl { get; set; }
    public List<T> Data { get; set; }
}
```

**Що ви отримаєте:**

- Потрібне нульове налаштування
- Декілька програм інтерфейсу користувача (TailwindowCSS + DaisUI, Bootstitle 5, нетипові перегляди)
- Підтримка темних режимів
- Вбудовані 8 мов
- Впорядковані заголовки, засоби вибору розміру сторінок
- Поступове вдосконалення (працює без JavaScript)
- Підтримка послідовного ключа для баз даних NoSQL

Помічник теґів створює посилання, за допомогою яких можна зберігати рядки запитів, підтримувати нетипові заголовки та плавно об' єднуватися з HTMX (див. приклад, описаний вище).

## Діаграма потоку HTMX

Ось як уся система поєднується:

```mermaid
graph TB
    A[Browser] -->|"Initial page load"| B[Controller Action]
    B -->|"Request.IsHtmx() = false"| C[Return Full View]
    C --> D[Render Layout + Partial]

    A -->|"User clicks pagination/filter"| E[HTMX Request]
    E -->|"hx-get with headers"| F[Same Controller Action]
    F -->|"Request.IsHtmx() = true"| G{Check Headers}
    G -->|"pagerequest header"| H[Return Minimal Partial]
    G -->|"No special header"| I[Return Section Partial]

    H --> J[Swap Content in Target]
    I --> J

    J -->|"User clicks another link"| E

    style B stroke:#333,stroke-width:2px
    style F stroke:#333,stroke-width:2px
    style C stroke:#0066cc,stroke-width:2px
    style H stroke:#00cc66,stroke-width:2px
    style I stroke:#00cc66,stroke-width:2px
```

## Порівняння з іншими блоками

### Фрагменти шаблонів Django

Django додав правильний шаблон відображення у версії 6. 0 (грудень 2024) з фрагментами шаблонів. Перед цим розробники Django зазвичай використовували мітки включення або пакунки третьої частини, на зразок django- block. ASP. NET Core мали ядро `PartialView()` починаючи з версії 1. 0 у 2016 році - різні оболонки, різні розклади, але те саме призначення: фрагменти HTML для HTMX.

### Раїли " Турбо " рами

Ruby on Rails має блоки Turbo (частину Hotwire), які подібні у дусі:

```erb
<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>
```

Різниця полягає в тому, що "Турбо" вимагає певних позначок кадрів як на запитах, так і на відповідь. HTMX більш гнучкий - будь-яка кінцева точка може повернути будь-який HTML, і ви вирішуєте, куди він йде. `hx-target`.

### Firex liveView

Elixir's Finix LiveView робить інший підхід з постійними з' єднаннями WebSocket і станом на стороні сервера:

```elixir
def handle_event("load_more", _params, socket) do
  {:noreply, assign(socket, posts: load_more_posts())}
end
```

LiveView є блискучим для програм у режимі реального часу, але для з' єднання потрібні інфраструктура WebSocket і пам' ять сервера. HTMX використовує звичайний старий HTTP - недоступний, придатний для кешування, придатний для масштабування. Для блогу це ідеально.

## Обмірковування швидкодії

**Кечування виводу**: The `OutputCache` attribute міняється на `hx-request` заголовок, кешування сторінок і частинок окремо:

```csharp
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]
```

**Network Efficiency**: HTML, що виконується на сервері, часто менший за шаблон JSON + клієнтська сторона, потребує менше ходів і кешів належним чином.

**Розмір м' ячика**: HTMX (14KB) + необов' язкові альпійські. js (15KB) + linger tag assist (0KB, side) = 30KB загалом. Порівняйте це з типовою програмою React (200KB+).

## Додаткові візерунки

**Оптимістичне оновлення інтерфейсу користувача** - З'єднайте HTMX і альпійські Альпи для миттєвого зворотній зв'язку:

```razor
<div x-data="{ count: @Model.CommentCount }">
    <button hx-post="/comment/like" x-on:click="count++" hx-on::after-request="count = $event.detail.xhr.response">
        Likes: <span x-text="count"></span>
    </button>
</div>
```

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

**Свопінги поза комп' ютером** - Оновити декілька розділів сторінки з однієї відповіді:

```razor
<div id="main-content"><!-- Main response --></div>
<div id="notification-count" hx-swap-oob="true"><span>5 new</span></div>
```

Ідеально для сповіщень, кілок карт тощо. Я зафарбую цей шаблон глибше [Показ тоста і поміняння місцями з HTMX](/blog/showingtoastandswappingwithhtmx).

**Шаблони клієнта з веб-API** - Иногда вам нужен опыт в середине: посещенный по серверу HTML для большинства вещей, но JSON из веб-API для специальной динаміческой конфиденциальности HTMX. [розширення client- side- templates](https://htmx.org/extensions/client-side-templates/) Надає вам змогу зробити саме це:

```html
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>

<div hx-ext="client-side-templates">
    <template id="post-template" type="text/mustache">
        {{#posts}}
        <div class="post">
            <h3>{{title}}</h3>
            <p>{{excerpt}}</p>
        </div>
        {{/posts}}
    </template>

    <button hx-get="/api/posts"
            hx-target="#post-list"
            mustache-template="post-template">
        Load Posts
    </button>
    <div id="post-list"></div>
</div>
```

Цей підхід працює з шаблонами Mustche, processingbars або Nunjucks. Ваші WebAPI повертає JSON, але HTMX керує клієнтським інтерфейсом. Цей підхід особливо корисний, якщо у вас вже існує API або вам потрібно поділитися даними з мобільними програмами. Докладніше про розширення HTMX, зокрема шаблони клієнтської сторони, див. [супутня стаття](/blog/htmxandaspnetcore).

## Зловлює та дає поради

**Інструмент зневаджування:** Встановити [Розширення зневадника HTMX](https://chromewebstore.google.com/detail/htmx-debugger/) - вона показує всі просьби, відповідь і обмінюються місцями в режимі реального часу.

### Ключі CSRF

У ядрах антиforgery ASP. NET потрібні особливі інструменти керування з AJAX. HTMX. NET передбачено декілька чистих параметрів. Рекомендований спосіб використання `HtmxAntiforgeryScriptEndpoint`:

```csharp
// In Program.cs
app.MapHtmxAntiforgeryScript();
```

```html
<!-- In your layout head -->
<script src="@HtmxAntiforgeryScriptEndpoints.Path" defer></script>
```

Або скористайтеся помічником теґів: `<meta name="htmx-config" includeAspNetAntiforgeryToken="true" />`. Див. [Стаття Халіда про антикумерні тонки HTMX](https://khalidabuhakmeh.com/htmx-requests-with-aspnet-core-anti-forgery-tokens) (англ.) за докладними деталями.

### Billian. js @ shorthand in Razor

Альпійські гори `@click` Короткі конфлікти з Razor's `@` Синтаксис. Замість цього використовуйте чітку форму:

```razor
<button x-on:click="doSomething()">Click me</button>  <!-- Instead of @click -->
<div x-bind:class="isOpen ? 'block' : 'hidden'"></div>  <!-- Instead of :class -->
```

Або втекти з `@@click`, але ясніший синтаксис.

### Керування журналом

**Керування записами журналу:** Типово, HTMX надсилає всі запити до журналу. За пагін/ фільтри, де ви не бажаєте забруднювати історію:

```razor
<paging model="@Model" hx-push-url="false">  <!-- Don't add history entries -->
```

Або скористатися `hx-replace-url="true"` щоб оновити адресу URL без додавання записів.

**Фантомна проблема:** Переглядач назад/ forward показує лише частковий фрагмент без компонування. Виправити за допомогою `hx-history-elt` у вашому контейнері вмісту:

```html
<div class="container mx-auto" id="contentcontainer" hx-history-elt>
    @RenderBody()
</div>
```

За допомогою цього пункту можна вказати HTMX, який елемент слід зняти, зберігаючи при відновленні історію компонування.

### Caching CDN (Cloudflare тощо)

**Сиптом:** HTMX працює локально, але ламається після CDN - неправильний вміст буде кешовано.

**Коренева причина:** CDN проігнорується `HX-Request` заголовок. Ваш сервер повертає інший вміст, заснований на цьому заголовку, але кеш CDN зберігається ідентично.

**Виправлення ядра ASP. NET:** Користування `VaryByHeaderNames`:

```csharp
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" })]
```

**Виправлення CDN:** Налаштування правил кешу для включення `HX-Request` у ключі кешу. Для Harhaflare: Dashboard → Caching → Правила кешу → Нетиповий ключ кешу → Заголовки → Включати `HX-Request`.

### Дебат hx- boost

[`hx-boost`](https://htmx.org/attributes/hx-boost/) Перетворює звичайні посилання на запити AJAX. [Сторінка Природоохоронців HTMX](https://htmx.org/quirks/) замітка, деякі члени команди рекомендують уникати цього (discards `<head>` Зміст, впливає на місцеву поведінку), тоді як інші кажуть, що це добре для скорої перемоги.

```razor
<div hx-boost="true" hx-target="#contentcontainer">
    <a asp-action="Show" asp-route-slug="@post.Slug">Read More</a>
</div>
```

Цей блог широко використовує його. Під час наповнення специфічних контейнерів, явне використання `hx-get` зрозуміліше, але `hx-boost` працює, якщо ви послідовні. Вимкніть вибірково з `hx-boost="false"` про дитячі елементи.

## Висновки

HTMX з частинками ядра ASP. NET є поверненням до простоти з боку сервера без жертвування сучасного UX. Ви можете отримати:

- Динамічна, подібна до SPA взаємодія
- Відображення з боку сервера (значно для SEO)
- Правильне кешування HTTP
- Мінімальний JavaScript
- Прогресивне поліпшення
- Безпечний за типом маршрутизатор з HTMX. NET
- Pagination з нульовим налаштуванням за допомогою програми macilucid.pchingtaghelper

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

## Супутні статті щодо цього блогу

### Стаття для друзів

Ця стаття є частиною двосторонньої серії HTMX з ядром ASP. NET:

1. **Ця стаття** - Зосереджується на інтеграції ядра ASP.NET, часткових переглядах, HTMX.NET і пагіні
2. **[Об' єм розширень HTMX](/blog/htmxandaspnetcore)** - Глибоко занурившись у події HTMX, життєвий цикл, архітектуру розширення та нетипові розширення

### Додаткові статті HTMX

- [Додавання прив' язки до HTMX](/blog/addpagingwithhtmx) - Оригінальна стаття про впровадження пагінії зі старшим інструментом PaginationTagHelp
- [ASP. NET Core Caching з HTMX](/blog/aspnetcachingwithhtmx) - Глибше занурившись у стратегії каркування за запитами HTMX.
- [Автоповторення з альпійськими та HTMX](/blog/autorefreshwithalpineandhtmx) - Об' єднання альпійських.js з HTMX для реагуючих компонентів
- [Як зробити ваш сайт більш схожим на SPA з HTMX](/blog/htmxtomakeyoursitemorespalike) - Навігація, подібна до SPA, без оболонки JavaScript
- [Використання SweetAlert для індикаторів HX](/blog/usingsweetalertforhxindicators) - Чудовий завантажувальний індикатор з HTMX
- [Показ тоста і поміняння місцями з HTMX](/blog/showingtoastandswappingwithhtmx) - Сповіщення про тости на сервері

## Подальше читання

**Офіційна документація:**

- [Документація з HTMX](https://htmx.org/docs/) - Офіційна документація HTMX
- [Приклади HTMX](https://htmx.org/examples/) - Наведу приклади візерунків HTMX.
- [Розширення HTMX](https://htmx.org/extensions/) Офіційні розширення HTMX
- [Документація з Billian.js](https://alpinejs.dev/) - Офіційні альпійські.js docs
- [Billian.js Приклади](https://alpinejs.dev/examples) - Практичні альпійські візерунки.js
- [Часткові перегляди ядра ASP.NET](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial) - Microsoft' s Guide to partible views
- [Кечування виведення ядра ASP. NET](https://learn.microsoft.com/en-us/aspnet/core/performance/caching/output) - Офіційна документація з кешування

**& Інструменти бібліотек:**

- [HTMX. NET GitHub](https://github.com/khalidabuhakmeh/Htmx.Net) - Код бібліотеки HTMX. NET
- [HTMX. NET NOGE](https://www.nuget.org/packages/Htmx/) - HTMX. NET на NUGE
- [Htmx. TagHelpers NuGE](https://www.nuget.org/packages/Htmx.TagHelpers/) - Помічники міток HTMX на NUGE
- [Веб- сайт Халіда Абухаке](https://khalidabuhakmeh.com/) - Творець HTMX.NET з чудовими блоговими дописами
- [Халід Абгакме](https://github.com/khalidabuhakmeh) - Блискучі проекти з відкритим кодом. NET
- [threecluded.pproginghelper GitHub](https://github.com/scottgal/mostlylucid.pagingtaghelper) - Допоміжний код мого допоміжного теґу
- [threelucid.pproginghelper NUGE](https://www.nuget.org/packages/mostlylucid.pagingtaghelper/) - Пакунок на NuGet

**Ресурси спільноти:**

- [HTMX Dispord](https://htmx.org/discord) - Підтримка активного спільноти
- [Нарис HTMX](https://htmx.org/essays/) - Розумні статті про філософію HTMX
- [Книга hypermedia Systems](https://hypermedia.systems/) - Безкоштовна онлайн книга про створення гіпермедіадичних програм