Spring MVC 3.2 Thymeleaf Ajax Fragments
Je suis en train de construire une application avec Spring MVC 3.2 et Thymeleaf moteur de template. Je suis débutant dans le Thymeleaf.
J'ai tout qui fonctionne, y compris Thymeleaf mais je me demandais si quelqu'un sait d'un simple et claire toturial sur la façon de faire simple requête Ajax contrôleur et du résultat rendu une partie seulement d'un modèle (fragment).
Mon appli a tout configuré (Printemps 3.2, printemps-sécurité, thymeleaf, ...) et fonctionne comme prévu. Maintenant, je voudrais faire une requête Ajax (assez simple avec jQuery mais je n'ai pas wan pas à utiliser est depuis Thymeleaf dans son tutoriel, chapitre 11: le Rendu des Fragments de Modèle (lien) mentiones il peut être fait avec des fragments.
Actuellement, j'ai dans mon Contrôleur
@RequestMapping("/dimensionMenuList")
public String showDimensionMenuList(Model model) {
Collection<ArticleDimensionVO> articleDimensions;
try {
articleDimensions = articleService.getArticleDimension(ArticleTypeVO.ARTICLE_TYPE);
} catch (DataAccessException e) {
//TODO: return ERROR
throw new RuntimeException();
}
model.addAttribute("dimensions", articleDimensions);
return "/admin/index :: dimensionMenuList";
}
la partie de la vue où je voudrais remplacer <ul></ul>
les éléments de menu:
<ul th:fragment="dimensionMenuList" class="dropdown-menu">
<li th:unless="${#lists.isEmpty(dimensions)}" th:each="dimension : ${dimensions}">
<a href="#" th:text="${dimension.dimension}"></a>
</li>
</ul>
Aucune idée de qui est grandement apprécié. Surtout si je n'ai pas d'inclure plus de cadres. C'est déjà trop pour java web app comme il est.
Vous devez vous connecter pour publier un commentaire.
Ici est une approche que je suis tombé sur un post de blog:
Je ne voulais pas l'utilisation de ces dispositifs dans cette section, je suis en utilisant jQuery pour envoyer une requête AJAX vers le serveur, attendre la réponse et partiellement mise à jour de la vue (fragment de rendu).
La Forme
Ce formulaire contient une entrée de texte avec une chaîne de recherche (searchSurname) qui sera envoyé au serveur. Il y a aussi une région (resultsBlock div) qui sera mise à jour de la réponse envoyée par le serveur.
Lorsque l'utilisateur clique sur le bouton, le retrieveGuests() la fonction sera appelée.
Le jQuery charge de la fonction fait une requête vers le serveur à l'url spécifiée et place le code HTML renvoyé dans l'élément spécifié (resultsBlock div).
Si l'utilisateur entre une chaîne de recherche, il va rechercher tous les invités avec le nom de famille. Sinon, ce sera le retour de l'compléter la liste des invités. Ces deux demandes d'atteindre le contrôleur suivant la demande des mappages:
Depuis le Printemps est intégré avec Thymeleaf, il va maintenant être en mesure de revenir à des fragments de HTML. Dans l'exemple ci-dessus, la chaîne de retour "résultats :: resultsList" fait référence à un fragment nommé resultsList qui se trouve dans la page de résultats. Prenons un oeil à cette page de résultats:
Le fragment, qui est un tableau avec les clients enregistrés, sera inséré dans les résultats de bloc.
Rendu seulement
Thymeleaf fragments
fonctionne aussi bien avec lesModelAndView
.public String getFeeds() { return "feeds :: resultsList"; }
Comme une version alternative de Sohail la grande réponse, je veux donner une version à l'aide de javascript peut envoyer l'ensemble de la th:objet du contrôleur, l'intégration de Thymeleaf dans vos formulaires, de ne pas avoir à utiliser @PathVariable qui devient malpropre ou pas utilisable quand vous avez des formes avec de nombreux champs.
Pour la forme (à l'aide d'un exemple qui renvoie un objet qui a un id et un nom de Chaînes, et alimente un combobox avec une Carte qui a certains de ces objets de valeurs), nous avons:
Lorsque ce formulaire est soumis (à l'aide d'un bouton de type submit par exemple), l'ensemble du document sera remplacé. Cependant on peut intercepter cette soumettre avec javascript et faire de l'ajax-chemin. Pour atteindre cet objectif, nous allons ajouter un intercepteur à notre formulaire en utilisant une fonction. Le premier appel de la fonction qui ajoute de l'intercepteur à droite après la forme:
Et la fonction ressemble à ceci (le placer dans l'en-tête du document ou de l'endroit où adapté à vos besoins):
Maintenant, chaque fois que le formulaire est soumis, cette fonction permet de déclencher, et il permettra de:
La partie remplacée devrait ressembler à ceci
Et le contrôleur peut recevoir de la th:objet dans la forme, avec des valeurs remplies, comme ceci (Remplacer Objet avec votre type de l'objet et "objet" avec un nom propre):
Et c'est tout. Appel de la fonction qui ajoute de l'intercepteur après chaque formulaire que vous avez besoin en ajax-version.