如何使用 Spring Boot / Thymeleaf 在 Bootstrap 模式中加载对象？答案

【问题标题】：How do I load an object in a Bootstrap modal using Spring Boot / Thymeleaf?如何使用 Spring Boot / Thymeleaf 在 Bootstrap 模式中加载对象？
【发布时间】：2017-07-11 14:04:47
【问题描述】：

我有一张填满任务的桌子：

<table class="table" id="tasksTable">
    <thead class="thead-inverse">
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr data-th-each="task : ${tasks}">
            <td data-th-text="${task.id}">Task ID</td>
            <td data-th-text="${task.title}">Task Title</td>
            <td><a th:href="@{/tasks/delete/{id}(id=${task.id})}"
                class="btn btn-danger">Delete</a> -
                <button class="btn btn-warning" data-toggle="modal"
                    data-th-id="${task.id}" data-target="#updateTaskModal">Update</button></td>
        </tr>
    </tbody>
</table>

列表是从这样的控制器发送的：

@GetMapping(path = "/")
public String getAllUsersView(Model model) {
    List<User> users = new ArrayList<>();
    List<Task> tasks = new ArrayList<>();
    User user = new User();
    Task task = new Task();

    userRepository.findAll().forEach(users::add);
    taskRepository.findAll().forEach(tasks::add);

    model.addAttribute("users", users);
    model.addAttribute("tasks", tasks);
    model.addAttribute("user", user);
    model.addAttribute("task", task);

    return "view";
}

我想从表中选择一项任务，并将其发送到模态。例如，假设我有 10 个任务。我想选择任务 #5 并能够更新它。当我单击更新时，我可以打开一个模式，但我不知道如何使用来自该特定任务的数据填充表单，它都是空白的。

这是我的模态：

  <div id="updateTaskModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Update Task</h4>
                </div>
                <div class="modal-body">

                    <form id="updateNewTask" action="#" th:action="@{/tasks/update}"
                        th:object="${task}" method="put">

                        <input type="text" class="form-control" name="title" id="title"
                            th:field="*{title}" placeholder="Task Title" />

                        <hr />

                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success pull-right">Update</button>

                    </form>
                </div>
            </div>
        </div>
    </div>

实现这一目标的最佳做法是什么？是否可以通过按钮发送整个对象？如果没有，我怎样才能将我的对象加载到模态中？我可以通过 /tasks/{taskId} 检索对象的 JSON 版本，但我不知道如何从模式中调用它。

【问题讨论】：

标签： spring-boot bootstrap-modal thymeleaf bootstrap-4

【解决方案1】：

您可以使用 Javascript 将内容加载到现有模式中。 “最好”的方法是通过 thymleaf 将服务器上的对象渲染成一些 HTML，然后通过 Ajax 获取这个响应，并将模态框注入到一些 div 标签中。

【讨论】：