ThymeleafとSpringブートを使用して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そうを選択した場合3つの、顧客C1、C2、C3は、そのうちのありますsaveメソッドの@ModelAttribute Customersオブジェクトにマップされ、オブジェクトに2つのオブジェクトc1とc3のリストが含まれている必要がありますが、2つのオブジェクトを取得する代わりにNullを受け取ります。

どこが間違っているのかわかりません。

Answer 1

フォームをコントローラに戻している間に、送信されたデータが目的のオブジェクト構造を反映していることを確認してください。 CustomerTypeオブジェクトのcheckedフィールドに対応するチェックボックスと、前述のクラスの他のフィールドに対応する追加の隠し入力を提供する必要があります。

のようなルックスにフォームを更新してください：あなたがチェックしたレコードのため真に評価さselectedフィールドで、すべて合格CustomerTypeオブジェクトのリストを含むCustomersオブジェクトを受け取ります

これにより

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

。

Answer 2

形でinputフィールドのnameは、彼らが対応するCustomerTypeオブジェクトを作成し、移入することができるようにするために春customerNameとcustomerMsgあるべきCustomerTypeクラスすなわちにプロパティ名と一致する必要があります。