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
Таким чином, в проекті, в якому я хочу додати можливість для часткової частини автонастанови на шкалі часу.
Ось як я це зробив, використовуючи альпійські.js і HTMX.
Я хотів, щоб це було
З цим на увазі я почав будувати маленький модуль JS за допомогою альпійських.js і HTMX.
Ви можете виконувати автоматичне оновлення можливостей " on і off " та " Пам' ятати " досить просто з самим HTMX. Наприклад, використання Ефекти HTMX ти дійсно можеш багато чого зробити.
<div id="campaignemail-request-list" hx-get="@Url.Action("List", "CampaignEmailRequest")" hx-trigger="every 30s" hx-swap="innerHTML">
<partial name="_List" model="@Model"/>
</div>
Дякую. @ KhalidAbuhkme за вказування цього.
Цей код насправді використовується hx-trigger щоб налаштувати автодату. Просто використовуйте альпійські. js для налаштування атрибутів HTMX.
Це насправді додає клієнтську сторону взаємодії користувача; це те, що альпійські.js є чудовим.
Код цього коду дійсно досить компактний, він розбитий на дві основні частини: модуль JS, оглядачі подій і HTML.
Цей модуль є простим модулем JS, який використовує альпійські. js для керування станом автооновлення. Він використовує локальне сховище, щоб запам'ятати стан автозавершення між запитами.
Він приймає парам:
endpointId - ідентифікатор елемента, який слід оновитиactionUrl - адреса url, яку слід викликати для оновлення елементаinitialInterval - початковий інтервал, який буде використано для автозадач (типово 30 секунд)Ми також бачимо, що він використовує декілька ключів; ці ключі використовуються для локального зберігання, щоб запам'ятати стан автооновлення.
Ви бачите, що я використовую actionurl як частина ключа, щоб зробити цю кінцеву точку специфічною.
export function autoUpdateController(endpointId, actionUrl, initialInterval = 30) {
const keyPrefix = `autoUpdate:${actionUrl}`;
const enabledKey = `${keyPrefix}:enabled`;
return {
autoUpdate: false,
interval: initialInterval,
toggleAutoUpdate() {
const el = document.getElementById(endpointId);
if (!el) return;
const url = new URL(window.location.href);
const query = url.searchParams.toString();
const fullUrl = query ? `${actionUrl}?${query}` : actionUrl;
const wasPreviouslyEnabled = localStorage.getItem(enabledKey) === 'true';
if (this.autoUpdate) {
el.setAttribute('hx-trigger', `every ${this.interval}s`);
el.setAttribute('hx-swap', 'innerHTML');
el.setAttribute('hx-get', fullUrl);
el.setAttribute('hx-headers', JSON.stringify({ AutoPoll: 'auto' }));
localStorage.setItem(enabledKey, 'true');
htmx.process(el); // rebind with updated attributes
if (!wasPreviouslyEnabled) {
htmx.ajax('GET', fullUrl, {
target: el,
swap: 'innerHTML',
headers: {AutoPoll: 'auto'}
});
}
} else {
el.removeAttribute('hx-trigger');
el.removeAttribute('hx-get');
el.removeAttribute('hx-swap');
el.removeAttribute('hx-headers');
localStorage.removeItem(enabledKey);
htmx.process(el);
}
},
init() {
this.autoUpdate = localStorage.getItem(enabledKey) === 'true';
this.toggleAutoUpdate();
}
};
}
toggleAutoUpdate() МетодЗа допомогою цього способу можна увімкнути або вимкнути автоматичне опитування елемента HTML за допомогою HTMX.
endpointId.fullUrl) об'єднавши дані actionUrl з рядком запиту поточної сторінки.localStorage (добре, що він запам'ятався між сеансами перегляду)this.autoUpdate є true (i.e., опитування увімкнено):hx-trigger опитувати кожні interval секундhx-swap="innerHTML" на зміну вмісту елемента ♪hx-get вказати на адресу URL опитуванняhx-headers додати нетипове "AutoPoll": "auto" заголовокlocalStoragehtmx.process(el) щоб HTMX розпізнав нові атрибутиhtmx.ajax() (не покладатися на проводки подій HTMX)this.autoUpdate є false (i.e., опитування вимкнено):localStoragehtmx.process(el) ще раз оновити поведінку HTMXУ нас тут також є гілка, яка може виконати автозапілля, коли вперше з'явиться можливість.
const wasPreviouslyEnabled = localStorage.getItem(enabledKey) === 'true';
if (!wasPreviouslyEnabled) {
htmx.ajax('GET', fullUrl, {
target: el,
swap: 'innerHTML',
headers: {AutoPoll: 'auto'}
});
}
Це виконує запит HTMX до fullUrl і оновлює елемент призначення за допомогою відповіді. Цей пункт буде корисним для того, щоб показати користувачеві, як виглядатиме автододатка, якщо вона увімкне його.
Ви помітите, що ми також відіслали заголовок HTMX з проханням. Це важливо для того, щоб ми могли визначити сторону сервера запиту.
el.setAttribute('hx-headers', JSON.stringify({ AutoPoll: 'auto' }));
headers: {AutoPoll: 'auto'}
У моїй стороні сервера я визначаю, що цей заголовок встановлено за допомогою
if (Request.Headers.TryGetValue("AutoPoll", out _))
{
var utcDate = DateTime.UtcNow;
var parisTz = TimeZoneInfo.FindSystemTimeZoneById("Europe/Paris");
var parisTime = TimeZoneInfo.ConvertTimeFromUtc(utcDate, parisTz);
var timeStr = parisTime.ToString("yyyy-MM-dd HH:mm:ss");
Response.ShowToast($"Auto Update Last updated: {timeStr} (paris)",true);
return PartialView("_List", requests);
}
Ви побачите, що я шукаю заголовок з Request.Headers.TryGetValue("AutoPoll", out _) И если он там, я знаю, что это просьба с автоматами.
Потім я беру поточний Йіме (це для французького клієнта, тому я конвертую в Париж) і з часом показую тост.
The ShowToast метод - це простий метод розширення, за допомогою якого можна вказати програмі, що HTMX слід показувати повідомлення тостів.
public static void ShowToast(this HttpResponse response, string message, bool success = true)
{
response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new
{
showToast = new
{
toast = message,
issuccess =success
}
}));
}
Це виявлено моїм компонентом тостів HTMX, який показує повідомлення.
document.body.addEventListener("showToast", (event) => {
const { toast, issuccess } = event.detail || {};
const type = issuccess === false ? 'error' : 'success';
showToast(toast || 'Done!', 3000, type);
});
Це викликає мій тост компонент I. пишеться про це .
Дуже просто з' єднати цей модуль, у вашій головній.js\ index.js, незалежно від того, чи просто імпортувати модуль і під'єднати його до вікна Window
import './auto-actions';
window.autoUpdateController = autoUpdateController; //note this isn't strictly necessary but it makes it easier to use in the HTML
//Where we actually hook it up to Alpine.js
document.addEventListener('alpine:init', () => {
Alpine.data('autoUpdate', function () {
const endpointId = this.$el.dataset.endpointId;
const actionUrl = this.$el.dataset.actionUrl;
const interval = parseInt(this.$el.dataset.interval || '30', 10); // default to 30s
return autoUpdateController(endpointId, actionUrl, interval);
});
});
Потім ми називаємо метод init в коді Razor ASP.NET:
Зробити це як маленький і придатний як можливо код Razor досить простий.
Тут ви можете бачити, що ви можете вказати атрибути даних альпійських. js, які слід налаштувати автоматично.
Ви побачите, що ми встановимо ціль, щоб використовувати для запиту campaignemail-request-list елемент. Це елемент, який буде оновлено з новим вмістом.
Це тоді включає щось на сторінці.
Якщо буде позначено цей пункт, список буде автоматично оновлено кожні 30 секунд.
<div class=" px-4 py-2 bg-base-100 border border-base-300 rounded-box"
x-data="autoUpdate()"
x-init="init"
x-on:change="toggleAutoUpdate"
data-endpoint-id="campaignemail-request-list"
data-action-url="@Url.Action("List", "CampaignEmailRequest")"
data-interval="30"
>
<label class="flex items-center gap-2">
<input type="checkbox" x-model="autoUpdate" class="toggle toggle-sm" />
<span class="label-text">
Auto update every <span x-text="$data.interval"></span>s
</span>
</label>
</div>
<!-- Voucher List -->
<div id="campaignemail-request-container">
<div
id="campaignemail-request-list">
<partial name="_List" model="@Model"/>
</div>
</div>
І це все, досить просто. Learching HTMX і Billian.js для створення простого автоматичного компонента, який можна легко використовувати з ядра ASP.NET.