Introduction

Just a quick one, J'ai eu besoin dans un projet de travail pour pouvoir 'clearM SK2 Paramètres URL d'une URL. C'est utile lorsque vous avez une URL avec plusieurs paramètresMSC4 et que vous voulez supprimer un ou plusieurs d'entre eux.

Le problème

Mon projet actuel utilise les anciennes chaînes de recherche scolaire.

/products?category=electronics&search=wireless+headphones&sort=price_desc&inStock=true&page=3

Maintenant, ils peuvent varier avec chaque page, de sorte que je peux finir par avoir une BUNCH dans l’URL de la page et j’ai besoin d’être en mesure de les débarrasser sans écrire un certain nombre de plaques pour le faire.

Vous pouvez le faire comme partie de tout contrôle d'entrée que vous utilisez, par exemple à côté de chaque case de vérification (ou un fantaisie placeholder style icon clair ) mais et vous pouvez utiliser cette technique pour ceux aussi. ToutefoisM SK3 dans ce cas j'ai voulu faire deux choses principales

1. Être en mesure de nettoyer un paramètre désigné
2. Être en mesure de nettoyer une liste de paramètres.
3. Être en mesure de nettoyer tous les paramètres
4. Avez-vous répondu avec HTMX
5. Pouvez-vous utiliser mon indicateur de charge? mon indicateur de chargement.

La solution

Dans mon projet, j'utilise déjà

• HTMX
• Alpine.js
• ASP.NET Core
• TailwindCSS
• DaisyUI

Ainsi, ma solution était axée sur l’utilisation de ces éléments pour obtenir une bonne solution fonctionnelle avec un code minimal

L'aide à l'étiquette

Mon TagHelper est assez simple, tout ce que je fais, c’est créer un <a> tag avec quelques attributs I' passera ultérieurement dans le module alpin et nous

[HtmlTargetElement("clear-param")]
public class ClearParamTagHelper : TagHelper
{
    [HtmlAttributeName("name")]
    public string Name { get; set; }
    
    [HtmlAttributeName("all")]
    public bool All { get; set; }= false;
    
    [HtmlAttributeName("target")]
    public string Target { get; set; } = "#page-content";

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "a";
        output.Attributes.SetAttribute("x-data", "window.queryParamClearer({})");

        if (All)
        {
        output.Attributes.SetAttribute("x-all", All);
        }
        else
        {
            output.Attributes.SetAttribute("x-param", Name);
        }
        output.Attributes.SetAttribute("data-target", Target);
        output.Attributes.SetAttribute("x-on:click.prevent", "clearParam($event)");
        output.Content.SetHtmlContent(@"
            <div class='w-6 h-6 flex items-center justify-center bg-red-600 text-white rounded-full'>
                <i class='bx bx-x text-lg'></i>
            </div>");
    }
}

Paramètres

Dans l’utilisation, cela ressemble à ce qui suit : , premièrement pour 'clear tous les paramètres'. Alors je regarde simplement Context.Request.Query s’il y a des paramètres sur ', je rends le petit x icon pour permettre à l'utilisateur de nettoyer tous les paramètres.

@if(Context.Request.Query.Any())
{
<label class="param-label">
    <clear-param all="true"></clear-param>
    clear all
</label>
}
</div>

Autrement dit, pour les paramètres désignés je peux le faire.

<div class="param-label">
    <clear-param name="myParam"></clear-param>
    <p>My Param: @Model.MyParam</p>
</div>

Ce qui clarifierait bien sûr que le paramètre unique.

Ou même

<div class="param-label">
    <clear-param name="myParam1,myParam2,myParam3"></clear-param>
    <p>My Param: @Model.MyParam1</p>
    <p>My Param: @Model.MyParam2</p>
    <p>My Param: @Model.MyParam3</p>
</div>

Cela élimine ensuite tous les paramètres désignés de la chaîne.

L'article 5 de la Loi sur l'immigration et le statut des réfugiés target attributs

Vous avez également la possibilité de passer dans un target attribut qui sera utilisé comme le hx-target attribute. C'est utile si vous voulez mettre à jour une partie spécifique de la page avec le nouveau contenu.

<div class="param-label">
    <clear-param name="myParam" target="#my-thing"></clear-param>
    <p>My Param: @Model.MyParam</p>
</div>

Dans mon cas, ( car je l’ai écrite ) j’ai fait par défaut la cible à mon #page-content Div.

    [HtmlAttributeName("target")]
    public string Target { get; set; } = "#page-content";

Résultats

Ces résultats se traduisent comme suit : HTML:

• Tous: Ainsi, nous obtenons HTML avec le x-all attribut et non x-param attribute.

<a x-data="window.queryParamClearer({})" x-all="True" data-target="#page-content" x-on:click.prevent="clearParam($event)">
    <div class="w-6 h-6 flex items-center justify-center bg-red-600 text-white rounded-full">
        <i class="bx bx-x text-lg"></i>
    </div>
</a>

• Unité Nous obtenons HTML avec le x-param attribut et non x-all attribute.

<a x-data="window.queryParamClearer({})" x-param="myParam" data-target="#page-content" x-on:click.prevent="clearParam($event)">
    <div class="w-6 h-6 flex items-center justify-center bg-red-600 text-white rounded-full">
        <i class="bx bx-x text-lg"></i>
    </div>
</a>

• Multiple Nous obtenons HTML avec le x-param attribut avec une chaîne séparée par comma et non x-all attribute.

<a x-data="window.queryParamClearer({})" x-param="myParam1,myParam2,myParam3" data-target="#page-content" x-on:click.prevent="clearParam($event)">
    <div class="w-6 h-6 flex items-center justify-center bg-red-600 text-white rounded-full">
        <i class="bx bx-x text-lg"></i>
    </div>
</a>

Chacune d'entre elles possède également les deux attributs alpins x-data et x-on:click.prevent qui sont utilisés pour configurer le module Alpine et appeler la fonction pour nettoyer les paramètres.

Nous verrons comment cela fonctionnera prochainement...

Le module alpin

Ceci est évidemment possible grâce à l’utilisation de Alpine.js pour configurer notre demande et HTMX pour la réaliser.

Comme vous pouvez le voir dans le code ci-dessous, J’ai un module simple qui prend path de la page courante et ensuite utilise le URL API pour analyser la chaîne de demande ( vous pouvez également passer dans une autre pour quelque raison que ce soit :)) .

Nous obtenons ensuite l'élément qui a été cliqué et vérifions s'il x-all attribute; s’il le fait, nous supprimons tous les paramètres de l’URL x-param et supprimer chacun de ces paramètres.

Ensuite, nous créerons une nouvelle URL avec la chaîne de demande mise à jour et utilisons HTMX pour faire une requête à cette URL.

export function queryParamClearer({ path = window.location.pathname }) {
    return {
        clearParam(e) {
            const el = e.target.closest('[x-param],[x-all]');
            if (!el) return;

            const url = new URL(window.location.href);

            if (el.hasAttribute('x-all')) {
                // → delete every single param
                // we copy the keys first because deleting while iterating modifies the collection
                Array.from(url.searchParams.keys())
                    .forEach(key => url.searchParams.delete(key));
            } else {
                // → delete only the named params
                (el.getAttribute('x-param') || '')
                    .split(',')
                    .map(p => p.trim())
                    .filter(Boolean)
                    .forEach(key => url.searchParams.delete(key));
            }

            const qs = url.searchParams.toString();
            const newUrl = path + (qs ? `?${qs}` : '');

            showAlert(newUrl);
            htmx.ajax('GET', newUrl, {
                target: el.dataset.target || el.getAttribute('hx-target') || 'body',
                swap: 'innerHTML',
                pushUrl: true
            });
        }
    };
}

//In your entry point / anywhere you want to register the module
import { queryParamClearer } from './param-clearer.js'; // webpackInclude: true

window.queryParamClearer = queryParamClearer;

L'article 5 de la Loi sur l'immigration et le statut des réfugiés showAlert fonction utilisant SweetAlert2

Vous noterez également que j’appelle un showAlert fonction. Il s'agit simplement d'un enveloppeur simple autour de SweetAlert 2 indicateur de chargement que j'utilise dans mon projetM SK2 Vous pouvez évidemment le remplacer par tout ce que vous voulez faire.'

Il s’agit d’une approche légèrement modifiée de la la dernière fois que nous l'avons vu. Je pouvais donc extraire showAlert et rendre disponible aux modules externes. qui m’ont permis de l’utiliser dans les deux param-clearer Le module et le hx-indicator module.

export function registerSweetAlertHxIndicator() {
    document.body.addEventListener('htmx:configRequest', function (evt) {
        const trigger = evt.detail.elt;

        const indicatorAttrSource = getIndicatorSource(trigger);
        if (!indicatorAttrSource) return;

        // ✅ If this is a pageSize-triggered request, use our custom path
        let path;
        if (evt.detail.headers?.['HX-Trigger-Name'] === 'pageSize') {
            path = getPathWithPageSize(evt.detail);
            console.debug('[SweetAlert] Using custom path with updated pageSize:', path);
        } else {
            path = getRequestPath(evt.detail);
        }

        if (!path) return;
        evt.detail.indicator = null;
        showAlert(path);
    });
}

export function showAlert(path)
{
    const currentPath = sessionStorage.getItem(SWEETALERT_PATH_KEY);

    // Show SweetAlert only if the current request path differs from the previous one
    if (currentPath !== path) {
        closeSweetAlertLoader();
        sessionStorage.setItem(SWEETALERT_PATH_KEY, path);


        Swal.fire({
            title: 'Loading...',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            theme: 'dark',
            didOpen: () => {
                // Cancel immediately if restored from browser history
                if (sessionStorage.getItem(SWEETALERT_HISTORY_RESTORED_KEY) === 'true') {
                    sessionStorage.removeItem(SWEETALERT_HISTORY_RESTORED_KEY);
                    Swal.close();
                    return;
                }

                Swal.showLoading();
                document.dispatchEvent(new CustomEvent('sweetalert:opened'));

                // Set timeout to auto-close if something hangs
                clearTimeout(swalTimeoutHandle);
                swalTimeoutHandle = setTimeout(() => {
                    if (Swal.isVisible()) {
                        console.warn('SweetAlert loading modal closed after timeout.');
                        closeSweetAlertLoader();
                    }
                }, SWEETALERT_TIMEOUT_MS);
            },
            didClose: () => {
                document.dispatchEvent(new CustomEvent('sweetalert:closed'));
                sessionStorage.removeItem(SWEETALERT_PATH_KEY);
                clearTimeout(swalTimeoutHandle);
                swalTimeoutHandle = null;
            }
        });
    }
}

//Register it
import { registerSweetAlertHxIndicator, showAlert } from './hx-sweetalert-indicator.js';
registerSweetAlertHxIndicator();
window.showAlert = showAlert;

À titre de rappel, il utilise le path en tant que clé pour savoir quand cacher l’alerte.

HTMX

Enfin, nous utilisons htmx.ajax pour faire la demande. Il s'agit d'une simple requête GET à la nouvelle URL que nous avons créée avec la chaîne de recherche mise à jour.

   htmx.ajax('GET', newUrl, {
                target: el.dataset.target || el.getAttribute('hx-target') || 'body',
                swap: 'innerHTML',
                pushUrl: true
            });

En conclusion

Il s’agit d’une façon simple de nettoyer les paramètres URL à l’aide d’un aides-étiquettes et d’Alpine.js. Vous pouvez nettoyer tous les ParamètresM SK2 ou simplement certains de ceux-ciMNK3 avec un code minimalMRK4