# HMMX (और एनईएसटीसी कोर) के साथ टॉड तथा रोलिंग सामग्री दिखाएँ

<datetime class="hidden">2025-04-12T13:33</datetime>

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

HMMX एक महान लाइब्रेरी है आपके वेब अनुप्रयोगों को और अधिक गतिशील और संवेदनशील बनाने के लिए. इस पोस्ट में, मैं आपको दिखाता हूँ कि कैसे HMMX का उपयोग करें...... पृष्ठ पर एक जाम सूचना दिखाने के लिए और कुछ सामग्री दिखाने के लिए।

मानक HMTX में से एक (ए. ए. [ओबीलॉक्स नहीं](https://htmx.org/attributes/hx-swap-oob/)) यह है कि केवल आप ही पीछे से सामग्री की एक टुकड़ा है. लेकिन इस पर जीत हासिल की जा सकती है `HX-Trigger` शीर्ष और एक छोटा सा जावा स्क्रिप्ट.

**नोट: आप इस्तेमाल कर सकते हैं [`hx-swap-oob`](https://htmx.org/attributes/hx-swap-oob/) दो भिन्नों की अदला बदली करने के लिए *सामग्री* लेकिन यह एक बिट से अधिक जटिल है और कुछ जावास्क्रिप्ट सामग्री करने के लिए उपयोग करने के लिए आसान नहीं है.**

[TOC]

# टोले

मैं इस सरल जाम सूचना तंत्र के इस योग का उपयोग कर दिया गया है [कुछ समय के लिए](https://www.mostlylucid.net/blog/acopybuttonforhightlightjs#showtoast-function)___ यह एक सरल फंक्शन है जो एक संदेश, अवधि, और प्रकार (काम, त्रुटि, चेतावनी) और पृष्ठ पर एक जाम सूचना लाता है.

प्रतीकों के चारों ओर इस 'creining संस्करण' में कुछ और बबल हो रहा है, एनीमेशन आदि...

## जावा स्क्रिप्ट

```javascript
// HTMX toast notification
// Simple HTMX toast handler for use with hx-on::after-request
window.showToast = (message, duration = 3000, type = 'info') => {
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toast-message');
    const toastText = document.getElementById('toast-text');
    const toastIcon = document.getElementById('toast-icon');

    // Reset classes
    toastMessage.className = 'alert shadow-lg gap-2 transition-all duration-300 ease-in-out cursor-pointer';
    toastIcon.className = 'bx text-2xl';

    // Add DaisyUI alert type
    const alertClass = `alert-${type}`;
    toastMessage.classList.add(alertClass);

    // Add icon class
    const iconMap = {
        success: 'bx-check-circle',
        error: 'bx-error-circle',
        warning: 'bx-error',
        info: 'bx-info-circle'
    };
    const iconClass = iconMap[type] || 'bx-bell';
    toastIcon.classList.add(iconClass);

    // Set the message
    toastText.textContent = message;

    // Add slide-in animation
    toastMessage.classList.add('animate-slide-in');
    toast.classList.remove('hidden');

    // Allow click to dismiss
    toastMessage.onclick = () => hideToast();

    // Auto-dismiss
    clearTimeout(window.toastTimeout);
    window.toastTimeout = setTimeout(() => hideToast(), duration);

    function hideToast() {
        toastMessage.classList.remove('animate-slide-in');
        toastMessage.classList.add('animate-fade-out');
        toastMessage.onclick = null;

        toastMessage.addEventListener('animationend', () => {
            toast.classList.add('hidden');
            toastMessage.classList.remove('animate-fade-out');
        }, { once: true });
    }
};

```

यह एक छोटा सा एचटीएमएल है जो मैं अपने में पारिभाषित करता हूँ _खाका.cartml फ़ाइल (मेरे पसंदीदा आर्क सीएसएस व गुलजाआई के उपयोग से). अंत में 'क्लासीय ब्लॉक' पर ध्यान दें. यह निश्‍चित करने के लिए एक छोटी सी चाल है कि कक्षा अन्तिम HTML आउटपुट में सुरक्षित रखी जाती है । यह वास्तव में मेरी उंगलियों की दुकान सेटअप के लिए है...... मैं सिर्फ पर देखो के रूप में `cshtml`.

```html
<div
        id="toast"
        class="toast toast-bottom fixed z-50 hidden w-full md:w-auto max-w-sm right-4 bottom-4"
>
    <div
            id="toast-message"
            class="alert shadow-lg gap-2 transition-all duration-300 ease-in-out cursor-pointer"
    >
        <i id="toast-icon" class="bx text-2xl"></i>
        <span id="toast-text">Notification message</span>
    </div>
</div>

<!-- class-preserving dummy block -->
<div class="hidden">
    <div class="alert alert-success alert-error alert-warning alert-info"></div>
    <i class="bx bx-check-circle bx-error-circle bx-error bx-info-circle bx-bell"></i>
    <div class="animate-slide-in animate-fade-out"></div>
</div>
```

## टिलिया

यहाँ मैं परिभाषित करता हूँ क्या फ़ाइलों को 'ऑजिलिंग' से तथा साथ ही कुछ एनिमेशन क्लासों का उपयोग करने के लिए परिभाषित करता हूँ.

```javascript
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ["./Views/**/*.cshtml", "./Areas/**/*.cshtml"],
  safelist: ["dark"],
  darkMode: "class",
  theme: {
    extend: {
      keyframes: {
        'slide-in': {
          '0%': { opacity: 0, transform: 'translateY(20px)' },
          '100%': { opacity: 1, transform: 'translateY(0)' },
        },
        'fade-out': {
          '0%': { opacity: 1 },
          '100%': { opacity: 0 },
        },
      },
      animation: {
        'slide-in': 'slide-in 0.3s ease-out',
        'fade-out': 'fade-out 0.5s ease-in forwards',
      },
  },
  plugins: [require("daisyui")],
};
```

# ट्रिगर

यह सब करने का रहस्य इस सब काम का उपयोग कर रहा है [HMAX ट्रिगर हेडर कार्य](https://htmx.org/headers/hx-trigger/).

अब 'सामान्य रूप से' आप होगा [इसे अपने वास्तविक एचटीएमएल / कॉन्फ़िगर करने का कोड पारिभाषित करें](https://htmx.org/attributes/hx-trigger/):

```html
<div hx-get="/clicked" hx-trigger="click[ctrlKey]">Control Click Me</div>
```

या फिर आप इसे एक निवेदन घटना के बाद परिभाषित कर सकते हैं. तो तुम कुछ करते हो तो यह एक नई घटना ट्रिगर करता है.

```html
<button 
    hx-get="/api/do-something"
    hx-swap="none"
    hx-on::afterRequest="window.showToast('API call complete!', 3000, 'success')"
    class="btn btn-primary"
>
    Do Something
</button>
```

यह है अगर आप सिर्फ कुछ करना चाहते हैं 'तो यह किया गया है' लेकिन मेरे मामले में मैं कुछ सामग्री और एक जाम दिखाना चाहते हैं.

```csharp
            Response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new
            {
                showToast = new
                {
                    toast = result.Message,
                    issuccess = result.Success
                }
            }));
```

मेरे मामले में मेरा ट्रिगर नाम है `showToast` और मैं अपनी तद्बीर कर रहा हूँ तो मैं इस घटना के लिए एक घटना श्रोता को परिभाषित किया है.  यह तब होता है जब इसे बुलाया जाता है `showToast` फंक्शन तथा संदेश में सफलता झंडा आगे बढ़ें.

```javascript
// Handles HX-Trigger: { "showToast": { "toast": "...", "issuccess": true } }
document.body.addEventListener("showToast", (event) => {
    const { toast, issuccess } = event.detail || {};
    const type = issuccess === false ? 'error' : 'success';
    showToast(toast || 'Done!', 3000, type);
});
```

# यु. पू.

तो मैं यह क्यों इस्तेमाल करते हैं? खैर, हाल ही में एक कार्य परियोजना में मैं एक उपयोगकर्ता पर कुछ कार्यवाही करना चाहता था. मैं एक जाम सूचना दिखाने के लिए चाहता था और नई सामग्री के साथ उपयोक्ता पंक्ति की सामग्री की गणना करना चाहता था.

![userrow.png](userrow.png)

जैसा कि आप देख सकते हैं कि मेरे पास बटनों के एक टन है जो उपयोक्ता को 'कार्य' करता है. मैं एक जाम सूचना दिखाने के लिए चाहता था और नई सामग्री के साथ उपयोक्ता पंक्ति की सामग्री की गणना करना चाहता था.

तो मेरे नियंत्रण में मैं एक सरल 'स्विच' है जो क्रिया नाम लेता है, सामग्री तब नया निवेदन लौटाता है.

```csharp
    private async Task ApplyAction(string email, string useraction)
    {
        if (!string.IsNullOrWhiteSpace(useraction) &&
            Enum.TryParse<UserActionType>(useraction, true, out var parsedAction))
        {
            RequestResult result;

            switch (parsedAction)
            {
                case UserActionType.FlipRoles:
                    result = await userActionService.FlipRestaurantPermissions(email);
                    break;
                case UserActionType.UnflipRoles:
                    result = await userActionService.UnFlipRestaurantPermissions(email);
                    break;
                case UserActionType.Enable2FA:
                    result = await userActionService.ToggleMFA(email, true);
                    break;
                case UserActionType.Disable2FA:
                    result = await userActionService.ToggleMFA(email, false);
                    break;~~~~
                case UserActionType.RevokeTokens:
                    result = await userActionService.RevokeTokens(email);
                    break;
                case UserActionType.Lock:
                    result = await userActionService.Lock(email);
                    break;
                case UserActionType.Unlock:
                    result = await userActionService.Unlock(email);
                    break;
                case UserActionType.Nuke:
                    result = await userActionService.Nuke(email);
                    break;
                case UserActionType.Disable:
                    result = await userActionService.DisableUser(email);
                    break;
                case UserActionType.Enable:
                    result = await userActionService.EnableUser(email);
                    break;
                case UserActionType.ResetPassword:
                    result = await userActionService.ChangePassword(email);
                    break;
                case UserActionType.SendResetEmail:
                    result = await userActionService.SendResetEmail(email);
                    break;
                default:
                    result = new RequestResult(false, "Unknown action");
                    break;
                  
            }

            Response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new
            {
                showToast = new
                {
                    toast = result.Message,
                    issuccess = result.Success
                }
            }));

        }
    }
```

आप भी मैं जोड़ देख सकते हैं `HX-Trigger` प्रतिक्रिया पर शीर्षिका. यह एक JSON वस्तु है के साथ `showToast` कुंजी तथा एक वस्तु का मान `toast` और `issuccess` कुंजी. वह `toast` जाम सूचना और संदेश देने के लिए कुंजी है `issuccess` कुंजी बुलियन है जो दिखाता है कि क्या क्रिया सफल हुई या नहीं.

तब में `_Row` आंशिक रूप से मैं HXX (एम.Net के प्रयोग से) कार्रवाई शुरू करने के लिए।

```html
                     <!-- Revoke Login Tokens -->
                            <button class="btn btn-xs btn-error border whitespace-normal text-wrap tooltip tooltip-left" data-tip="Revoke login tokens"
                                    hx-get hx-indicator="#loading-modal" hx-target="closest tr" hx-swap="outerHTML"
                                    hx-action="Row" hx-controller="Users"
                                    hx-route-email="@user.Email" hx-route-useraction="@UserActionType.RevokeTokens"
                                    hx-confirm="Are you sure you want to revoke the login tokens for this user?">
                                <i class="bx bx-power-off"></i> Revoke
                            </button>
```

आप देख सकते हैं मैं लक्ष्य का उपयोग कर सकते हैं `closest tr` नई अंतर्वस्तु के साथ पूरी पंक्ति की अदला बदली करने के लिए. यह एक सरल तरीक़ा है कि बिना पूरा पृष्ठ विश्राम करने के बिना पंक्ति की वस्तुओं को अद्यतन करने का यह एक सरल तरीक़ा है ।

## आंशिक दृश्य

यह बहुत सरल है और एक महान तकनीक है. HMMAX के साथ NENT कोर.
आप वैकल्पिक रूप से HMAX का उपयोग कर सकते हैं.Net`s `अनुरोध. है HHtexvixvivivix यहाँ लेकिन इस मामले में मैं सिर्फ एक HMAX कॉलबैक से कभी इसका उपयोग करते हैं.

```csharp
    [Route("row")]
 
    public async Task<IActionResult> Row(string email, string? useraction = null)
    {

        if(!string.IsNullOrEmpty(useraction))
          await ApplyAction(email, useraction);

        var userRow = await userViewService.GetSingleUserViewModel(email);
        return PartialView("_Row", userRow);
    }
```

इस मामले में आंशिक दृष्टिकोण `_Row` उपयोक्ता जानकारी तथा बटनों को क्रियाएँ करने के लिए एक सरल तालिका पंक्ति है.

# अतिरिक्त HMX विशेषताएँ

मैं उपयोगकर्ता को बेहतर अनुभव करने के लिए और अधिक HMMX विशेषताओं का भी प्रयोग करता हूँ.

## लोड हो रहा है

मैं भी एक आसान उपयोग `loading modal` यह सूचित करने के लिए कि निवेदन प्रगति में है । यह उपयोक्ता को दिखाने का एक सरल तरीका है कि पृष्ठभूमि में कुछ हो रहा है.

```html
<div id="loading-modal" class="modal htmx-indicator">
    <div
        class="modal-box flex flex-col items-center justify-center bg-base-200 border border-base-300 shadow-xl rounded-xl text-base-content dark text-center ">
        <div class="flex flex-col items-center space-y-4">
            <h2 class="text-lg font-semibold tracking-wide">Loading...</h2>
            <span class="loading loading-dots loading-xl text-4xl text-stone-200"></span>
        </div>
    </div>
</div>
```

## पुष्टि करें

मैं भी उपयोग `hx-confirm` क्रिया किए जाने के पहले पुष्टिकरण संवाद दिखाने के लिए गुण. यह सुनिश्चित करने के लिए एक सरल तरीका है कि उपयोक्ता वास्तव में कार्य करना चाहता है. यह उपयोग [स्व- धातु2color](https://sweetalert2.github.io/) पुष्टि संवाद दिखाने के लिए.

अब अगर आप ऐसा नहीं करते हैं, HMAX अभी भी काम करता है लेकिन यह मानक ब्राउज़र 'ठीक' संवाद का उपयोग करता है जो उपयोगकर्ता के लिए एक बिट के लिए जा सकता है.

```javascript
// HTMX confirm with SweetAlert2
window.addEventListener('htmx:confirm', (e) => {
    const message = e.detail.question;
    if (!message) return;

    e.preventDefault();

    Swal.fire({
        title: 'Please confirm',
        text: message,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes',
        cancelButtonText: 'Cancel',
        theme: 'dark',
    }).then(({ isConfirmed }) => {
        if (isConfirmed) e.detail.issueRequest(true);
    });
});
```

# ऑन्टियम

यह HMMMX का उपयोग करने के लिए एक सरल तरीका है पृष्ठ पर एक फलक सूचना और सामग्री दिखाने के लिए. यह आपके वेब अनुप्रयोगों को अधिक गतिशील और संवेदनशील बनाने का एक महान तरीका है.