Spring MVC, Thymeleaf – Casilla de verificación, si está marcada / desmarcada el acceso al punto de conexión del controlador.

11 Jun, 2023 Programación 0

Tengo un proyecto Spring MVC + Thymeleaf, y una de mis páginas / controladores muestra cierta información.

La única interacción que un usuario puede hacer en esa página es marcar o desmarcar una casilla.

Si el usuario lo hace, se debe ejecutar cierta lógica en el controlador.

Mi objetivo es acceder a un endpoint del controlador si la casilla cambia (marcada / desmarcada).

¿Cómo vincular la casilla de verificación a un endpoint del controlador, obtener el valor de la casilla y ejecutar cierta lógica según el valor (marcado / desmarcado)?

Con un formulario, lo sé, es un @PostMapping, pero con un formulario normalmente tengo un botón en el que el usuario tiene que hacer clic para que el formulario se transfiera al endpoint especificado.

¿Pero cómo con eventos en elementos como casillas de verificación?

@Controller
@Scope("session")
public class MyController {
   @GetMapping("/")
   public String show(Model model) {
      // Alguna lógica para preparar la información
      boolean isChecked = ... dependiendo de la lógica ...;
      model.addAttribute("isChecked", isChecked);
      ...

      // Mostrar información en la página index.html
      return "index";
   }

   @... ¿qué tipo de mapeo?
   public String checkboxAltered(... lo que sea necesario..., Model model) {
      // Marcado o desmarcado
      if (... casilla de verificación marcada ...) {
         // Marcado, eliminar algunos datos
      } else { 
         // Desmarcado, crear algunos datos
      }
   }

   // Redirigir para mostrar información de nuevo
   return "redirect:/";
}

¿Y cómo se debe hacer en Thymeleaf para que esto funcione en la página de la casilla de verificación (index.html)? Actualmente solo hay una casilla de verificación y dependiendo del atributo en el modelo (valor booleano), está marcada / desmarcada:

<input type="checkbox" th:checked="${isChecked}"/>

Ahora tengo que agregar el manejo de eventos de usuario descrito a la casilla de verificación.

Pero no estoy seguro si esto se puede hacer de la manera que espero.

Si no es posible, ¿cómo hacerlo de otra manera?

La documentación de Thymeleaf en https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#checkbox-fields muestra casillas de verificación en contexto de formularios.

Pero eso significaría que tendría que proporcionar una casilla de verificación que el usuario debe marcar y también un botón en el que el usuario debe hacer clic además. Quiero evitar que el usuario tenga que hacer clic dos veces.

davy.ai

June 11, 2023 at 2:14 am

Para vincular la casilla de verificación a un endpoint del controlador, puede utilizar JavaScript/jQuery para escuchar el evento de clic en la casilla de verificación y luego hacer una llamada AJAX al endpoint con el valor de la casilla de verificación. Aquí hay un ejemplo:

En su index.html, agregue un ID a la casilla de verificación:

<input type="checkbox" th:checked="${isChecked}" id="myCheckbox">

Agregue una etiqueta de script en la parte inferior de la página para escuchar el evento de clic y hacer la llamada AJAX:

<script th:inline="javascript">
    $(document).ready(function () {
        $('#myCheckbox').click(function() {
            var isChecked = $(this).prop('checked');
            $.ajax({
                url: '/checkboxAltered',
                type: 'POST',
                data: {isChecked: isChecked},
                success: function(response) {
                    // Manejar respuesta exitosa
                },
                error: function(xhr) {
                    // Manejar respuesta de error
                }
            });
        });
    });
</script>

En su clase MyController, agregue una anotación @PostMapping al método checkboxAltered y agregue un @RequestParam para recuperar el valor de la casilla de verificación:

@PostMapping("/checkboxAltered")
public String checkboxAltered(@RequestParam boolean isChecked) {
    // Marcado o sin marcar
    if (isChecked) {
        // Marcado, eliminar algunos datos
    } else {
        // Sin marcar, crear algunos datos
    }

    // Redirigir para mostrar la información nuevamente
    return "redirect:/";
}

Con este enfoque, el método checkboxAltered se llamará cada vez que el usuario haga clic en la casilla de verificación y el valor de la casilla de verificación se pasará como parámetro.

Answer

davy.ai

June 11, 2023 at 2:14 am
Para vincular la casilla de verificación a un endpoint del controlador, puede utilizar JavaScript/jQuery para escuchar el evento de clic en la casilla de verificación y luego hacer una llamada AJAX al endpoint con el valor de la casilla de verificación. Aquí hay un ejemplo:

En su index.html, agregue un ID a la casilla de verificación:
```
<input type="checkbox" th:checked="${isChecked}" id="myCheckbox">
```
Agregue una etiqueta de script en la parte inferior de la página para escuchar el evento de clic y hacer la llamada AJAX:
```
<script th:inline="javascript">
    $(document).ready(function () {
        $('#myCheckbox').click(function() {
            var isChecked = $(this).prop('checked');
            $.ajax({
                url: '/checkboxAltered',
                type: 'POST',
                data: {isChecked: isChecked},
                success: function(response) {
                    // Manejar respuesta exitosa
                },
                error: function(xhr) {
                    // Manejar respuesta de error
                }
            });
        });
    });
</script>
```
En su clase MyController, agregue una anotación @PostMapping al método checkboxAltered y agregue un @RequestParam para recuperar el valor de la casilla de verificación:
```
@PostMapping("/checkboxAltered")
public String checkboxAltered(@RequestParam boolean isChecked) {
    // Marcado o sin marcar
    if (isChecked) {
        // Marcado, eliminar algunos datos
    } else {
        // Sin marcar, crear algunos datos
    }

    // Redirigir para mostrar la información nuevamente
    return "redirect:/";
}
```
Con este enfoque, el método checkboxAltered se llamará cada vez que el usuario haga clic en la casilla de verificación y el valor de la casilla de verificación se pasará como parámetro.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Spring MVC, Thymeleaf – Casilla de verificación, si está marcada / desmarcada el acceso al punto de conexión del controlador.

Answer

davy.ai