परिचय

तो क्या एक श्रृंखला बन रहा है में, एक कार्य परियोजना में...... मैं एक आंशिक के लिए स्वचालित- अप अद्यतन की क्षमता जोड़ना चाहता था एक दिए गए समय स्केल पर।

मैं यह Ajjs और HMMX का उपयोग कैसे किया है.

आवश्यकताएँ

तो मैं यह होना चाहता था

1. रीकरेबल; तो यह सरल होना चाहिए और स्वयं को किसी भी तत्व को स्वचालित अद्यतन करने के लिए पर्याप्त कवर किया जाना चाहिए.
2. इसे मौजूदा यूआरएल पैरामीटर्स का आदर करना चाहिए
3. यह आपके सर्वर साइड को पता लगाने योग्य होना चाहिए (यूपीएस में. इस उदाहरण में जिसका उल्लेख किया गया है)
4. यदि इसे चालू किया जाता है तो इसे सक्षम किया जाना चाहिए उस अंत- बिन्दु के लिए केवल और यह निवेदन के बीच याद किया जाना चाहिए.
5. यह तत्काल अद्यतन करना चाहिए जब सक्षम किया जाता है (इसलिए उपयोक्ता जानता है कि यह कैसा दिखता है)
6. उपयोक्ता द्वारा बन्द किया जा सकता है
7. पृष्ठ में शामिल होने के लिए सरल होना चाहिए ।

इस बात को मन में रखते हुए मैंने एक छोटा - सा इनकार करनेवाले मॉड्यूल बनाना शुरू कर दिया ।

ग़ौर किया जा रहा है

आप 'on और बंद' को स्वचालित कर सकते हैं और 'यादा' विशेषताओं को सिर्फ HMMMX के साथ काफी नहीं है. उदाहरण के लिए; प्रयोग किया जा रहा है एचएमएमएक्स ट्रिगर्स आप वास्तव में बहुत कुछ कर सकते हैं.

<div id="campaignemail-request-list" hx-get="@Url.Action("List", "CampaignEmailRequest")" hx-trigger="every 30s" hx-swap="innerHTML">
    <partial name="_List" model="@Model"/>
</div>

इन्हें धन्यवाद @Kididhikakakh इस बात का इशारा करने के लिए।

यह कोड वास्तव में उपयोग में आता है hx-trigger स्वचालित अद्यतन सेट करने के लिए. HMMMX गुणों को कॉन्फ़िगर करने के लिए सिर्फ एक आगामी का प्रयोग करें.

यह कैसे जोड़ता है यह उपयोगकर्ता संपर्क ग्राहक पक्ष है, जो एक अनपेक्षितता है. js बहुत अधिक है.

कोड

इस के लिए कोड वास्तव में सुंदर कड़ी है, यह दो मुख्य भागों में टूट गया है; एक जेएस मॉड्यूल, घटना हैंडलर्स और एचटीएमएल.

मोड्यूल

मॉड्यूल एक सरल इनकारक मॉड्यूल है जो आक्वेंशन प्रयोग करता है.js ऑटो- अप अद्यतन की स्थिति का प्रबंधन करने के लिए। यह निवेदन के बीच स्वचालित अद्यतन की स्थिति को याद करने के लिए स्थानीय भंडारण का उपयोग करता है.

यह मुखात स्वीकार करता है:

• endpointId - अद्यतन किया जाने वाला तत्व का आईडी
• actionUrl - यूआरएल को तत्व अद्यतन करने के लिए बुलाया जाना है
• 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() विधि

यह विधि HMMX के उपयोग से लक्ष्य एचटीएमएल तत्व के स्वचालित पोलिंग सक्षम या अक्षम करता है.

व्यवहार

• इसके अवयव को इसके तत्व से चुनें endpointId.
• निवेदन यूआरएल बिल्ड करता है (.fullUrlदिए गए संयोजन के द्वारा actionUrl वर्तमान पृष्ठ के क्वैरी वाक्यांश के साथ.
• चेक करें यदि इससे पहले निकाला जा रहा है जो पढ़ने के द्वारा सक्षम किया गया था localStorage (जब ब्राउज़र सत्रों के बीच याद दिलाया जाता है)

कब this.autoUpdate है true ( एस., सर्वेिंग सक्षम है):

• तत्व पर HMAX गुण सेट करता है:
  • hx-trigger प्रत्येक को सर्वे करने के लिए interval सेकण्ड
  • hx-swap="innerHTML" तत्व की सामग्री को बदलने के लिए
  • hx-get पोलिंग यूआरएल पर इंगित करने के लिए
  • hx-headers पसंदीदा जोड़ने के लिए "AutoPoll": "auto" शीर्षिका
• सक्षम अवस्था को सहेजें localStorage
• कॉल htmx.process(el) HMSX को नए गुणों को पहचानने के लिए
• अगर यह पहले से बंद था, तुरंत HMAX निवेदन चालू करता है के द्वारा htmx.ajax() (होमएक्स घटना पर भरोसा नहीं)

कब this.autoUpdate है false ( एस. एस.), सर्वेक्षण अक्षम होता है:

• ऊपर दिया गया HMMX गुण मिटाता है
• से सहेजा गया विन्यास साफ करता है localStorage
• कॉल htmx.process(el) HMMMX बर्ताव को अद्यतन करने के लिए फिर से सेट करें

जब पहली बार सक्षम हो तो स्वचलित पोल

हम भी यहाँ में एक शाखा है जब पहली बार सक्षम किया गया है ऑटो-पोज को पूरा करने के लिए।

const wasPreviouslyEnabled = localStorage.getItem(enabledKey) === 'true';
      if (!wasPreviouslyEnabled) {
                    htmx.ajax('GET', fullUrl, {
                        target: el,
                        swap: 'innerHTML',
                        headers: {AutoPoll: 'auto'}
                    });
                }

यह एक HMAX निवेदन करता है fullUrl प्रतिक्रिया के साथ लक्ष्य तत्व को अद्यतन करें. यह उपयोक्ता को दिखाने के लिए उपयोगी है कि स्वचालित अद्यतन क्या होगा जब वे इसे सक्रिय करते हैं.

शीर्ष

आप भी हम एक HMAX हेडर को निवेदन के साथ भेज देंगे. यह महत्वपूर्ण है क्योंकि यह हमें निवेदन सर्वर साइड का पता लगाने की अनुमति देता है.

   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 _) और अगर यह वहाँ मैं जानता हूँ कि यह एक ऑटो-पोज़ निवेदन है।

मैं तो मौजूदा yme पकड़ (यह एक फ्रांसीसी ग्राहक के लिए है, तो मैं पेरिस समय के लिए परिवर्तन) और समय के साथ एक जाम दिखाने के लिए।

टन दिखाएँ ( _T)

वह ShowToast विधि एक साधारण विस्तार विधि है जो HMMMX को एक जाम संदेश दिखाने के लिए ट्रिगर करता है.

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

    }

यह तब मेरी HMMAX बॉट अवयव द्वारा पता चला है जो संदेश दिखाता है.

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

यह तब मेरे पैरेंट घटक मैं में कॉल करता है यहाँ लिखा है .

इसे बंद कर दो

यह आपकी मुख्य सूची में, इस मॉड्यूल को हुक करने के लिए बहुत सरल है.

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

फिर हम अपिक में विधि कहते हैं. नैट रावर कोड:

एनईएस.नेट राजेर कोड

इसे छोटा बनाने के लिए...... संभव के रूप में वापस आने वाले कोड बहुत सरल है.

यहाँ पर आप देख सकते हैं कि Ajjs डेटा गुण जिन्हें स्वतः अद्यतन करने के लिए सेट किया जा सकता है.

• एक्स- डाटा: यह है जहाँ हमने आक्वेंशन को स्थापित किया है.js डेटा ऑब्जेक्ट.
• एक्स-in: यह है जहां हम ऑटो- अप नियंत्रण पर विधि कहते हैं.
• x-on: बदले में: यह वहीं है जहाँ हम टॉगल अद्यतन विधि को स्वचालित अद्यतन नियंत्रण पर बुला रहे हैं.
• डाटा- मानक- आईडी: यह तत्व का आईडी है जिसे अद्यतन किया जाना है.
• डाटा- निर्देश- कर्ल: यह यूआरएल तत्व को अद्यतन करने के लिए बुलाया जा रहा है.
• आँकड़ा सेटिंग: यह अंतराल है जिसे स्वचालित अद्यतन के लिए प्रयोग किया जाना है (डिफ़ॉल्ट 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>

ऑन्टियम

और यह बहुत सरल है. एल.एल.एल.एस.) एक सरल स्वचालित स्वचालित अद्यतन घटक बनाने के लिए हम आसानी से उपयोग कर सकते हैं