如何使用 Thymeleaf 创建可点击项目列表

Question

在我的 Spring Boot web 应用程序中，我需要使用 Thymeleaf 创建项目列表，在其中单击并提交项目会将其值发送到我的控制器，如下所示：

@PostMapping({"/mylist"})
public ModelAndView postList(@RequestParam(value = "item") String item) {
    ModelAndView mav = new ModelAndView("mylist");
    mav.addObject("items", someRepository.findAll());
    ...
    return mav;
}

请注意，控制器采用 item 参数。

为了比较，下面的 Thymeleaf 下拉列表 按预期执行，因为当我从下拉列表中 select 一个项目，然后单击提交时，上面的控制器接收到商品价值：

<form th:action="@{/mylist}" method="post">
    ...
    <div>
        <select th:name="item">
            <option th:each="item : ${metaqueryitems}"
                    th:value="${item.code}"
                    th:selected="${item.id eq item}"
                    th:text="${item.id}"></option>
        </select>
        <td><input type="submit" th:value="Submit"/></td>
    </div>
    ...
</form>

但我不想显示下拉列表，而是想在常规 非下拉列表 中显示项目，例如：

<form th:action="@{/mylist}" method="post">
    ...
    <div th:name="item" th:each="item : ${items}">
        <input type="submit" th:value="${item.code}"/>
    </div>
    ...
</form>

但是，当我单击上面列表中的项目时，控制器总是以 item 参数的空值结束。

如何将 th:each 样式的 Thymeleaf 列表中的值发送到我的控制器？

Answer 1

您可以将 name="item" 添加到每个 <input> 元素：

<div th:each="item : ${metaqueryitems}">
    <input type="submit" name="item" th:value="${item.code}"/>
</div>

请注意，因为 item 只是一个文字字符串，所以这里不需要使用 th:name=...。您可以只使用 name=....

请注意：在表单中，您通常希望确保每个输入元素都有一个唯一的 name 值，以便您知道哪个用户输入的值来自哪个输入元素。

<form action="..." method="post">
    <input type="text" name="firstname" id="firstname">
    <input type="text" name="lastname"  id="lastname">
</form>

在这种非常特殊的情况下，您可以使用相同的名称 (item) 摆脱它们，因为您一次只能提交一个非空值。

如何使用 Thymeleaf 创建可点击项目列表

How to create a list of clickable items using Thymeleaf

java

spring

thymeleaf