19-13 Bonjour, Htmx
Htmx est une librairie JavaScript qui permet d'ajouter une touche d'interactivité aux pages, tout en respectant la nature du rendu serveur. Pas de JavaScript à écrire ni de retour en JSON. Seulement du bon vieux HTML.
La librairie permet de faire des changements à l'interface sans avoir à recharger complètement la page. Elle permet aussi par le fait même de modulariser l'interface via des requêtes asynchrones au serveur.
Nous utiliserons cette librairie pour faire des fenêtres modales personnalisées. Commençons par configurer ce dont nous avons besoin.
Installer htmx (js)
npm install
Comme il s'agit d'une librairie JavaScript, on l'installera via npm. Dans une fenêtre de terminal (ça peut être dans Rider), dans le dossier Web.Mvc:
npm install htmx.org
Importer htmx via app.js
Ensuite, ajoutez la référence à votre app.js
import 'vite/modulepreload-polyfill'
// Notre Scss, contenant Bootstrap
import '../scss/app.scss'
// Importation du JavaScript de Bootstrap
import * as bootstrap from 'bootstrap'
import htmx from 'htmx.org';
import './flash-message';
Optionnel: exécuter npm run build
Si vous utilisez la version précompilée des assets, n'oubliez pas de rouler npm run build pour compiler le JavaScript.
Sinon, rien à faire!
Installer Htmx.TagHelpers (NuGet)
Ce n'est pas obligatoire pour utiliser htmx, mais une librairie .NET est disponible et ajoute des TagHelpers dans les vues razor pour faciliter l'utilisation avec .NET.
Clic droit sur Web.Mvc->Manage NuGet Packages- Faire une recherche pour
htmx - Ajouter/installer
Htmx.TagHelpers
Importer les TagHelpers via _ViewImports
Ajoutez @addTagHelper *, Htmx.TagHelpers à votre fichier _ViewImports.
@using Snowfall.Web.Mvc
@using Snowfall.Web.Mvc.Models
@using Snowfall.Domain.Models
@using Snowfall.Web.Mvc.Models.Evenements
@using Snowfall.Web.Mvc.Models.Auth
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Htmx.TagHelpers