Spring Boot/Thymeleafを使用してBootstrapモーダルにオブジェクトをロードするにはどうすればよいですか？

Question

私は仕事でいっぱいのテーブルがあります。

<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バージョンを取得できますが、モーダルから呼び出す方法はわかりません。

Answer 1

コンテンツを既存のモーダルにJavascriptで読み込むことができます。これを行うための最良の方法は、サーバ上のオブジェクトをthymleafを持つHTMLにレンダリングし、Ajax経由でこの応答を取得し、モーダルボックスにdivタグを挿入することです。