Eine Liste in Thymeleaf binden

1. Überblick

In diesem kurzen Tutorial zeigen wirhow to bind a List object in Thymeleaf.

Um zu erfahren, wie Sie Thymeleaf in Spring integrieren, können Sieour main Spring article here überprüfen. Dort erfahren Sie auch, wie Sie Felder anzeigen, Eingaben akzeptieren, Validierungsfehler anzeigen oder Daten für die Anzeige konvertieren.

2. Listen im Thymeleaf-Beispiel

Wir beginnen mit der Anzeige vonhow to display elements of a List in a Thymeleaf page and how to bind a list of objects as user’s inputs in a Thymeleaf form.

Zu diesem Zweck verwenden wir ein einfaches Modell, das im folgenden Code gezeigt wird:

public class Book {
    private long id;

    private String title;

    private String author;

    // getters and setters
}

In unserem Beispiel werden nicht nur vorhandene Bücher angezeigt, sondern der Benutzer kann auch mehrere Bücher zur Sammlung hinzufügen und alle vorhandenen Bücher gleichzeitig bearbeiten.

3. Anzeigen von Listenelementen

Schauen wir uns die folgende Methode vonControlleran, die die Seite vonallBookszurückgibt:

@GetMapping("/all")
public String showAll(Model model) {
    model.addAttribute("books", bookService.findAll());
    return "books/allBooks";
}

Hier haben wirList vonBook Objekten als Modellattribut hinzugefügt, das an die Ansicht gesendet wird, wo wir es mithilfe einer HTML-Tabelle anzeigen:


    
        
             Title 
             Author 
        
    
    
    
             No Books Available 
        
        
             Title 
             Author

Title	Author
No Books Available
Title	Author

Hierwe’re using the th:each property to iterate through the list und Anzeigeeigenschaften jedes Objekts darin.

4. Binden einer Liste mit Auswahlausdruck

Um die Liste der Objekte aus der Ansicht per Formularübermittlung an den Controller zu senden, können wir das ObjektListelbst nicht verwenden.

Stattdessenwe have to add a wrapper object that will hold the submitted list:

public class BooksCreationDto {
    private List books;

    // default and parameterized constructor

    public void addBook(Book book) {
        this.books.add(book);
    }

    // getter and setter
}

Ermöglichen wir dem Benutzer nun, drei Bücher in einem Formular hinzuzufügen.

Zunächst bereiten wir die Formularseite vor und übergeben unser Befehlsobjekt alsModel-Attribut:

@GetMapping("/create")
public String showCreateForm(Model model) {
    BooksCreationDto booksForm = new BooksCreationDto();

    for (int i = 1; i <= 3; i++) {
        booksForm.addBook(new Book());
    }

    model.addAttribute("form", booksForm);
    return "books/createBooksForm";
}

Wie wir sehen können, haben wir über die Wrapper-Klasse eine Liste mit 3 leerenBook-Objekten an die Ansicht übergeben.

Als nächstes müssen wir das Formular zu einer Thymeleaf-Seite hinzufügen:

Und so sieht die obige Seite aus:

Schauen wir uns genauer an, was wir hier gemacht haben. Zuerstwe used the th:object=”${form}” to specify the command object (das, das wir alsModel-Attribut übergeben haben).

Als nächstes ist zu erwähnen, dass wir mit einem Auswahlausdruck auf die Liste zugegriffen haben:

Und schließlichwe’re mapping our inputs as properties of the list elements using th:field.

Wir müssen jedoch auch die VariableitemStatverwenden, um zu definieren, auf welches Listenelement wir uns beziehen, wie in:

th:field="*{books[__${itemStat.index}__].title}"

Der letzte Schritt besteht darin, die übermittelten Daten im Back-End zu bearbeiten. Wir verwenden das Befehlsobjekt als@ModelAttribute in unserer@PostMapping-Methode in der Steuerung, speichern die abgerufene Liste der Bücher und geben alle vorhandenen Bücher an den Benutzer zurück:

@PostMapping("/save")
public String saveBooks(@ModelAttribute BooksCreationDto form, Model model) {
    bookService.saveAll(form.getBooks());

    model.addAttribute("books", bookService.findAll());
    return "redirect:/books/all";
}

Nach dem Absenden des Formulars an den Endpunkt von/saveerhalten wir die Seite mit allen neu hinzugefügten Büchern:

5. Binden einer Liste mit variablem Ausdruck

In diesem Beispiel laden wir zuerst alle vorhandenen Bücher in das Befehlsobjekt:

@GetMapping("/edit")
public String showEditForm(Model model) {
    List books = new ArrayList<>();
    bookService.findAll().iterator().forEachRemaining(books::add);

    model.addAttribute("form", new BooksCreationDto(books));
    return "books/editBooksForm";
}

Die HTML-Seite ist ähnlich, mit den bemerkenswertesten Unterschieden im Blockth:each:

Wie in<tr th:each=”book, itemStat : $\{form.books}”> gezeigt, haben wir auf etwas andere Weise auf die Liste zugegriffen, diesmal mit variablem Ausdruck. Besonders relevant istnotice that we provided name and value for input elements to properly submit data.

Wir mussten auch versteckte Eingaben hinzufügen, die die ID des aktuellen Buches binden, da wir keine neuen Bücher erstellen, sondern vorhandene bearbeiten möchten.

6. Fazit

In diesem Artikel haben wir gezeigt, wie das ObjektListin Thymeleaf und Spring MVC verwendet wird. Wir haben gezeigt, wie die Liste der an die Ansicht gesendeten Objekte angezeigt wird. Wir konzentrieren uns jedoch in erster Linie auf zwei Möglichkeiten, Benutzereingaben als Liste in Thymeleaf-Form zu binden.

Alle im Artikel erwähnten Codefragmente befinden sich inour GitHub repository.

TOC

Eine Liste in Thymeleaf binden