المقدمة

إذاً في ما أصبح ' سلسلة , في مشروع عمل أردت أن أضيف قدرة للجزء إلى الـ"auto- تحديث على مقياس زمني محدد.

هنا ' كيف فعلت ذلك باستخدام Alpine.js وHTMXM SK2

المتطلبات

لذلك أردت أن يكون هذا

1. قابلة للتدوير; لذا يجب أن تكون بسيطة وذاتية- تحتوي بما فيه الكفاية ليتم تشغيلها تلقائياM SK2 تحديث أي عنصرMSC3
2. يجب أن يحترم parametris Url موجودة
3. يجب أن تكون قابلة للكشف على الجانب الخدمي (في ASP.Core NET في هذه الحالة
4. إذا قمت بتشغيله يجب أن يكون مفعّدا لهذا النقطة النهائية فقط وهذا يجب أن يتذكر بين الطلبات.
5. وينبغي أن يقوم بتحديثه فورًا عندما يتم تشغيله (لذلك يعرف المستخدم كيف يبدو
6. يجب أن يكون قادرا على إيقافه من قبل المستخدم
7. يجب أن يكون من السهل وضعها في صفحة

مع هذا في عقلي بدأت ببناء نموذج JS صغير باستخدام Alpine.js وHTMX.

ملاحظة

يمكنك إجراء تحديثات ذاتية بدون 'on and offM SK1 and 'remember' ببساطة مع 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>

شكراً @KhalidAbuhakmeh لإظهار هذا

هذا الرمز يستخدم في الواقع hx-trigger لإعداد اتومات -update. فقط باستخدام AlpineM SK2js لتنظيم صفات HTMX . هذا هو السبب في أن HTMX مع آلبين .js هي تركيبة قوية جداً ; HT MX يتعامل مع كل التفاعل مع сервер وطلبات AJAX МSK3 في حين أن آلبينـ.js يتعامل معه مع الحالة الجانبية والتفاعل مع المستخدم | . هل بإمكانك فعل ذلك أيضاً في لغة فانيلا JS ــ ? | بالتأكيد |, لكنك ستقوم بكتابة مجموعة من البرمجة لفعل نفس الشئ الذي تفعله هذه المكتبتين TINY بالفعل .

الرمز

البرمجة لهذا حقاً معقدة جداً

النموذج

هذا النموذج هو نموذج JS بسيط يستخدم آلبين.js لإدارة حالة الauto-updateMSC2 يستخدم الثخانة المحلية لتذكر حالة ال AutoM SK3update بين الطلباتMスク4

إنها تقبل الملاحظات :

• endpointId - إسم العناصر التي يجب تحديثها
• actionUrl - الurl الذي يجب أن يتصل به لتحديث العنصر
• initialInterval - الفاصل الأولي الذي يجب استخدامه للانتقال الذاتي-update (លំនាំاً هو 30 ثواني

يمكننا أيضاً أن نرى أنه يستخدم زوج من المفاتيح; هذه تستخدم للخزين المحلي لتتذكر حالة الauto-updateM SK2 يمكنكم أن تروا أنني أستخدم 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.
• يبني URL الطلب (fullUrl) بجمع المعطي actionUrl مع الصفحة الحالية'سلسلة الសំណួរ.
• يتأكد من إمكانية إحداث الإنتخابات من قبل عن طريق القراءة من localStorage (حسن كما يتذكر بين جلسات التصفح).

متى this.autoUpdate هو true (iM SK1e., تم إحداث التصويت

• يضع صفات HTMX على عنصر:
  • hx-trigger لاستطلاع كل interval ثواني
  • hx-swap="innerHTML" لإستبدال محتويات عنصر’
  • hx-get لتشير إلى موقع الإنتخابات
  • hx-headers لإضافة نموذج مخصص "AutoPoll": "auto" العنوان
• يحفظ الحالة المُمكنة إلى localStorage
• الإتصالات htmx.process(el) لجعل HTMX يتعرف على الخصائص الجديدة
• إذا كانت منفصلة من قبل , تطلق فورا طلب HTMX من خلال htmx.ajax() (لا نعتمد على إتصالات events HTMX)

متى this.autoUpdate هو false (iM SK1e., إن إختراع الإنتخابات غير فعال

• يزيل السمات الHTMX المسبقة
• يزيل الإعدادات المخزنة من localStorage
• الإتصالات htmx.process(el) مرة أخرى لتحديث سلوك HTMX

إستطلاع स्वतः عندما يتم تشغيله لأول مرة

لدينا أيضا فرع هنا للقيام بـ auto-poll عندما يتم تشغيله لأول مرة.

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 _) واذا كان هناك "مسك0" أعرفه "مكسك1" هو طلب تلقائي "مكسيك2"

ثم أقوم بأخذ الرمز الحالي (itM SK1s من أجل زبون فرانسوي, لذا أحول إلى وقت باريسMSC3 وأعرض الخبز مع الوقتMST4

إظهار الخبز

الـ 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 toast" الخاص بي والذي يظهر الرسالة.

document.body.addEventListener("showToast", (event) => {
    const { toast, issuccess } = event.detail || {};
    const type = issuccess === false ? 'error' : 'success';
    showToast(toast || 'Done!', 3000, type);
});

هذا يتصل بعد ذلك بجزء الخبز خاصتي كتب عنه هنا .

إزهارها

إنها ' بسيطة جداً لربط هذا النموذج إلى , في منفذك الرئيسي.js \indexM SK4js أيا كان مجرد إدخاله وربطه إلى النافذة

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

ثم ندع طريقة الابتكار في ASP.NET رمز Razor:

ASP.NET شفرة Razor

لجعل هذا صغيراً وقابلاً للاستعمال مرة أخرى هو برمجة Razor بسيطة جداً.

هنا يمكنكم أن تروا أنني أشير إلى خصائص Alpine.js للبيانات لإعداد الـ autoM SK1update.

• x-data: هذا هو المكان الذي قمنا فيه بإعداد نموذج AlpineM SK2js للبيانات
• x-init: هذا هو المكان الذي ندع فيه أسلوب الابتكار على جهاز التحكم الذاتيM SK2update
• x-onM SK1change: هذا هو المكان الذي ندعوه ب"toggleAutoUpdate method on the auto" .
• data-endpoint-idM SK2 هذا هو id العناصر التي يجب تحديثها
• data-actionM SK1url: هذا هو الurl الذي يجب أن يتصل به لتحديث العناصرMSC3
• البيانات-interval: هذا هو الفاصل الذي يجب أن يستخدمه للانتقال الذاتي M SK2update (លំនាំا هو |30 ثواني | ).

ستلاحظون أننا وضعنا هدفاً لنستخدمه في الطلب إلى 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>

في الختام

وتلك هي "مسك0" "مسک1" بسيط جداً حقاً "مSK2" استفادة من "HTMX" و "Alpine" . "js" لخلق مكون اتوماتي بسيط - "update" يمكننا استخدامه بسهولة من "ASP" . "NET Core"