如何使用 Thymeleaf 和 Spring Boot 将 UI 中的对象集合绑定到后端

Question

如何将对象列表返回给后端服务？例如UI 中显示了客户列表，其中只有用户选择的客户（选中复选框）应返回到后端（控制器类）。但我无法返回所选对象。

我的代码：

public class CustomerType {
    private String customerName;
    private String customerMsg;
    private Boolean selected;
    // setter 
    // getter
}

​

public class Customers {
    private ArrayList<CustomerType> customerType;
    // setter 
    // getter
}

​

@GetMapping(value = "/")
public String index(ModelMap modelMap) {
    ArrayList<CustomerType> customerType = new ArrayList<>();
    customerType.add(new CustomerType("1", "c1", null));
    customerType.add(new CustomerType("2", "c2", null));
    customerType.add(new CustomerType("3", "c3", null));
    Customers customers = new Customers();
    customers.setCustomerTypes(customerType);
    modelMap.put("customers", customers);
    return "index";
}

@PostMapping(value = "/save")
public String save(@ModelAttribute Customers customers, BindingResult errors, Model model)  {
    ...
    ...
    return "hello";
}

​

========== index.html ==========
...
<form id = "form" class="col-xs-12 col-sm-4" role="form"
    th:action="@{/save}" method="post" th:object="${customers}">
    <div class="checkbox"  th:each="customerType : ${customers.customerType}" >
        <input type="checkbox" id="custType" name="custType"
            th:text="${customerType.customerName}" th:value="${customerType.customerMsg}" th:checked="${customerType.selected}"></input>
    </div>
    <div>
        <p>
            <button type="submit" class="btn btn-default">Submit</button>
        </p>
    </div>
</form>

我能够在 UI 上显示客户列表，例如，如果用户选择 c1 和 c3，则其中有三个客户 c1、c2、c3，因此在单击提交按钮后，它们应该在保存方法中映射到 @ModelAttribute 客户对象并且该对象应该包含两个对象 c1 和 c3 的列表，但我收到的不是 2 个对象。

我不知道哪里出错了。

Answer 1

在将表单发送回控制器时，请确保传输的数据反映所需的对象结构。您必须提供与CustomerType 对象的checked 字段相对应的复选框，以及与上述类的其他字段相对应的其他隐藏输入。

请将您的表单更新为如下所示：

<form id = "form" class="col-xs-12 col-sm-4" role="form" th:action="@{/save}" method="post" th:object="${customers}">
    <div class="checkbox"  th:each="customerType, iterator : ${customers.customerType}" >
        <input type="hidden" th:field=*{customerType[__${iterator.index}__].customerName} />
        <input type="hidden" th:field=*{customerType[__${iterator.index}__].customerMsg} />
        <input type="checkbox" th:field="*{customerType[__${iterator.index}__].selected}" th:text="${customerType.customerName}" ></input>
    </div>
    <div>
        <p>
            <button type="submit" class="btn btn-default">Submit</button>
        </p>
    </div>
</form>

您将收到 Customers 对象，其中包含所有已传递的 CustomerType 对象的列表，其中 selected 字段评估为 true 用于检查记录。

Answer 2

表单中input 字段的name 应该与CustomerType 类中的属性名称匹配，即它们应该是customerName 和customerMsg，以便Spring 能够创建和填充相应的CustomerType 对象。