spring thymeleaf - delete object from html table and pass id to controller

Question

I pass a list with objects from my controller to my html and thymeleaf creates a for every object in the list.

I want to delete an entry via a button and pass the object id to my controller in order to delete it from the database.

However when I handle the post request in my controller the id attribute is emtpy.

HTML with Thymeleaf:

<tbody>
     <tr th:each="user : ${users}">
       <td th:text="${user.personId}"></td>
       <td th:text="${user.firstName}"></td>
       <td th:text="${user.lastName}"></td>
       <td>
           <form th:action="@{delete_user}" method="post" th:object="${user}">
              <input type="hidden" th:field="${user.personId}"/>
              <button type="submit" value="Submit" class="btn btn-danger">Delete</button>
           </form>
       </td>
     </tr>
</tbody>

Controller:

@RequestMapping(value = "/delete_user", method = RequestMethod.POST)
public String handleDeleteUser(@ModelAttribute("user") User user) {
    System.out.println(user.getPersonId());
    System.out.println("test");
    return "redirect:/external";
}

How can I make this work? Or is there another way?

Thanks!

Solution 1

you may try changing the th:action="@{delete_user}" to th:action="@{/delete_user}". or you can use path variable/ query string and pass the id using get method. e.g. html:

<a th:href="|@{/delete_user/${user.personId}}|" class="btn btn-danger">Delete</a>

controller:

@RequestMapping(value = "/delete_user/{personId}", method = RequestMethod.GET)
public String handleDeleteUser(@PathVariable String personId) {
    System.out.println(personId);
    System.out.println("test");
    return "redirect:/external";
}

or

html:

<a th:href="@{/delete_user(personId=${user.personId})}" class="btn btn-danger">Delete</a>

controller:

@RequestMapping(value = "/delete_user", method = RequestMethod.GET)
public String handleDeleteUser(@RequestParam(name="personId")String personId) {
    System.out.println(personId);
    System.out.println("test");
    return "redirect:/external";
}

Solution 2

HTML with Thymeleaf :

  <table class="table table-responsive">

        <th >
            <td>ID</td>
            <td>Name</td>
            <td>Address</td>
            <td>Delete</td>
        </th>

        <tr th:each="student : ${students}">
            <td th:text="${student.id}"/>
            <td th:text="${student.name}"/>
            <td th:text="${student.address}"/>
            <td >
              <form th:action="@{delete}" method="post">
                  <input type="hidden" name="id" th:value="${student.id}" />
                  <input type="submit" value="Delete" class="btn btn-danger" />
              </form>
            </td>
        </tr>
    </table>

Controller :

@RequestMapping(value = "/delete", method = RequestMethod.POST)
private String deleteStudent(@RequestParam String id){
    System.out.println("Student_Id : "+id);
    return "redirect:/display";
}

OR

HTML with Thymeleaf :

  <table class="table table-responsive">

        <th >
            <td>ID</td>
            <td>Name</td>
            <td>Address</td>
            <td>Delete</td>
        </th>

        <tr th:each="student : ${students}">
            <td th:text="${student.id}"/>
            <td th:text="${student.name}"/>
            <td th:text="${student.address}"/>
            <td >
                <a th:href="@{delete/__${student.id}__}" class="btn btn-danger">Delete</a>
            </td>
        </tr>
    </table>

Controller :

@RequestMapping(value = "/delete/{id}")
private String deleteStudent(@PathVariable(name = "id") String id){
    System.out.println("Student_Id : "+id);
    return "redirect:/display";
}

Solution 3

Below is the view section.

<tbody>
<tr th:each="income : ${incomes}">
<td th:text="${income.createDate}"></td>
<td th:text="${income.name}"></td>
<td th:text="${income.description}"></td>
<td th:text="${income.amount}"></td>
<td><a th:href="@{/income/edit/{id}(id=${income.id})}" class="btn btn-primary"><i class="fas fa-user-edit ml-2"></i></a></td>
<td><a th:href="@{/income/delete/{id}(id=${income.id})}" class="btn btn-primary"><i class="fas fa-user-times ml-2"></i></a></td>
</tr>
</tbody>

Below is the controller

@GetMapping("/delete/{id}")
public String deleteIncome(@PathVariable(value = "id") Long id,Model model) {
    Income note = incomeRepo.findById(id)
            .orElseThrow(() -> new ResourceNotFoundException("Income", "id", id));
    incomeRepo.delete(note);
    model.addAttribute("incomes",incomeRepo.findAll());
    return "viewIncome";
}

In the above code from the view section i'm passing the id to the controller. Then in the controller by finding the id, the relevant record is deleted.