Введение

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

NOTA: ЯM SK1 я не зовсім задоволений цим поки що , HTMX має деякі елементи, які роблять це складним

HTMX і ASP.NET

Використовуючи HTMX з ASP.NET Core - це щось на кшталт мрії цей пост. Це МSK1 дійсно дуже легко МSK2 HTTPіфікувати ' ваш сайт \ , і це \ МSK5 чудовий спосіб зробити вашу веб-сторінку більш реакційною

Нормальні зв 'язки

Як частина мого останнього подорожі за допомогою HTMX я вирішив зробити якомога більше зв 'язків на цій сайті за допомогою HTX. Таким чином, наприклад, якщо ви натиснете на кнопку 'HomeM SK2 зверху вона тепер використовує HTX для завантаження змісту сторінки.

Я досягаю цього, просто доставляючи деякі властивості до зв 'язку.

    <a asp-action="IndexPartial" asp-controller="Home" hx-swap="show:window:top"  hx-target="#contentcontainer" hx-boost="true" class="mr-auto sm:mr-6">
     <div class="svg-container">
        <img src="/img/logo.svg" asp-append-version="true"  width="180px" height="30px"  alt="logo"  :class="{ 'img-filter-dark': isDarkMode }"/>
     </div>
    </a>

Тут ви бачите, що я додав hx-swap атрибут, це каже HTMX поміняти зміст об 'єкту з тим, що повертається від сервера

NOTA: Не використовувати hx-pushurl, бо це змусить браузер перезагрузити сторінку на зворотньому кнопці двічіM SK2

І hx-target атрибут вказує HTMX, де помістити контент, повернуty з сервера. В цьому випадку це #contentcontainer елемент (в якому завантажений весь зміст сторінкиM SK1

Я також додала hx-swap="show:window:top що робить вікно рухатись вгору сторінки, коли зміст змінюється.

C# частина цього досить проста , вона просто подібна до мого звичайного методу індексу, але замість цього завантажує частинний вид HTMX.NET для виявлення hx-request заголовок і повертає частину поля зору. Там ' є також відрізанийM SK2 для повернення нормального поля зору, якщо запрос не є HTMX запитом

    [Route("/IndexPartial")]
    [OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" })]
    [ResponseCache(Duration = 300, VaryByHeader = "hx-request",
        Location = ResponseCacheLocation.Any)]
    [HttpGet]
    public async Task<IActionResult> IndexPartial()
    {
        ViewBag.Title = "mostlylucid";
        if(!Request.IsHtmx()) return RedirectToAction("Index");
        var authenticateResult = await GetUserInfo();
        var posts = await BlogService.GetPagedPosts(1, 5);
        posts.LinkUrl = Url.Action("Index", "Home");
     
        var indexPageViewModel = new IndexPageViewModel
        {
            Posts = posts, Authenticated = authenticateResult.LoggedIn, Name = authenticateResult.Name,
            AvatarUrl = authenticateResult.AvatarUrl
        };
        return PartialView("_HomePartial", indexPageViewModel);
    }

Результатом цього є те, що цей зв 'язок ( та інші, які використовують ту саму техніку ) завантажують як МSK2 AJAX МSK3 запити, і контент змінюється без перезавантаження всієї сторінки | . | Це уникає неприємного | МSK5 | світлого спалаху |' | ви отримуєте, коли сторінка перезагрузується через те, як працює перемикач моєї теми |

Ссылки на блоги (простішеM SK1

Таким чином, метод, який показано, можна зробити таким, яким він є: HTMX дійсно любить працювати, використовуючи підхід на основі атрибутів. htmx.ajax це щось на кшталт ', якщо все інше не працює ' метод і означає, що вам потрібно заплутати історію Borwser На жаль, історія браузера, яка використовує pushState replaceState і popstate це дійсно трохи боля в шиї ( але може бути дуже потужним для країв

Натомість, що я зараз роблю - це просто додаю hx-boost на тег, що містить блоговий контент.

   <div class="prose prose max-w-none border-b py-2 text-black dark:prose-dark sm:py-2" hx-boost="true"  hx-target="#contentcontainer">
        @Html.Raw(Model.HtmlContent)
    </div>

Це, здається, працює добре, hx-boost можна розмістити на батьківських методах і застосувати до всіх дитячих зв 'язків. ЦеM SK1 також більш стандартний HTMX без побоювання з історією і т.д.

У рідкісних випадках, коли ви не хочете використовувати HTMX для певних зв 'язків, ви можете просто додати hx-boost="false" на посилання.

Ссылки на блоги (НOTEM SK1 Я відмовився від такого підходу, але залишаю його тут для порівняння

Але проблема з цим підходом була в тому, що мої блогові посилання були такими, як цей. HTMX для такого досвіду як SPA- які не є 'нормальніM SK1 зв 'язки. Ці зв' язки генеруються компанією parser для відмітки донизу ; тоді як я можу написати MarkDig rozszerzenie, щоб додавати атрибути HTMX до зв 'язків МSK4 Я вирішив використати інший підхід МSK5 тому що у мене вже є тонна контенту. Я не хочу відновити його.

Натомість я додав функцію JavaScript, яка шукає всі ці типи посилання, тоді використовує htmx.ajax для заміни. Це, по суті, те, що робить HTMX в будь-якому разі просто M SK1ручній'.

Як бачите, це просто проста функція, яка шукає всі зв 'язки в div.prose елемент, що починається з / а потім до них додає слухача подій. Коли на посилання натискають, події запобігають , URL витягується, а потім htmx.ajax функція викликана з URL та точним елементом для оновлення

(function(window) {
   
    window.blogswitcher =() =>  {
        const blogLinks = document.querySelectorAll('div.prose  a[href^="/"]');

        // Iterate through all the selected blog links
        blogLinks.forEach(link => {
            link.addEventListener('click', function(event) {
               event.preventDefault();
                let link = event.currentTarget;
                let url = link.href;
                htmx.ajax('get', url, {
                    target: '#contentcontainer',  // The container to update
                    swap: 'innerHTML',            // Replace the content inside the target


                }).then(function() {
                    history.pushState(null, '', url);
                  
                        window.scrollTo({
                            top: 0,
                            behavior: 'smooth' // For a smooth scrolling effect
                        });
                    
                });
            });
        });
        
    };
})(window);

Крім того, після того, як я зробив обмін, я натискаю новий URL в історію браузера і перегортаюся вгору сторінки. Я використовую цей підхід в кількох місцях M SK1подібне пошукові ) для того, щоб дати гарний пухнастий гладкий досвід.

Button Back (To is tricky to get workingM SK1

Бакульний кнопок в цьому типі додатку може бути проблематичним; МANY MSC1правильнийM SK2 SPA або відключають назад кнопку, або змираються з цим неправильним поведениемМSK3 Однак я хотів переконатися, що назад кнопка працювала так, як очікувалося Примітка: Для того, щоб кнопка назад працювала, як очікувалося, нам також потрібно слухати popState подія. Ця подія активується, коли пользователь рухається назад або вперед в історії браузераM SK1 Коли ця подія вивільняється, ми можемо перезагрузити зміст для теперішнього URL

window.addEventListener("popstate",   (event) => {
 // When the user navigates back, reload the content for the current URL
 event.preventDefault();
 let url = window.location.href;
 // Perform the HTMX AJAX request to load the content for the current state
 htmx.ajax('get', url, {
  target: '#contentcontainer',
  swap: 'innerHTML'
 }).then(function () {
  // Scroll to the top of the page
  window.scrollTo({
   top: 0,
   behavior: 'smooth'
  });
 });
});

В цьому коді ми запобігаємо початковій поведінці браузера з event.preventDefault() зателефонувати. Далі ми виділяємо поточний URL з window.location.href property і виконувати запрос HTMX AJAX на завантаження контенту для теперішнього стану. Як тільки контент завантажений, ми перегортаємо його до верхньої частини сторінки

Як я вже казав, ви не можете використовувати hx-pushurl так як це дозволить браузеру перезагрузити сторінку на зворотньому кнопці двічі.

HTMX в цілому ( та альпійські .jsM SK2

Як ви мабуть здогадалися, я - прихильник HTMX, разом із ASPM SK2NET Core і комп 'ютером Alpine.js, що дає девісу можливість створити справді гарне польовий досвід з мінімальним навантаженням. Найголовніше, що я віддаю перевагу над тими, що більш складні, як React / Angular і т.д. ..., це те, що вони все ще дають мені повний сервер \ - \ side rendering pipeline з ASP \ МSK5 \ Net Core, але з SPA Альпіний.js дозволяє просте інтерактивність з боку клієнта , дуже проста функція, яку я нещодавно додала, це створення моїх категорій M SK2 прихований M SK3 але розширити на один клік

Використовуючи Alpine.js для цього означає, що там 's немає додаткового Java-скрипту

        <div class="mb-8 mt-6 border-neutral-400 dark:border-neutral-600 border rounded-lg" x-data="{ showCategories: false }">
            <h4 
                class="px-5 py-1 bg-neutral-500  bg-opacity-10 rounded-lg  font-body text-primary dark:text-white w-full flex justify-between items-center cursor-pointer"
                x-on:click="showCategories = !showCategories"
            >
                Categories
                <span>
                    <i
                        class="bx text-2xl"
                        :class="showCategories ? 'bx-chevron-up' : 'bx-chevron-down'"
                    ></i>
                </span>
            </h4>
            <div 
                class="flex flex-wrap gap-2 pt-2 pl-5 pr-5 pb-2"
                x-show="showCategories" 
                x-cloak
                x-transition:enter="max-h-0 opacity-0"
                x-transition:enter-end="max-h-screen opacity-100"
                x-transition:leave="max-h-screen opacity-100"
                x-transition:leave-end="max-h-0 opacity-0"
            >
                @foreach (var category in ViewBag.Categories)
                {
                    <partial name="_Category" model="category"/>
                }
           
            </div>
        </div>

Тут ви бачите, я використовую x-data атрибут для створення нового об 'єкта даних Alpine.jsM SK1 в цьому випадку showCategories. Це болельський літер, який вмикається, коли h4 на кнопку elementu. x-on:click властивість використовується, щоб прив 'язати клікання до funkcji перемикання.

В списку категорій я потім використовую x-show атрибут, щоб показати чи приховати список категорій на основі showCategories. Я також користуюсь x-transition властивість додавати красивий ефект слайду вниз, коли категорії показані або приховані. І x-cloak властивість для того, щоб запобігти wyświetlенню 'flicker' категорій перед запуском JavaScript У мене є маленька клас CSS, визначена для цього:

[x-cloak] { display: none !important; }

На завершення

Таким чином, це ' МSK1 короткий artykuł про те, як користуватися HTMX і місцем Альпіану .js, щоб зробити вашу веб-сторінку більш реакційною та МSK3SPAM SK4 такою ж, як СМСК5 Я сподіваюся, що ви знайшли це корисною СМСК6 Якщо у вас є якісь питання чи коментарі, будь ласка, залишіть їх внизу ММСК7