# HMMMX विस्तार के एक वुल्फहिमल-स्टिंग विस्तार का उपयोग करता है और सी.नेट कोर के साथ इस्तेमाल करता है

<datetime class="hidden">2025-05-02T20:30</datetime>

<!--category-- Javascript, HTMX, ASP.NET Core -->
# परिचय

HMX एक शक्तिशाली जावास्क्रिप्ट लाइब्रेरी है जो आपको न्यूनतम जावास्क्रिप्ट के साथ गतिशील वेब अनुप्रयोगों को बनाने की अनुमति देता है. यह आपको AJJJAX निवेदन, HTML सामग्री, और सीधे आपके HTML गुणों में घटनाओं को संचालित करने के लिए सक्षम करता है. मैं HMX का प्रयोग कर रहा हूँ इस बिंदु पर और हर परियोजना के बारे में और अधिक सीखने के लिए, और अधिक सक्षमता के बारे में और अधिक महत्वपूर्णता.

लेकिन मैं अभी भी इसके बारे में निपुण ज्ञान रखने का दावा नहीं करता. मैं बस उन चीजों में से कुछ हिस्सा लेना चाहता था जो मैंने इस तरह सीखा है.

> **मित्र आलेख:** इस लेख में HMMAX की घटना प्रणाली, विस्तार, और विस्तृत व्यवस्था पर ध्यान दिया गया है. [एचएसईएसई के साथ एटीएमएक्स.नेटए कोर आंशिकता: सर्वर- अप- ओएस](/blog/htmx-aspnetcore-partials).

[TOC]

# घटनाएँ

## निवेदन तैयारी

निवेदन नियत चरण है जहाँ सर्वर को भेजा जाना है. इसमें शीर्षकों को सेट करना, पैरामीटर जोड़ना तथा उपयोक्ता इनपुट को नियंत्रित करना शामिल है. निम्न घटनाएँ इस चरण के दौरान नियत होती हैं:

```mermaid
flowchart LR

        A[htmx:configRequest] --> B[htmx:confirm] --> C[htmx:prompt] --> D[htmx:abort]

```

## जीवन - साथी की गुज़ारिश

निवेदन यह है कि HMMMX सर्वर को निवेदन भेजता है और प्रतिक्रियाओं को संभालता है. निम्न घटनाएँ इस चरण के दौरान शुरू होती हैं:

```mermaid
flowchart LR
 E[htmx:beforeRequest] --> F[htmx:request] --> G[htmx:afterRequest]
```

## अनुक्रिया हैंडलिंग

प्रतिक्रिया नियंत्रण चरण है जहां HMMMX प्रक्रिया सर्वर से प्रतिक्रियाओं को अद्यतन करता है और डोम को अद्यतन करता है. निम्न घटनाएँ इस चरण के दौरान उत्पन्न होती हैं:

```mermaid
flowchart LR
        H[htmx:beforeOnLoad] --> I[htmx:onLoad]
        I --> J[htmx:beforeSwap] --> K[htmx:swap] --> L[htmx:afterSwap]
        L --> M[htmx:afterSettle] --> N[htmx:afterOnLoad]

```

## इतिहास प्रबंधन

इतिहास प्रबंधन चरण है जहां HMSX ब्राउज़र इतिहास और यूआरएल अद्यतन करता है. निम्न घटनाएँ इस चरण के दौरान शुरू होती हैं:

```mermaid
flowchart LR
 A[htmx:historyRestoreRequest]
 A --> B[htmx:historyPopped]
 B --> C[htmx:historyRestorePage]
```

जैसा कि आप HMMMX कई घटनाओं को देख सकते हैं जो आप निवेदन या प्रतिक्रिया, या इतिहास को परिवर्धित कर सकते हैं, HMMX एक ऐसी वाचा प्रणाली होने के लिए है. इन में से प्रत्येक का उपयोग आप कर सकते हैं कि सर्वर / उच्च गति से सक्षम तरीके से सर्वर के साथ कैसे व्यवहार करता है.

# विस्तार

HMAX के सबसे शक्‍तिशाली पहलू में से एक है [विस्तार](https://v2-0v2-0.htmx.org/extensions/) अपनी क्षमताओं को विस्तार करने के लिए. मेरे मामले में, मैं आम तौर पर हुक में `htmx:configRequest` निवेदन में अतिरिक्त पैरामीटर्स जोड़ने के लिए. यह उपयोगी है जब आप HTML या जावास्क्रिप्ट कोड को संशोधित करना चाहते हैं तो यह उपयोगी है.

अन्य विस्तार हुक हो सकता है `htmx:beforeRequest` भेजने से पहले निवेदन को परिवर्धित करें, लेकिन **पश्चात** अन्य विस्तार जो हुक `configRequest`; जैसा कि में `beforeRequest` जैसे सामान `HX-Vals` और `HX-Include`S पहले से ही रीस्ट में जोड़े गए हैं (यदि सक्रिय किया जा रहा है\ क्वैरी वाक्यांश में).
आप भी हुक कर सकते हैं `htmx:afterSwap` वस्तुओं के बदलने के बाद क्रियाएँ करने के लिए. क्लाएंट पारिंग लाइब्रेरी के साथ जोड़ दिया गया है जैसे कि [यू. एस.](https://alpinejs.dev/) या [लि.](https://lit.dev/) आप न्यूनतम कोड के साथ शक्तिशाली गतिशील अनुप्रयोगों को बना सकते हैं.

HMAX कुछ निर्मित विस्तार प्रदान करता है जैसे `hx-boost` और `hx-swap-oob` जो आपको HMAX के कार्य को बिना किसी मनपसंद कोड को लिखने की अनुमति देता है. लेकिन, जब आपको विशिष्ट माँगों को पूरा करने के लिए अपने स्वयं विस्तार को तैयार करने की ज़रूरत होती है, तब समय आ जाता है.

उदाहरण के लिए, आप अपने निवेदन में मनपसंद शीर्षिका को जोड़ना चाहते हैं, निवेदन को परिवर्धित करें, या विशिष्ट घटनाओं को किसी विशिष्ट तरीके से हैंडल करना चाहेंगे.

इस HMMAX प्राप्त करने के लिए आप कुछ हाथ युक्त मुद्दों को प्रदान करते हैं:

```javascript

{
  /**
   * init(api)
   * Called once when the extension is initialized.
   * Use it to set up internal state, store references, or access HTMX utility functions via the api parameter.
   */
  init: function(api) {
    return null;
  },

  /**
   * getSelectors()
   * Returns additional CSS selectors that HTMX should monitor.
   * Useful if your extension needs to handle custom elements or dynamic behavior.
   */
  getSelectors: function() {
    return null;
  },

  /**
   * onEvent(name, evt)
   * Called on every HTMX event (e.g., htmx:beforeRequest, htmx:afterSwap).
   * Return false to cancel the event or stop propagation.
   */
  onEvent: function(name, evt) {
    return true;
  },

  /**
   * transformResponse(text, xhr, elt)
   * Modify the raw response text before it is parsed and swapped into the DOM.
   * Use this to sanitize or preprocess HTML.
   */
  transformResponse: function(text, xhr, elt) {
    return text;
  },

  /**
   * isInlineSwap(swapStyle)
   * Return true if your extension will handle this swap style manually.
   * This tells HTMX to skip default behavior.
   */
  isInlineSwap: function(swapStyle) {
    return false;
  },

  /**
   * handleSwap(swapStyle, target, fragment, settleInfo)
   * Perform custom DOM manipulation if you implement a custom swap style.
   * Return true to prevent HTMX's default swap.
   */
  handleSwap: function(swapStyle, target, fragment, settleInfo) {
    return false;
  },

  /**
   * encodeParameters(xhr, parameters, elt)
   * Modify or serialize request parameters before sending.
   * Return null to use default URL/form encoding.
   * Return a string to override with a custom payload (e.g., JSON).
   */
  encodeParameters: function(xhr, parameters, elt) {
    return null;
  }
}
```

HMAX कई विस्तार विस्तार विस्तार विस्तार विस्तार प्रदान करता है आप कर सकते हैं [यहाँ के बारे में पढ़ें](https://htmx.org/extensions/).

उदाहरण के लिए [एक्सटेंशन गुम है](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/json-enc/README.md) `json-encode` URL-ened फ़ॉर्म डाटा के बजाए JSON डाटा को निवेदन शरीर में भेजने की अनुमति देता है. यह उपयोगी है जब आप जटिल डाटा संरचनाओं या ऐक्सेस भेजने के लिए चाहते हैं.
आप देख सकते हैं कि यह घेरा 3 घटनाओं में डाला गया है

- `init` - विस्तार सेट करने और HMAX एपीआई के लिए एक संदर्भ सेट करने के लिए
- `onEvent` - सेट करने के लिए `Content-Type` शीर्षिका को `application/json` जब निवेदन विन्यस्त किया जा रहा हो
- `encodeParameters` - डिफ़ॉल्ट यूआरएल-enकोड फ़ॉर्म एनकोडिंग को ओवरराइड करने के लिए तथा पैरामीटरों को JSON के रूप में सीरियल करने के लिए एक वाक्यांश लौटाता है. यह डिफ़ॉल्ट यूआरएल-end एनकोडिंग इस्तेमाल से बचने के लिए HMMSX को भी लौटाता है.

```javascript
(function() {
  let api
  htmx.defineExtension('json-enc', {
    init: function(apiRef) {
      api = apiRef
    },

    onEvent: function(name, evt) {
      if (name === 'htmx:configRequest') {
        evt.detail.headers['Content-Type'] = 'application/json'
      }
    },

    encodeParameters: function(xhr, parameters, elt) {
      xhr.overrideMimeType('text/json')

      const object = {}
      parameters.forEach(function(value, key) {
        if (Object.hasOwn(object, key)) {
          if (!Array.isArray(object[key])) {
            object[key] = [object[key]]
          }
          object[key].push(value)
        } else {
          object[key] = value
        }
      })

      const vals = api.getExpressionVars(elt)
      Object.keys(object).forEach(function(key) {
        // FormData encodes values as strings, restore hx-vals/hx-vars with their initial types
        object[key] = Object.hasOwn(vals, key) ? vals[key] : object[key]
      })

      return (JSON.stringify(object))
    }
  })
})()
```

या फिर वह आसान भी हो गया है लेकिन उससे भी ज़्यादा हागा है `hx-debug` एक्सटेंशन जो एक जोड़ता है `HX-Debug` निवेदन में शीर्षक. यह डिबगिंग और लॉगिंग उद्देश्‍य के लिए उपयोगी है, क्योंकि यह आपको dev कंसोल में रॉ निवेदन और प्रतिक्रिया डेटा को देखने देता है.

```javascript
(function() {
  htmx.defineExtension('debug', {
    onEvent: function(name, evt) {
      if (console.debug) {
        console.debug(name, evt)
      } else if (console) {
        console.log('DEBUG:', name, evt)
      } else {
        throw new Error('NO CONSOLE SUPPORTED')
      }
    }
  })
})()

```

वहाँ बहुत अधिक है; एक बहुत शक्तिशाली भी है [क्लाएंट साइड ग्रुपिंग विस्तार](https://github.com/bigskysoftware/htmx-extensions/tree/main/src/client-side-templates) जो आपको क्लाएंट- साइड रिलिंग लाइब्रेरी का उपयोग करने की अनुमति देता है JSON डाटा को एचटीएमएल में परिवर्तित करने के लिए. यह गतिशील यूआईों को बनाने के लिए उपयोगी है बिना सर्वर के किनारे पर भरोसा करने के लिए.

# कुछ मनपसंद विस्तार

## गतिशील पंक्ति आईडी

हाल ही में एक परियोजना में मैंने HMAXOB की मदद से एक मेज़ पर कई पंक्तियों का अद्यतन करने के लिए प्रयोग किया.
ऐसा करने के लिए मैं जानना चाहता था कि कौन सी पंक्ति वर्तमान में प्रदर्शित की जा रही है, इसलिए मैं केवल उन पंक्तियों को अद्यतन किया जो दृश्‍य थीं ।

### एक्सटेंशन

```javascript
export default {
    encodeParameters: function (xhr, parameters, elt) {
        const ext = elt.getAttribute('hx-ext') || '';
        if (!ext.split(',').map(e => e.trim()).includes('dynamic-rowids')) {
            return null; // Use default behavior
        }

        const id = elt.dataset.id;
        const approve = elt.dataset.approve === 'true';
        const minimal = elt.dataset.minimal === 'true';
        const single = elt.dataset.single === 'true';

        const target = elt.dataset.target;
        const payload = { id, approve, minimal, single };

        if (approve && target) {
            const table = document.querySelector(target);
            if (table) {
                const rowIds = Array.from(table.querySelectorAll('tr[id^="row-"]'))
                    .map(row => row.id.replace('row-', ''));
                payload.rowIds = rowIds;
            }
        }

        // Merge payload into the parameters object
        Object.assign(parameters, payload);
        return null; // Return null to continue with default URL-encoded form encoding
    }
}
```

### इसका उपयोग कर रहा है

इसका उपयोग करने के लिए हमें अपने HMMMX कॉन्फ़िगरेशन में विस्तार जोड़ने की जरूरत है.
तो अपनी प्रविष्टि में बिंदु जे (जैसे कि आप मॉड्यूल का उपयोग कर रहे हैं; योयय होना चाहिए) आप इस तरह से कुछ कर सकते हैं:

```javascript
import dynamicRowIds from "./dynamicRowIds"; // Load the file

htmx.defineExtension("dynamic-rowids", dynamicRowIds); // Register the extension
```

फिर जिस वस्तु पर आप उसका उपयोग करना चाहते हैं उस पर आप उसे जोड़ सकते हैं `hx-ext` मूल्य के साथ गुण `dynamic-rowids`.

```html
                <button
                    hx-ext="dynamic-rowids"
                    data-target="#my-table"
                    data-id="@Model.Id"
                    data-param1="true"
                    data-param2="false"
                    data-param3="@Model.Whatever"
                    hx-post
                    hx-controller="Contoller"
                    hx-action="Action"
                >
                    <i class='bx bx-check text-xl text-white'></i>
                </button>

```

## प्रतियों को संरक्षित करें

यह एक और सरल HMMAX विस्तार है, इस समय में प्रवेश कर रहा है `htmx:configRequest` जैसा कि हम निवेदन के भेजे जाने से पहले यूआरएल को संशोधित कर रहे हैं. यह विस्तार है यदि आप क्वैरी वाक्यांश फिल्टर आदि का उपयोग कर रहे हैं और आप कुछ मौजूदा फ़िल्टर संरक्षित करना चाहते हैं (जैसे कि 'जैसे कि, नाम, नाम, और' प्रारंभ नहीं होता है).

यह SMILILARAR के लिए है लेकिन बिल्कुल वैसा नहीं है जैसा मौजूदा HMAX विस्तार [पुश-पार्स](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-params/README.md)

### एक्सटेंशन

आप हम हुक देख सकते हैं कि `onEvent` सुनने के लिए `htmx:configRequest` कार्यक्रम.

तब हम:

- घटना ट्रिगर करता है कि तत्व प्राप्त करें
- जाओ `preserve-params-exclude` तत्व से गुण (यदि मौजूद हो) और अलग करने के लिए कुंजी के एक समूह में विभाजित करें (इसलिए हम उन्हें अनुरोध में जोड़ नहीं सकते)
- विंडो स्थान से मौजूदा यूआरएल पैरामीटर्स को प्राप्त करें
- निवेदन यूआरएल से नया पैरामीटर प्राप्त करें
- मौजूदा पैरामीटर्स के माध्यम से लूप तथा जांच करें यदि वे अलग सूची में नहीं हैं और पहले से ही नए पैरामीटर में नहीं है
- यदि वे नहीं हैं, तो हम उन्हें नए पैरामीटर्स पर जोड़ते हैं
- आखिर में हमने नया पैरामीटर्स निवेदन URL में रखा और निवेदन जारी रखने के लिए सही वापस आ गया ।

```javascript
export default {
    onEvent: function (name, evt) {
        if (name !== 'htmx:configRequest') return;
        const el = evt.detail.elt;
        const excludeStr = el.getAttribute('preserve-params-exclude') || '';
        const exclude = excludeStr.split(',').map(s => s.trim());

        const currentParams = new URLSearchParams(window.location.search);
        const newParams = new URLSearchParams(evt.detail.path.split('?')[1] || '');

        currentParams.forEach((value, key) => {
            if (!exclude.includes(key) && !newParams.has(key)) {
                newParams.set(key, value);
            }
        });

        evt.detail.path = evt.detail.path.split('?')[0] + '?' + newParams.toString();

        return true;
    }
};
```

यहाँ मैं आवश्यक उपयोग [एचएसएमएक्स.Net](https://github.com/khalidabuhakmeh/Htmx.Net/tree/main) उसके टैग सहायकों के लिए. `hx-controller` और `hx-action` टैग सहायक हैं जो आपके लिए सही HMSX गुण तैयार करते हैं. साथ ही साथ `hx-route-<x>` पथ में पास करने के लिए मान. यह वास्तव में उपयोगी है क्योंकि यह आपको सी# कोड का उपयोग करने की अनुमति देता है क्योंकि यह आपके HTML में इन गुणों के लिए सही मान उत्पन्न करने देता है.

### इसका उपयोग कर रहा है

एक एक्सटेंशन के रूप में यह वास्तव में उपयोग करने के लिए सरल है:

पहले हम हमारे HMMMX कॉन्फ़िगरेशन में विस्तार जोड़ने की जरूरत है.

```javascript

import preserveParams from './preserveParams.js';
htmx.defineExtension('preserve-params', preserveParams);
```

नोट: आप नोट करेंगे कि डिफ़ॉल्ट HMMMX विस्तार विस्तार विस्तार विस्तार विस्तार का उपयोग विस्तार लोड करने के लिए 'लोड करें' विधि का उपयोग करता है.

```javascript
// Autoloading the extension and registering it
(function() {
  htmx.defineExtension('debug', {
}
```

यह करने के लिए एक अच्छा तरीका है अगर आप एक गैर आयामी वातावरण में H6X का उपयोग कर रहे हैं. हालांकि, यदि आप मॉड्यूल का उपयोग कर रहे हैं (जिस से आप होना चाहिए) यह बेहतर है. `import` एक्सटेंशन लोड करने का कथन तब प्रत्यक्ष रूप से यह आपके खिलाफ रजिस्टर करता है `htmx` उदाहरण के लिए, यह आप पेड़-शिंग का लाभ लेने की अनुमति देता है और केवल आप की आवश्यकता है.

फिर अपने तत्व पर आप जोड़ सकते हैं `hx-ext` मूल्य के साथ गुण `preserve-params` और `preserve-params-exclude` निवेदन से अलग करने के लिए अल्पविराम से अलग किए गए पैरामीटरों की सूची के साथ गुण.

```html

<a class="btn-outline-icon"
   hx-controller="MyController"
   hx-action="MyAction"
   hx-route-myparam="@MyParam"
   hx-push-url="true"
   hx-ext="preserve-params"
   preserve-params-exclude="page,sort"
   hx-target="#page-content"
   hx-swap="innerHTML show:top"
   hx-indicator>
    <i class="bx bx-search"></i>
</a>
```

इस मामले में `event.detail.path` नया हो गया `myparam` मूल्य यह इस में सेट होगा कि एक को हमारे नए मूल्य से प्रतिस्थापित करेगा  लेकिन सभी अन्यों को बचाने के लिए (सिर्फ) `page` और `sort`. तो हम किसी भी फिल्टर को पारित कर सकते हैं हम यूआरएल में सेट कर सकते हैं सर्वर में सेट कर दिया है के बिना उनके बारे में चिंता करने के लिए जब हम एक नया अनुरोध कर रहे हैं.

# यु. पू.

HMMSX के बारे में साफ - सफाई की चीजों में से एक है कि सर्वर के साथ इसके संपर्क का अधिकांश होता है HTTP headers के माध्यम से होता है. ये शीर्षिका आपके अनुरोध के बारे में अमीर संदर्भ प्रदान करते हैं, आप उचित रूप से प्रतिक्रिया देने की अनुमति देते हैं.

इस का कुंजी अवयव फिर से है [एचएसएमएक्स.Net](https://github.com/khalidabuhakmeh/Htmx.Net/tree/main)इनमें से कई चीज़ें साफ - सफाई में होती हैं `Request` HMMX निवेदन का पता लगाने के लिए एक्सटेंशन. यह निर्धारित करने के लिए उपयोगी है कि क्या HMAX द्वारा निवेदन किया गया है या नहीं, और इसके अनुसार इसे नियंत्रित करने के लिए.

इसमें ट्रिगर के लिए अपनी खुद की यांत्रिकी भी है

```csharp

Response.Htmx(h => {
    h.WithTrigger("yes")
     .WithTrigger("cool", timing: HtmxTriggerTiming.AfterSettle)
     .WithTrigger("neat", new { valueForFrontEnd= 42, status= "Done!" }, timing: HtmxTriggerTiming.AfterSwap);
});
```

दबाएँ यूआरएल
खालिस ने विस्तार का एक बहुत बड़ा काम किया है ताकि उसे किसी भी हाल में HMAX के साथ काम करना आसान हो जाए. NENT कोर में.

यह है मेरे औज़ार- बक्से में एक कुंजी उपकरण है जब HMMMX और आएसी के साथ काम करता है. NENT कोर. [**इसे जाँच लें!**](https://github.com/khalidabuhakmeh/Htmx.Net/tree/main)

## सामान्यHMX आग्रह

यहाँ सबसे उपयोगी शीर्षिका HMAX का फैलाव प्रत्येक निवेदन के साथ भेजता है:

IMSmsg status
|----------------------------|------------------------------------------------------------------------------------------------------------------|
IMTANTHX-RENT निवेदन के लिए हमेशा सही सेट किया जा रहा है. मध्य भंडार या नियंत्रक में HMAX कॉल का पता लगाने के लिए महान.
डोम में लक्ष्य तत्व का आईडी हो सकता है कि प्रतिक्रिया में पलटा लिया जाएगा.
INV HX-ट्रिगर तत्व का आईडी जो अनुरोध करता है (उदा. a बटन)
Libisofs HX- ट्रिगर तत्व का नाम (जैसे फ़ॉर्म के लिए उपयोगी है).
SSLSX- तब तक उपयोगकर्ता पहुँच समाहित करता है. 0x-13 से उपयोक्ता इनपुट समाहित करता है.
INBX- मौजूदा URL url जब आग्रह शुरू किया गया था. लॉगिंग और संदर्भों के लिए उपयोगी. बहुतेरे ब्राउज़र URL मौजूदा ब्राउज़र URLs.
IMTAN HXH-RERP-RERTE को सही के रूप में प्रेषित किया यदि निवेदन नेविगेशन के बाद इतिहास बहाल हो (जैसे, वापस बटन).

## निवेदन एक्सटेंशन्स

मैं इन काफी विस्तृत उपयोग अपने अप्रयोगों में. NMAX के साथ मिला `Request.IsHtmx()` , `Request.IsHtmxBoosted()` और `Request.IsHtmxNonBoosted()` आप आसानी से HMAX निवेदन का पता लगा सकते हैं और उसके अनुसार प्रतिक्रिया दे सकते हैं.

उदाहरण के लिए, मेरे पास एक सरल विस्तार है अनुरोध करने के लिए जो मुझे पता लगाने देता है कि क्या एक निवेदन मेरे मुख्य लक्ष्य है `#page-content` अगर यह है तो मुझे पता है कि मैं एक पक्षपाती वापस भेज देना चाहिए.
टिप्पणी: बहुत से लोग नहीं जानते कि आप 'पूर्ण पृष्ठ' एक आंशिक के रूप में निर्दिष्ट कर सकते हैं, तो यह सिर्फ खाका छोड़ देता है.

```csharp
        if (Request.PageContentTarget())
        {   
            Response.PushUrl(Request);
            return PartialView("List", vm);
        }
        return View("List", vm);
        
        public static class RequestExtensions
{
        
        public static bool PageContentTarget(this HttpRequest request)
    {
        bool isPageContentTarget = request.Headers.TryGetValue("hx-target", out var pageContentHeader) 
                                   && pageContentHeader == "page-content";
        
        return isPageContentTarget;
    }
    }

```

## अनुक्रिया विस्तार

निवेदन विस्तार के अतिरिक्‍त, आप अनुक्रिया विस्तार का निर्माण भी कर सकते हैं जो क्लाइंट को वापस घटनाओं के लिए भेजना है. यह क्लाएंट साइड घटनाओं को ट्रिगर करने के लिए उपयोगी है.

### स्विडीट उदाहरण

उदाहरण के लिए [मेरे स्वीजACAt2 एकीकरण में](https://www.mostlylucid.net/blog/usingsweetalertforhxindicators) मैं संवाद को चालू करने के लिए सक्षम करता हूँ जो सर्वर से सेट है.

```javascript
    document.body.addEventListener('sweetalert:close', closeSweetAlertLoader);

```

यह HMAX ट्रिगर घटना के रूप में सर्वर से ट्रिगर है.

```csharp

    public static void CloseSweetAlert(this HttpResponse response)
    {
        response.Headers.Append("HX-Trigger" , JsonSerializer.Serialize(new
        {
            sweetalert = "close"
        }));

    }
```

यह ट्रिगर ट्रिगर होगा `sweetalert:close` क्लाएंट के किनारे घटना, आपको संवाद बंद करने की अनुमति देता है. आप भी डाटा को क्लाइंट के प्रयोग से पास कर सकते हैं `HX-Trigger` शीर्षिका. यह आंकड़ा को सर्वर से बाहर जाने के लिए उपयोगी है बिना HTML या जावास्क्रिप्ट कोड को परिवर्धित करने के लिए.

जैसा कि आप देखते हैं कि यह मर चुका है इन घटनाओं के लिए सुनने के लिए आसान है सिर्फ एक घटना श्रोता को शरीर में जोड़ने के द्वारा. मैं विशेष रूप से इस्तेमाल करते हैं क्योंकि यह हमेशा सही तरह से वितरित करता है.

### टन दिखाएँ ( _T)

मैं पहले अपने जाम विधि के बारे में लिखा [यहाँ](https://www.mostlylucid.net/blog/showingtoastandswappingwithhtmx)मैं इस अनुक्रिया विस्तार में ट्रिगर सेट.

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

    }
```

मैं फिर घटना ग्राहक पक्ष में हुक और मेरा फोन `showToast` फंक्शन.

```javascript
import { showToast, showHTMXToast } from './toast';

window.showHTMXToast = showHTMXToast;

document.body.addEventListener("showToast", showHTMXToast);
```

यह फिर मेरे में आमंत्रित कर रहा है `showToast` फंक्शन और ठीक है, एक जाम दिखाता है, फिर इसके बारे में और अधिक देखते हैं [इस लेख में ](https://www.mostlylucid.net/blog/showingtoastandswappingwithhtmx).

```javascript


export function showHTMXToast(event) {
    const xhr = event?.detail?.xhr;
    let type = 'success';
    let message = xhr?.responseText || 'Done!';

    try {
        const data = xhr ? JSON.parse(xhr.responseText) : event.detail;

        if (data.toast) message = data.toast;
        if ('issuccess' in data) {
            type = data.issuccess === false ? 'error' : 'success';
        } else if (xhr?.status >= 400) {
            type = 'error';
        } else if (xhr?.status >= 300) {
            type = 'warning';
        }

    } catch {
        if (xhr?.status >= 400) type = 'error';
        else if (xhr?.status >= 300) type = 'warning';
    }

    showToast(message, 3000, type);
}
```

## ऑन्टियम

खैर है कि यह है, HMMSX और Aack.EENNr. मैं आशा है कि आप यह उपयोगी और ज्ञान पाया. यदि आपके पास कोई सवाल या टिप्पणी है नीचे टिप्पणी करने के लिए स्वतंत्र महसूस करें.

## इस ब्लॉग पर संबंधित लेख

### मित्र आलेख

यह लेख एक दो भाग श्रृंखला का हिस्सा है जो कि अप्रिक के साथ एचमएक्स पर दिया गया है. NENT कोर:

1. **[प्रमाणीकरण अप्रयोगक के साथ](/blog/htmx-aspnetcore-partials)** - एकीकरण, आंशिक विचार, HMAT, और pance पर ध्यान केंद्रित
2. **इस लेख** - HMMMX घटनाओं, जीवन - चक्र, विस्तार डिजाइन, और मनपसंद विस्तार में गहरा रूप से पिघलना

### अधिक HMX आलेख

- [HMAX के साथ निर्गत किया जा रहा है](/blog/addpagingwithhtmx) - HMMMX के साथ पटीकरण लागू किया जा रहा है
- [प्रमाणीकरण विधि](/blog/aspnetcachingwithhtmx) - HMMX निवेदन के लिए कैशिंग योजनाएँ
- [अआथ्यता तथा HMMX के साथ स्वतः ताज़ा करें](/blog/autorefreshwithalpineandhtmx) - प्रतिक्रिया के अवयव के लिए एक आमिटल के साथ जोड़ा जा रहा है.
- [HMMX के साथ अपनी साइट अधिक एसएपी जैसा बनाना](/blog/htmxtomakeyoursitemorespalike) - जावास्क्रिप्ट फ्रेमवर्क के बिना SPAP- समान नेविगेशन
- [HX संपादक के लिए स्वलवैट इस्तेमाल किया जा रहा है](/blog/usingsweetalertforhxindicators) - HMMX के साथ सुंदर लोड सूचक
- [HMMX के साथ स्केल तथा बिगड़ना दिखाएँ](/blog/showingtoastandswappingwithhtmx) - सर्वर-प्रयोगित जाम सूचना

## आगे पढ़ा जा रहा है

**आधिकारिक HMX दस्तावेज़ीकरण:**

- [एचएसएमएक्स दस्तावेज़ीकरण](https://htmx.org/docs/) - आधिकारिक HMX दस्तावेज़
- [एटीएमएक्स घटनाएँ संदर्भ](https://htmx.org/events/) - HMMX घटनाओं की पूरी सूची
- [एचएमएमएक्स विस्तार](https://htmx.org/extensions/) - आधिकारिक HMX विस्तार
- [एटीएमएक्स उदाहरण](https://htmx.org/examples/) - HMMAX पैटर्न के व्यावहारिक उदाहरण
- [एचएलएमएक्स ईएसएसएस](https://htmx.org/essays/) - HMMAX तत्त्वज्ञान पर सोचा गया लेख

**लाइब्रेरीज़ औज़ार: (T)**

- [HMAX. NET Git GiB](https://github.com/khalidabuhakmeh/Htmx.Net) - HMAX.ENT लाइब्रेरी स्रोत कोड
- [HMAX. NELCKR](https://www.nuget.org/packages/Htmx/) - HMAX. Nuo पर पता नहीं
- [खाल अबुंग की वेबसाइट](https://khalidabuhakmeh.com/) - HMAX का निर्माता.
- [यू.js दस्तावेज़ीकरण](https://alpinejs.dev/) - आधिकारिक एक जिम्मेदारी .js डोंस

**संसाधन:**

- [एचएमएमएक्स डिस्कआरडी](https://htmx.org/discord) - सक्रिय समुदाय समर्थन
- [हायपररोंज सिस्टम बुक](https://hypermedia.systems/) - हायपरकैप्शन अनुप्रयोगों के निर्माण के बारे में मुफ्त ऑनलाइन बुक