如何使用Thymeleaf和Spring Boot将对象集合从UI绑定到后端 [英] How to Bind Collection of Objects from UI to Backend using Thymeleaf and Spring Boot

问题描述

如何将对象列表返回到后端服务？例如，有客户列表显示在用户界面中，其中只有那些用户选择的用户（在复选框中选中）应该返回到后端（控制器类）。但我无法将选定的对象返回。

我的代码：

  public class CustomerType {
私人字符串customerName; 
私人字符串customerMsg; 
选择了私有布尔值; 
 // setter 
 // getter 
} 
 
 public class Customers {
 private ArrayList< 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.setCustomerTypes（customerType）; 
 modelMap.put（customers，customers）; 
返回index; 
 
 
 $ b @PostMapping（value =/ save）
 public String save（@ModelAttribute Customers customers，BindingResult errors，Model model）{
 ... 
 ... 
返回hello; 
} 
 
 ========== index.html ========== 
 ... 
 
 th：action =@ {/ save}method =postth：object =$ {客户}> 
< div class =checkboxth：each =customerType：$ {customers.customerType}> 
< input type =checkboxid =custTypename =custType
 th：text =$ {customerType.customerName}th：value =$ {customerType.customerMsg}个：检查= $ {customerType.selected} >< /输入> 
< / div> 
< div> 
< p> 
< button type =submitclass =btn btn-default>提交< / button> 
< / p> 
< / div> 
< / form> 
  

我可以在UI上显示客户列表，例如有三个客​​户c1，c2，c3其中如果用户在点击提交按钮后选择c1和c3，则应该将它们映射到保存方法中的@ModelAttribute Customers Object，并且对象应该包含两个对象c1和c3的列表，而不是获取2个对象接收空值。

我无法得到错误的地方。

解决方案

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

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

 <表单id =formclass =col-xs-12 col-sm-4role =formth：action =@ {/ save}method =postth：object =$ {customers} > 
< div class =checkboxth：each =customerType，iterator：$ {customers.customerType}> 
< input type =hiddenth：field = * {customerType [__ $ {iterator.index} __]。customerName} /> 
< input type =hiddenth：field = * {customerType [__ $ {iterator.index} __]。customerMsg} /> 
< input type =checkboxth：field =* {customerType [__ $ {iterator.index} __]。selected}th：text =$ {customerType.customerName}>< /输入> 
< / div> 
< div> 
< p> 
< button type =submitclass =btn btn-default>提交< / button> 
< / p> 
< / div> 
< / form> 
  

借此，您将收到 Customers 包含所有传递 CustomerType 对象的列表，其中选择字段的计算结果为 true 记录。

How to return List of Objects to Backend Service? For E.g. there are list of customer getting displayed in UI, out of which only those customers which users selects (checks in checkbox) should be returned to the backend (Controller class). But i am not able to returned the selected object back.

My code:

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>

I am able to display lists of Customers on UI e.g there are three customer c1, c2, c3 out of which if user selects c1 and c3 so after clicking on submit button those should get mapped to @ModelAttribute Customers Object in save method and that object should contain list of two Objects c1 and c3, but instead of getting 2 Objects I am receiving Null.

I am not able to get where i am going wrong.

解决方案

While sending your form back to controller, be sure that transmited data reflect desired object structure. You have to provide checkboxes that correspond the checked field of the CustomerType objects and additional hidden inputs which correspond others fields of mentioned class.

Please update your form to looks like:

<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>

With this you'll receive the Customers object containing list of all passed CustomerType objects, with selected fields evaluated to true for checked records.

这篇关于如何使用Thymeleaf和Spring Boot将对象集合从UI绑定到后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！