如何在 Thymeleaf 中將物件傳遞給模態對話框？
1. 概述
在 Web 應用程式中建立模式對話方塊是使用者互動的常見要求，例如顯示表單、確認操作或呈現資訊。在具有 Thymeleaf 的 Spring 應用程式中，將動態資料傳遞到模式對話方塊可以顯著增強使用者互動性。
在本文中，我們將逐步介紹 Thymeleaf 中實作模式對話框並向其傳遞物件的過程。
2.Maven依賴
在開始之前，讓我們確保 Thymeleaf 在 Spring MVC 應用程式中正確配置。我們需要在 pom.xml 檔案中包含thymeleaf和thymeleaf-spring5依賴項：
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.1.2.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.1.2.RELEASE</version>
</dependency>這些依賴項可讓 Spring MVC 處理 Thymeleaf 視圖並無縫渲染動態內容
3. 定義資料模型
接下來，我們定義一個Book模型類別。此類別將表示我們要傳遞到模式對話框的資料。它包含id和name等屬性，這些屬性將用於顯示每本書的相關資訊：
public class Book {
private int id;
private String name;
// constructor
// getters and setters
}4. 建立控制器
現在，讓我們實作一個 Spring 控制器，它準備Book物件清單並將它們傳遞到 Thymeleaf 視圖。此控制器將處理請求並使書籍資料可供模板使用：
@GetMapping("/listBooksWithModal")
public String listBooks(Model model) {
List<Book> books = new ArrayList<>();
books.add(new Book(1, "Book 1"));
books.add(new Book(1, "Book 2"));
books.add(new Book(1, "Book 2"));
model.addAttribute("books", books);
return "listBooksWithModal.html";
}listBooks()方法準備Book的清單並將它們加入模型中，使listBooksWithModal.html範本可以存取該清單。
5. 創建 Thymeleaf 模板
現在，讓我們專注於 Thymeleaf 模板，當使用者點擊「 View Details 」按鈕時，該模板將顯示書籍清單並開啟模式對話框。
在此範本中，我們將Book物件傳遞到模式對話框，該對話框顯示書籍 ID 和名稱等詳細資訊：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Book List with Modals</title>
</head>
<body>
<div>
<h1>Book List</h1>
<table border="1">
<thead>
<tr>
<th>Book ID</th>
<th>Book Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="book : ${books}">
<td th:text="${book.id}"></td>
<td th:text="${book.name}"></td>
<td>
<!-- Button to open modal for the selected book -->
<button th:attr="onclick=|showModal('infoModal' + ${book.id})|">View Details</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal template for each book -->
<div th:each="book : ${books}" th:attr="id=${'infoModal' + book.id}" style="display: none;">
<div>
<h3>Book Details</h3>
<p><strong>ID:</strong> <span th:text="${book.id}"></span></p>
<p><strong>Name:</strong> <span th:text="${book.name}"></span></p>
<button th:attr="onclick=|hideModal('infoModal' + ${book.id})|">Close</button>
</div>
</div>
<script>
function showModal(modalId) {
document.getElementById(modalId).style.display = 'block';
}
function hideModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}
</script>
</body>
</html>此範本在表格中顯示書籍列表，每一行對應於一本特定的書籍。這種結構使用戶可以輕鬆查看每本書的基本信息，例如 ID 和名稱。此外，每本書都有一個「 View Details 」按鈕。單擊時，此按鈕會觸發模式以顯示有關所選書籍的更多詳細資訊。
在模式內部，Thymeleaf 的th:text屬性動態填入 content 。當使用者點擊特定書籍的「 View Details 」按鈕時，模式會顯示該書籍的正確詳細信息，例如其 ID 和名稱。伺服器透過模型產生模態 ID，Thymeleaf 渲染內容，將其綁定到模態的 HTML 元素。
此外，我們根據書籍的 ID 為每個模式分配一個唯一的 ID。這保證了當使用者與「 View Details 」按鈕互動時顯示正確的模式。模態 ID 是使用infoModal{id}格式動態產生的，其中{id}替換為實際的圖書 ID。因此，將為所選書籍物件顯示正確的模式。
整體而言，模板結構有助於使用者與圖書清單進行互動。他們無需離開頁面即可查看每本書的更詳細信息，從而獲得流暢高效的用戶體驗。
6. 結果
在本節中，我們將展示渲染的模板，以說明 Thymeleaf 模板在實際應用中的外觀。表中列出了書籍，每行顯示書籍的 ID、名稱和「 View Details 」按鈕：
當使用者按一下該按鈕時，模式對話方塊將顯示有關所選書籍的詳細資訊：
七、結論
本文示範如何使用 Thymeleaf 將物件傳遞到 Spring MVC 應用程式中的模式對話方塊。透過為每個物件創建獨特的模態並使用 Thymeleaf 的動態資料綁定功能，我們能夠將相關內容傳遞到模態並以互動方式顯示它。
與往常一樣，本文中使用的程式碼可以在 GitHub 上找到。