example - Spring MVC 3.2 Thymeleaf Ajax Fragments

thymeleaf create fragment

Question

Estoy construyendo aplicaciones con Spring MVC 3.2 y el motor de plantillas Thymeleaf. Soy un principiante en Thymeleaf.

Tengo todo funcionando, incluso Thymeleaf, pero me preguntaba si alguien sabe de un truurial simple y claro sobre cómo hacer una simple solicitud de Ajax al controlador y en el resultado representar solo una parte de una plantilla (fragmento).

Mi aplicación tiene todo configurado (Spring 3.2, spring-security, thymeleaf, ...) y funciona como se esperaba. Ahora me gustaría hacer la solicitud de Ajax (bastante simple con jQuery pero no quiero usarlo ya que Thymeleaf en su tutorial, capítulo 11: Rendering Template Fragments ( link ) menciona que se puede hacer con fragmentos.

Actualmente tengo en mi controlador

@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 parte de la vista en la que me gustaría reemplazar los elementos del menú <ul></ul> :

<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>

Cualquier pista es muy apreciada. Especialmente si no tengo que incluir más marcos. Ya es demasiado para la aplicación web java como es.

Answer 1

Este es un enfoque que encontré en una publicación de blog :

No quería usar esos marcos, así que en esta sección estoy usando jQuery para enviar una solicitud AJAX al servidor, esperar la respuesta y actualizar parcialmente la vista (procesamiento de fragmentos).

La forma

<form>
<span class="subtitle">Guest list form</span>
<div class="listBlock">
<div class="search-block">
<input type="text" id="searchSurname" name="searchSurname"/>
<br />
<label for="searchSurname" th:text="#{search.label}">Search label:</label>
<button id="searchButton" name="searchButton" onclick="retrieveGuests()" type="button"
th:text="#{search.button}">Search button</button>
</div>
<!-- Results block -->
<div id="resultsBlock">
</div>
</div>
</form>

Este formulario contiene un texto de entrada con una cadena de búsqueda (nombre de búsqueda) que se enviará al servidor. También hay una región (resultsBlock div) que se actualizará con la respuesta recibida del servidor.

Cuando el usuario hace clic en el botón, se invocará la función retrieveGuests ().

function retrieveGuests() {
var url = ''/th-spring-integration/spring/guests'';
if ($(''#searchSurname'').val() != '''') {
url = url + ''/'' + $(''#searchSurname'').val();
}
$("#resultsBlock").load(url);
}

La función de carga jQuery realiza una solicitud al servidor en la url especificada y coloca el HTML devuelto en el elemento especificado (resultsBlock div).

Si el usuario ingresa una cadena de búsqueda, buscará a todos los invitados con el apellido especificado. De lo contrario, devolverá la lista completa de invitados. Estas dos solicitudes alcanzarán las siguientes asignaciones de solicitudes de controlador:

@RequestMapping(value = "/guests/{surname}", method = RequestMethod.GET)
public String showGuestList(Model model, @PathVariable("surname") String surname) {
model.addAttribute("guests", hotelService.getGuestsList(surname));
return "results :: resultsList";
}
@RequestMapping(value = "/guests", method = RequestMethod.GET)
public String showGuestList(Model model) {
model.addAttribute("guests", hotelService.getGuestsList());
return "results :: resultsList";
}

Como Spring está integrado con Thymeleaf, ahora podrá devolver fragmentos de HTML. En el ejemplo anterior, la cadena de retorno "results :: resultsList" hace referencia a un fragmento llamado resultsList que se encuentra en la página de resultados. Echemos un vistazo a esta página de resultados:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
</head>
<body>
<div th:fragment="resultsList" th:unless="${#lists.isEmpty(guests)}" id="results-block">
<table>
<thead>
<tr>
<th th:text="#{results.guest.id}">Id</th>
<th th:text="#{results.guest.surname}">Surname</th>
<th th:text="#{results.guest.name}">Name</th>
<th th:text="#{results.guest.country}">Country</th>
</tr>
</thead>
<tbody>
<tr th:each="guest : ${guests}">
<td th:text="${guest.id}">id</td>
<td th:text="${guest.surname}">surname</td>
<td th:text="${guest.name}">name</td>
<td th:text="${guest.country}">country</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

El fragmento, que es una tabla con invitados registrados, se insertará en el bloque de resultados.

Answer 2

Representar solo Thymeleaf fragments también funciona bien con ModelAndView .

Su controlador

@RequestMapping(value = "/feeds", method = RequestMethod.GET)
public ModelAndView getFeeds() {
LOGGER.debug("Feeds method called..");
return new ModelAndView("feeds :: resultsList");
}

Tu vista

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
<div th:fragment="resultsList" id="results-block">
<div>A test fragment</div>
<div>A test fragment</div>
</div>
</body>
</html>

Lo que realmente se procesa

<div id="results-block">
<div>A test fragment</div>
<div>A test fragment
</div>
</div>