How do I bind item from List to form modelAttribute using Spring MVC

Question

I have searched and couldnt find anything similar or i am serching for the wrong thing. I am returning a list of items from my Controller for display in my jsp. In my jsp table I would like to have a row for each item in my list, something like this:

<tbody>
   <c:forEach items="${productList}" var="product" varStatus="status">
      <tr>
         ???? This next line is seudo-code. I dont know how to bind the item to form ???
         <form:form method="post" modelAttribute="${productList}[status.index]">  
             <td><form:input path="price" class="input-mini" type="text" /></td>
             <td><button id="save" name="save"></td>
         </form
      </tr>
   </c:forEach>
</tbody>

then my controller would have a RequestMethod.POST for handleing the save action. Is this possible? If so could someone help point me in the right direction.

Is this possible I am not sure how to bind the item in the list to the form.

Solution 1

Following the suggestion from @tofindabhishek and still wanting to allow editing per row I ended up implementing a solution with in-row buttons for saving, editing and deleting for each row and pass the item id on post back to the controller. Here is my table body. Its using datatables, bootstrap and opens a modal for the full edit form. Altogether provides a very rich CMS IMO:

<tbody>
    <c:forEach items="${productManagerForm.products}" var="product" varStatus="status">
        <c:url value="/product/detail/${product.id}" var="detailUrl" />
        <tr>
           <td><a href="${detailUrl}">${product.id}</a> <form:hidden path="products[${status.index}].id" value="${product.id}" /></td>
           <td><form:input path="products[${status.index}].name" class="input-xlarge" type="text"/></td>
           <td><form:input path="products[${status.index}].price" class="input-mini" type="text" /></td>
           <td><form:input path="products[${status.index}].shippingPrice" class="input-mini" type="text" /></td>
           <td><button id="save" name="save" value="${product.id}" class="btn btn-success"><i class="fa fa-save"></i> Save </button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editProduct${product.id}"><i class="fa fa-edit"></i> Edit</button>
                <button id="delete" name="delete" value="${product.id}" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
           </td>
        </tr>
   </c:forEach>
</tbody>

Here is on of my POST handlers, from this you can see how I used the RequestMapping to map the handler and the RequestParam to bind the Id:

@RequestMapping(method = RequestMethod.POST, params = "delete")
public String deleteProduct(@RequestParam(value = "delete") int deleteProductId) {
   Product product = productService.findProduct(deleteProductId);
   productService.deleteProduct(product);
   ...
}

Solution 2

<tbody>
 <form:form method="post" modelAttribute="${productList}">  
   <c:forEach items="${productList}" var="product" varStatus="status">
      <tr>      
             <td><form:input path="{productList[[${status.index}].price}" class="input-mini" type="text" /></td>
             <td><button id="save" name="save"></td>
         </form
      </tr>
   </c:forEach>
</tbody>

this code would submit the form along with product List,in post you need to write logic to save product list. for further help you can refer following link.

(http://viralpatel.net/blogs/spring-mvc-multi-row-submit-java-list/)

Comments

[Ankur Singhal]

do you want save button for every row, and save individually each row.

[brad12s]

yes, this will be a 'quick edit' on a limited set of fields of the item (product). To make efficient for end user I will need to eventually POST via AJAX. Starting with basic functionality and follow the Progressive Enhancement technique.

[Ankur Singhal]

this might help you

[brad12s]

Not exactly what i was going for. Seems inefficient given that the entire list would have to be saved. Thanks for the example. Maybe, following this example, I pass the id of the object which has been changed back to the controller. -I'll post back later