Spring MVC (text field and button) using CrudRepository and Thymeleaf - java

I need to create a simple search button via a custom method using CrudRepository and show the search results on a website.
Event.java
#Entity
#Table(name = "events")
public class Event {
private String name;
}
EventRepository.java
public interface EventRepository extends CrudRepository<Event, Long>{
public Iterable<Event> findByName(String name);
}
EventService.java
public interface EventService {
public Iterable<Event> findByName(String name);
}
EventServiceImpl.java
#Service
public class EventServiceImpl implements EventService {
#Override
public Iterable<Event> findByName(String name) {
return eventRepository.findByName(name);
}
}
EventsController.java
#Controller
#RequestMapping(value = "/events", produces = { MediaType.TEXT_HTML_VALUE })
public class EventsController {
#RequestMapping(value = "/search", method = RequestMethod.GET)
public String showEventsByName(#ModelAttribute Event event, #RequestParam (value = "search", required = false) String name, Model model) {
model.addAttribute("event", event);
model.addAttribute("searchResult", eventService.findByName(name));
return "events/index";
}
index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/default}">
<head>
<title>All events</title>
</head>
<body>
<div layout:fragment="content">
<h3>Search for an event by name</h2>
<form th:object="${event}" th:action="#{/events/search}" method="get">
<input type="text" name="search" id="search" th:value="${search}"/>
<input type="submit" value="Search"/>
<div th:if="${not #lists.isEmpty(search)}">
<h2>Events search results</h2>
<table class="table table-striped table-hover">
<thead>
<tr>
<th><i class="fa fa-bolt"></i> Event</th>
<th><i class="fa fa-map-marker"></i> Venue</th>
<th><i class="fa fa-calendar"></i> Date</th>
<th><i class="fa fa-clock-o"></i> Time</th>
</tr>
</thead>
<tbody>
<tr th:each="event: ${searchResult}">
<td th:text="${event.name}">My Event</td>
<td th:text="${event.venue.getName()}">Event venue</td>
<td th:text="${{event.date}}">Event date</td>
<td th:text="${{event.time}}">Event time</td>
</tr>
</tbody>
</table>
</div>
</form>
<h1>All events</h1>
<table class="table table-striped table-hover">
<thead>
<tr>
<th><i class="fa fa-bolt"></i> Event</th>
<th><i class="fa fa-map-marker"></i> Venue</th>
<th><i class="fa fa-calendar"></i> Date</th>
<th><i class="fa fa-clock-o"></i> Time</th>
</tr>
</thead>
<tbody>
<tr th:each="e : ${events}">
<td th:text="${e.name}">My Event</td>
<td th:text="${e.venue.getName()}">Event venue</td>
<td th:text="${{e.date}}">Event date</td>
<td th:text="${{e.time}}">Event time</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am using the naming convention for custom CrudRepository methods, which means that the implementation should be provided by the interface already.
When I run the web application and submit some input in the form, the desired html view is displayed, but the search result never shows any event.
Picture 1
Picture 2
I tried removing #ModelAttribute Event event and model.addAttribute("event", event); as in this post which addresses the same issue it was not used, but the outcome was the same.
I know that there is a similar post already, but the solution suggested there does not work for me and I tried different approaches but the result was not as expected.

eventService.findByName(name);
Will look for exact name match
Create a new method for searching
Service Interface
public interface EventService {
public Iterable<Event> findByName(String name);
public Iterable<Event> searchForName(String name);
}
Repository
public interface EventRepository extends CrudRepository<Event, Long>{
public Iterable<Event> findByName(String name);
public Iterable<Event> findByNameContainingIgnoreCase(String name);
}
Service Class
#Service
public class EventServiceImpl implements EventService {
#Override
public Iterable<Event> findByName(String name) {
return eventRepository.findByName(name);
}
#Override
public Iterable<Event> searchForName(String name) {
return eventRepository.findByNameContainingIgnoreCase(name);
}
}
Update:
When searching for nothing, do you want to display nothing or everything? I prefer the latter. If you want to not show anything, check for the search parameter before calling the service.
#RequestMapping(value = "/search", method = RequestMethod.GET)
public String showEventsByName(#RequestParam (value = "search", required = false) String name, Model model) {
if(name!=null && !name.isEmpty()){
model.addAttribute("searchResult", eventService.searchForName(name));
} // else{ } create an empty list or handle null in view
// ...
}
if you want to hide the table header if there are no results use
th:if="${searchResult !=null and !searchResult.isEmpty()}" <!-- For Both -->

Related

Spring MVC - fill model on the form

I want to fill the form according to the related book when I click the view or update the link on the page. I know, there is a solution with opening another page but I want to do it on the same page. As you can see on the picture below I can properly get the list on the left table. I have tried a post method below but did not work. So what would you recommend to do it?
Controller class:
#PostMapping(path = "/listbooks")
public String getBook(#ModelAttribute BookConfig bookConfig, Model model)
throws IOException {
model.addAttribute("book", bookConfig);
return "list";
}
#GetMapping(path = "/listbooks")
public String showAllBooks(Model model) throws IOException {
model.addAttribute("books", bookService.getBookConfigList());
return "list";
}
HTML file:
<div class="table-responsive" th:if="${not #lists.isEmpty(books)}">
<table class="table table-hover" style="height:50px;">
<thead class="thead-inverse">
<tr>
<th>Name</th>
<th>View</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tr th:each="book : ${books}">
<td th:text="${book.name}">Book Name</td>
<td>View</td>
<td>Update</td>
<td>Delete</td>
</tr>
</table>
</div>
This is what I am trying to do on the HTML file:
<form th:if="${book != null}" th:object="${book}" th:action="#{/book/}"
method="post">
<div class="panel-heading">
<h4 class="panel-title"
">Edit
Book Configuration</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3 form-group"
>
<label>Book name</label>
<input type="text" class="form-control" th:field="*{name}"/>
</div>
...
I have solved using JavaScript, Firstly, I have adjusted the getBook method below
#PostMapping("/books")
public String getBook(#RequestBody String bookName) throws IOException {
return "list";
}
and then I have add these two JS functions:
$(document).ready(function () {
$(".view").click(function () {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".bookname").text(); // get the text on the view link using its the class name
$.post("http://localhost:8081/books",
{
bookName: $text
},
function (data, status) {
assignDataToTable(data);
});
});
});
function assignDataToTable(data) {
alert("hey" + data);
document.getElementById("booknameinput").value = data;
}

JSP Input value To Java Method -> HttpServletRequest gives NULL value

Hello Guys.
I have simple Storage page whichs display all Products from DB.
I set to each of them with Unique name to change the Amount of product.
When i want to catch this value in Java method its returns me null.
Can you help me what i need to do to corretly catching value's in this text inputs ?
Controller :
#Controller
public class StoragePageController extends HttpServlet {
#GET
#RequestMapping(value = "/storage/subamount/{id}")
public String substractTheAmountValue(#PathVariable("id") int id, Model model, HttpServletRequest request) {
String amount_req = request.getParameter("amount_sub_" + id);
System.out.println(amount_req);
return null;
}
}
JSP fragment :
<c:set var="licznik" value="${recordStartCounter }" />
<div align="center">
<table width="1000" border="0" cellpadding="6" cellspacing="2">
<c:forEach var="u" items="${productList }">
<c:set var="licznik" value="${licznik+1}" />
<tr onmouseover="changeTrBg(this)" onmouseout="defaultTrBg(this)">
<td align="right"><c:out value="${licznik }" /></td>
<td align="left"><c:out value="${u.description }" /></td>
<td align="left"><c:out value="${u.amount }" /></td>
<td align="center"><input type="text" name="amount_sub_${licznik}" id="amount_sub_${licznik}"></td>
<td align="center"><input type="button" value="Substract the value" onclick="window.location.href='${pageContext.request.contextPath}/storage/subamount/${licznik}'"/></td>
</tr>
</c:forEach>
</table>
You should be having your API controller like the one given below given that your UI is posting the data to your API / Controller (assuming you are using the latest version of Spring Boot). You have a #Get mapping which does not accept request payload in the body.
#RestController
public class StoragePageController {
#PostMapping(value = "/storage/subamount/{id}", produces = {"application/json"})
public String substractTheAmountValue(#PathVariable("id") int id, Model model) {
String amount_req = id;
System.out.println(amount_req);
return null;
}
}

How to pass a variable value to HTML using Java and Thymeleaf

I am new both to Spring Boot and Thymeleaf, and want to pass the value of a variable defined in the Java code to the HTML page. I searched the Web, but probably, I have overseen something important. I try to do it with the following code:
Favorite.java:
#Getter
#Setter
public class Favorite {
private String id;
private String target;
public Favorite(final String id, final String target) {
setId(id);
setTarget(this.target);
}
}
PortalController.java:
public class PortalController {
private final List<Favorite> myFavorites = new ArrayList<>();
#ModelAttribute("myFavorites")
public List<Favorite> myFavorites() {
if (myFavorites.size() == 0) {
myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_ZWD_ESS_ABW", "ABC"));
myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_CATS", "DEF"));
myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_PEP_WISH_PLAN", "XYZ"));
}
return myFavorites;
}
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="de" xml:lang="de">
<head>
[…]
</head>
<body>
[…]
<ul>
<div th:switch="${not #lists.isEmpty(myFavorites)}">
<div th:case="true">
<div th:each="myFavorite : ${myFavorites}">
<li>
<td th:text="${myFavorite.id}"></td>
<td th:text="${myFavorite.task}"></td>
</li>
</div>
</div>
<div th:case="*">
Nothing to show!
</div>
</div>
</ul>
[…]
I get the "Nothing to show!" text, which means that myFavorites is empty. What do I miss or what did I misunderstood about this?
Edit:
I modified the PortalController after reading The #ModelAttribute in Depth to this:
public class PortalController {
private final List<Favorite> myFavorites = new ArrayList<>();
private final Map<String, List<Favorite>> favoritesMap = new HashMap<>();
#RequestMapping(value = "/getMyFavorites", method = RequestMethod.POST)
public String submit(#ModelAttribute("myFavorites") final List<Favorite> favorites,
final BindingResult result, final ModelMap model) {
if (result.hasErrors()) return "error";
model.addAttribute("myFavorites", favorites);
favoritesMap.put(favorites.toString(), favorites);
return "favoritesView";
}
#ModelAttribute
public void getMyFavorites(final Model model) {
if (myFavorites.size() == 0) {
myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_ZWD_ESS_ABW", "ABC"));
[…]
}
model.addAttribute("myFavorites", myFavorites);
}
Unfortunately, there is still something missing or misunderstood by me so that the Web page returns still "Nothing to show!".
Edit 2:
This is the current state I have after reading the documentation requested here:
PortalController.java:
public class PortalController {
private final List<Favorite> myFavorites = new ArrayList<>();
#RequestMapping(value = "/getMyFavorites", method = RequestMethod.GET)
public String submit(#ModelAttribute("myFavorite") final List<Favorite> favorites,
final BindingResult result, final ModelMap model) {
if (result.hasErrors()) return "error";
model.addAttribute("myFavorites", favorites);
return "favoritesView";
}
#ModelAttribute
public void getMyFavorites(final Model model) {
if (myFavorites.size() == 0) {
myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_ZWD_ESS_ABW", "ABC"));
[…]
}
model.addAttribute("myFavorites", myFavorites);
}
index.html:
<ul>
<div th:switch="${not #lists.isEmpty(myFavorite)}">
<div th:case="true">
<div th:each="myFavorite : ${myFavorites}">
<li>
<td th:text="${myFavorite.id}"></td>
<td th:text="${myFavorite.task}"></td>
</li>
</div>
</div>
<div th:case="false">
Nothing to show!
</div>
</ul>
But I still get "Nothing to show!", as ${myFavorites} is empty.
According to the documentation #ModelAttribute should be used with #RequestMapping. You can find a more detailed description of how this annotation works here.
Also for showing a table you can change your thymeleaf code to:
<table>
<thead>
<tr>
<th> id</th>
<th> target</th>
</tr>
</thead>
<tbody>
<tr th:if="${myFavorites.empty}">
<td colspan="2"> No Info </td>
</tr>
<tr th:each="myFavorite: ${myFavorites}">
<td><span th:text="${myFavorite.id}"> ID</span></td>
<td><span th:text="${myFavorite.target}"> Target</span></td>
</tr>
</tbody>
</table>

How to bind an object list with thymeleaf?

I am having a lot of difficulty with POSTing back a form to the controller, which should contain simply an arraylist of objects that the user may edit.
The form loads up correctly, but when it's posted, it never seems to actually post anything.
Here is my form:
<form action="#" th:action="#{/query/submitQuery}" th:object="${clientList}" method="post">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Select</th>
<th>Client ID</th>
<th>IP Addresss</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr th:each="currentClient, stat : ${clientList}">
<td><input type="checkbox" th:checked="${currentClient.selected}" /></td>
<td th:text="${currentClient.getClientID()}" ></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}" ></td>
</tr>
</tbody>
</table>
<button type="submit" value="submit" class="btn btn-success">Submit</button>
</form>
Above works fine, it loads up the list correctly. However, when I POST, it returns a empty object (of size 0). I believe this is due to the lack of th:field, but anyway here is controller POST method:
...
private List<ClientWithSelection> allClientsWithSelection = new ArrayList<ClientWithSelection>();
//GET method
...
model.addAttribute("clientList", allClientsWithSelection)
....
//POST method
#RequestMapping(value="/submitQuery", method = RequestMethod.POST)
public String processQuery(#ModelAttribute(value="clientList") ArrayList clientList, Model model){
//clientList== 0 in size
...
}
I have tried adding a th:field but regardless of what I do, it causes an exception.
I've tried:
...
<tr th:each="currentClient, stat : ${clientList}">
<td><input type="checkbox" th:checked="${currentClient.selected}" th:field="*{}" /></td>
<td th th:field="*{currentClient.selected}" ></td>
...
I cannot access currentClient (compile error), I can't even select clientList, it gives me options like get(), add(), clearAll() etc, so it things it should have an array, however, I cannot pass in an array.
I've also tried using something like th:field=${}, this causes runtime exception
I've tried
th:field = "*{clientList[__currentClient.clientID__]}"
but also compile error.
Any ideas?
UPDATE 1:
Tobias suggested that I need to wrap my list in a wraapper. So that's what I did:
ClientWithSelectionWrapper:
public class ClientWithSelectionListWrapper {
private ArrayList<ClientWithSelection> clientList;
public List<ClientWithSelection> getClientList(){
return clientList;
}
public void setClientList(ArrayList<ClientWithSelection> clients){
this.clientList = clients;
}
}
My page:
<form action="#" th:action="#{/query/submitQuery}" th:object="${wrapper}" method="post">
....
<tr th:each="currentClient, stat : ${wrapper.clientList}">
<td th:text="${stat}"></td>
<td>
<input type="checkbox"
th:name="|clientList[${stat.index}]|"
th:value="${currentClient.getClientID()}"
th:checked="${currentClient.selected}" />
</td>
<td th:text="${currentClient.getClientID()}" ></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}" ></td>
</tr>
Above loads fine:
Then my controller:
#RequestMapping(value="/submitQuery", method = RequestMethod.POST)
public String processQuery(#ModelAttribute ClientWithSelectionListWrapper wrapper, Model model){
...
}
The page loads correctly, the data is displayed as expected. If I post the form without any selection I get this:
org.springframework.expression.spel.SpelEvaluationException: EL1007E:(pos 0): Property or field 'clientList' cannot be found on null
Not sure why it's complaining
(In the GET Method it has: model.addAttribute("wrapper", wrapper);)
If I then make a selection, i.e. tick the first entry:
There was an unexpected error (type=Bad Request, status=400).
Validation failed for object='clientWithSelectionListWrapper'. Error count: 1
I'm guessing my POST controller is not getting the clientWithSelectionListWrapper. Not sure why, since I have set the wrapper object to be posted back via the th:object="wrapper" in the FORM header.
UPDATE 2:
I've made some progress! Finally the submitted form is being picked up by the POST method in controller. However, all the properties appear to be null, except for whether the item has been ticked or not. I've made various changes, this is how it is looking:
<form action="#" th:action="#{/query/submitQuery}" th:object="${wrapper}" method="post">
....
<tr th:each="currentClient, stat : ${clientList}">
<td th:text="${stat}"></td>
<td>
<input type="checkbox"
th:name="|clientList[${stat.index}]|"
th:value="${currentClient.getClientID()}"
th:checked="${currentClient.selected}"
th:field="*{clientList[__${stat.index}__].selected}">
</td>
<td th:text="${currentClient.getClientID()}"
th:field="*{clientList[__${stat.index}__].clientID}"
th:value="${currentClient.getClientID()}"
></td>
<td th:text="${currentClient.getIpAddress()}"
th:field="*{clientList[__${stat.index}__].ipAddress}"
th:value="${currentClient.getIpAddress()}"
></td>
<td th:text="${currentClient.getDescription()}"
th:field="*{clientList[__${stat.index}__].description}"
th:value="${currentClient.getDescription()}"
></td>
</tr>
I also added a default param-less constructor to my wrapper class and added a bindingResult param to POST method (not sure if needed).
public String processQuery(#ModelAttribute ClientWithSelectionListWrapper wrapper, BindingResult bindingResult, Model model)
So when an object is being posted, this is how it is looking:
Of course, the systemInfo is supposed to be null (at this stage), but the clientID is always 0, and ipAddress/Description always null. The selected boolean is correct though for all properties. I'm sure I've made a mistake on one of the properties somewhere. Back to investigation.
UPDATE 3:
Ok I've managed to fill up all the values correctly! But I had to change my td to include an <input /> which is not what I wanted... Nonetheless, the values are populating correctly, suggesting spring looks for an input tag perhaps for data mapping?
Here is an example of how I changed the clientID table data:
<td>
<input type="text" readonly="readonly"
th:name="|clientList[${stat.index}]|"
th:value="${currentClient.getClientID()}"
th:field="*{clientList[__${stat.index}__].clientID}"
/>
</td>
Now I need to figure out how to display it as plain data, ideally without any presence of an input box...
You need a wrapper object to hold the submited data, like this one:
public class ClientForm {
private ArrayList<String> clientList;
public ArrayList<String> getClientList() {
return clientList;
}
public void setClientList(ArrayList<String> clientList) {
this.clientList = clientList;
}
}
and use it as the #ModelAttribute in your processQuery method:
#RequestMapping(value="/submitQuery", method = RequestMethod.POST)
public String processQuery(#ModelAttribute ClientForm form, Model model){
System.out.println(form.getClientList());
}
Moreover, the input element needs a name and a value. If you directly build the html, then take into account that the name must be clientList[i], where i is the position of the item in the list:
<tr th:each="currentClient, stat : ${clientList}">
<td><input type="checkbox"
th:name="|clientList[${stat.index}]|"
th:value="${currentClient.getClientID()}"
th:checked="${currentClient.selected}" />
</td>
<td th:text="${currentClient.getClientID()}" ></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}" ></td>
</tr>
Note that clientList can contain null at
intermediate positions. Per example, if posted data is:
clientList[1] = 'B'
clientList[3] = 'D'
the resulting ArrayList will be: [null, B, null, D]
UPDATE 1:
In my exmple above, ClientForm is a wrapper for List<String>. But in your case ClientWithSelectionListWrapper contains ArrayList<ClientWithSelection>. Therefor clientList[1] should be clientList[1].clientID and so on with the other properties you want to sent back:
<tr th:each="currentClient, stat : ${wrapper.clientList}">
<td><input type="checkbox" th:name="|clientList[${stat.index}].clientID|"
th:value="${currentClient.getClientID()}" th:checked="${currentClient.selected}" /></td>
<td th:text="${currentClient.getClientID()}"></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}"></td>
</tr>
I've built a little demo, so you can test it:
Application.java
#SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
ClientWithSelection.java
public class ClientWithSelection {
private Boolean selected;
private String clientID;
private String ipAddress;
private String description;
public ClientWithSelection() {
}
public ClientWithSelection(Boolean selected, String clientID, String ipAddress, String description) {
super();
this.selected = selected;
this.clientID = clientID;
this.ipAddress = ipAddress;
this.description = description;
}
/* Getters and setters ... */
}
ClientWithSelectionListWrapper.java
public class ClientWithSelectionListWrapper {
private ArrayList<ClientWithSelection> clientList;
public ArrayList<ClientWithSelection> getClientList() {
return clientList;
}
public void setClientList(ArrayList<ClientWithSelection> clients) {
this.clientList = clients;
}
}
TestController.java
#Controller
class TestController {
private ArrayList<ClientWithSelection> allClientsWithSelection = new ArrayList<ClientWithSelection>();
public TestController() {
/* Dummy data */
allClientsWithSelection.add(new ClientWithSelection(false, "1", "192.168.0.10", "Client A"));
allClientsWithSelection.add(new ClientWithSelection(false, "2", "192.168.0.11", "Client B"));
allClientsWithSelection.add(new ClientWithSelection(false, "3", "192.168.0.12", "Client C"));
allClientsWithSelection.add(new ClientWithSelection(false, "4", "192.168.0.13", "Client D"));
}
#RequestMapping("/")
String index(Model model) {
ClientWithSelectionListWrapper wrapper = new ClientWithSelectionListWrapper();
wrapper.setClientList(allClientsWithSelection);
model.addAttribute("wrapper", wrapper);
return "test";
}
#RequestMapping(value = "/query/submitQuery", method = RequestMethod.POST)
public String processQuery(#ModelAttribute ClientWithSelectionListWrapper wrapper, Model model) {
System.out.println(wrapper.getClientList() != null ? wrapper.getClientList().size() : "null list");
System.out.println("--");
model.addAttribute("wrapper", wrapper);
return "test";
}
}
test.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="#" th:action="#{/query/submitQuery}" th:object="${wrapper}" method="post">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Select</th>
<th>Client ID</th>
<th>IP Addresss</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr th:each="currentClient, stat : ${wrapper.clientList}">
<td><input type="checkbox" th:name="|clientList[${stat.index}].clientID|"
th:value="${currentClient.getClientID()}" th:checked="${currentClient.selected}" /></td>
<td th:text="${currentClient.getClientID()}"></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}"></td>
</tr>
</tbody>
</table>
<button type="submit" value="submit" class="btn btn-success">Submit</button>
</form>
</body>
</html>
UPDATE 1.B:
Below is the same example using th:field and sending back all other attributes as hidden values.
<tbody>
<tr th:each="currentClient, stat : *{clientList}">
<td>
<input type="checkbox" th:field="*{clientList[__${stat.index}__].selected}" />
<input type="hidden" th:field="*{clientList[__${stat.index}__].clientID}" />
<input type="hidden" th:field="*{clientList[__${stat.index}__].ipAddress}" />
<input type="hidden" th:field="*{clientList[__${stat.index}__].description}" />
</td>
<td th:text="${currentClient.getClientID()}"></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}"></td>
</tr>
</tbody>
When you want to select objects in thymeleaf, you dont actually need to create a wrapper for the purpose of storing a boolean select field. Using dynamic fields as per the thymeleaf guide with syntax th:field="*{rows[__${rowStat.index}__].variety}" is good for when you want to access an already existing set of objects in a collection. Its not really designed for doing selections by using wrapper objects IMO as it creates unnecessary boilerplate code and is sort of a hack.
Consider this simple example, a Person can select Drinks they like. Note: Constructors, Getters and setters are omitted for clarity. Also, these objects are normally stored in a database but I am using in memory arrays to explain the concept.
public class Person {
private Long id;
private List<Drink> drinks;
}
public class Drink {
private Long id;
private String name;
}
Spring controllers
The main thing here is that we are storing the Person in the Model so we can bind it to the form within th:object.
Secondly, the selectableDrinks are the drinks a person can select on the UI.
#GetMapping("/drinks")
public String getDrinks(Model model) {
Person person = new Person(30L);
// ud normally get these from the database.
List<Drink> selectableDrinks = Arrays.asList(
new Drink(1L, "coke"),
new Drink(2L, "fanta"),
new Drink(3L, "sprite")
);
model.addAttribute("person", person);
model.addAttribute("selectableDrinks", selectableDrinks);
return "templates/drinks";
}
#PostMapping("/drinks")
public String postDrinks(#ModelAttribute("person") Person person) {
// person.drinks will contain only the selected drinks
System.out.println(person);
return "templates/drinks";
}
Template code
Pay close attention to the li loop and how selectableDrinks is used to get all possible drinks that can be selected.
The checkbox th:field really expands to person.drinks since th:object is bound to Person and *{drinks} simply is the shortcut to referring to a property on the Person object. You can think of this as just telling spring/thymeleaf that any selected Drinks are going to be put into the ArrayList at location person.drinks.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" >
<body>
<div class="ui top attached segment">
<div class="ui top attached label">Drink demo</div>
<form class="ui form" th:action="#{/drinks}" method="post" th:object="${person}">
<ul>
<li th:each="drink : ${selectableDrinks}">
<div class="ui checkbox">
<input type="checkbox" th:field="*{drinks}" th:value="${drink.id}">
<label th:text="${drink.name}"></label>
</div>
</li>
</ul>
<div class="field">
<button class="ui button" type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
Any way...the secret sauce is using th:value=${drinks.id}. This relies on spring converters. When the form is posted, spring will try recreate a Person and to do this it needs to know how to convert any selected drink.id strings into the actual Drink type. Note: If you did th:value${drinks} the value key in the checkbox html would be the toString() representation of a Drink which is not what you want, hence need to use the id!. If you are following along, all you need to do is create your own converter if one isn't already created.
Without a converter you will receive an error like
Failed to convert property value of type 'java.lang.String' to required type 'java.util.List' for property 'drinks'
You can turn on logging in application.properties to see the errors in detail.
logging.level.org.springframework.web=TRACE
This just means spring doesn't know how to convert a string id representing a drink.id into a Drink. The below is an example of a Converter that fixes this issue. Normally you would inject a repository in get access the database.
#Component
public class DrinkConverter implements Converter<String, Drink> {
#Override
public Drink convert(String id) {
System.out.println("Trying to convert id=" + id + " into a drink");
int parsedId = Integer.parseInt(id);
List<Drink> selectableDrinks = Arrays.asList(
new Drink(1L, "coke"),
new Drink(2L, "fanta"),
new Drink(3L, "sprite")
);
int index = parsedId - 1;
return selectableDrinks.get(index);
}
}
If an entity has a corresponding spring data repository, spring automatically creates the converters and will handle fetching the entity when an id is provided (string id seems to be fine too so spring does some additional conversions there by the looks). This is really cool but can be confusing to understand at first.

Spring MVC passing ArrayList back to controller

I am new to Spring. I display a list with users. Every row has a checkbox for removing the users.
Controller:
#Controller
public class AdminController {
#Autowired
private UserDao userDao;
#RequestMapping(value = "/admin", method = RequestMethod.GET)
public ModelAndView adminPage() {
ModelAndView model = new ModelAndView();
model.addObject("users", userDao.findAll());
model.setViewName("admin");
return model;
}
#RequestMapping(value = "admin/remove", method = RequestMethod.POST)
public ModelAndView removeUser(#ModelAttribute(value = "users") ArrayList<User> users) {
ModelAndView model = new ModelAndView();
//UPDATE USERS HERE
model.setViewName("redirect:/admin");
return model;
}
JSP:
<form:form action="/admin/remove" method="POST" modelAttribute="users">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email/login</th>
<th>Profession</th>
<th>Select<th>
</tr>
</thead>
<tbody>
<c:forEach var="user" items="${users}">
<tr>
<td>${user.firstName}</td>
<td>${user.lastName}</td>
<td>${user.login}</td>
<td>${user.profession}</td>
<td><input type="checkbox" value="${user.delete}"/></td>
</tr>
</c:forEach>
</tbody>
</table>
<input type="submit" value="Delete user(s)" class="btn-danger" />
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
</form:form>
The list is rendered correctly. If i press the "Delete user(s)" button. The #modelAttribute users is empty.
I also tried wrapping the list in a new class, but i get the same results.
Any ideas?
Thanks to minion, i found the answer
Wrapper:
public class UserListWrapper {
private ArrayList<User> users;
public ArrayList<User> getUsers() {
return users;
}
public void setUsers(ArrayList<User> users) {
this.users = users;
}
Controller:
#Controller
public class AdminController {
#Autowired
private UserDao userDao;
#RequestMapping(value = "/admin", method = RequestMethod.GET)
public ModelAndView adminPage() {
ModelAndView model = new ModelAndView();
UserListWrapper wrapper = new UserListWrapper();
wrapper.setUsers(new ArrayList<User>(userDao.findAll()));
model.addObject("userListWrapper",wrapper);
model.setViewName("admin");
return model;
}
#RequestMapping(value = "admin/remove", method = RequestMethod.POST)
public ModelAndView removeUser(#ModelAttribute(value = "userListWrapper") UserListWrapper userListWrapper) {
ModelAndView model = new ModelAndView();
userDao.removeFlaggedUsers(userListWrapper.getUsers());
model.setViewName("redirect:/admin");
return model;
}
}
View:
<form:form action="/admin/remove" method="POST" modelAttribute="userListWrapper">
<table class="table table-striped">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Email/login</th>
<th>Profession</th>
<th>Select<th>
</tr>
</thead>
<tbody>
<c:forEach varStatus="us" var="user" items="${userListWrapper.users}" >
<tr>
<td><form:input type="hidden" path="users[${us.index}].firstName"/>${user.firstName}</td>
<td><form:input type="hidden" path="users[${us.index}].lastName"/> ${user.lastName}</td>
<td><form:input type="hidden" path="users[${us.index}].login"/>${user.login}</td>
<td><form:input type="hidden" path="users[${us.index}].profession"/>${user.profession}</td>
<td><form:checkbox path="users[${us.index}].delete" value="${user.delete}"/></td>
<form:input type="hidden" path="users[${us.index}].id"/>
</tr>
</c:forEach>
</tbody>
</table>
<input type="submit" value="Delete user(s)" class="btn-danger" />
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
</form:form>
Thank you!
EDIT: Dont forget to also add the fields you are not displaying.
For example:
If you dont add the id, your delete will not work because the id in the returned User object will be NULL.
Your ModelAttribute is empty as there is no form data binding happening from your jsp to your model attribute. Take a look at how Spring sample for binding collections "http://developer.ucsd.edu/develop/user-interface/building-a-form/form-binding-with-collections.html". This will help you to understand.
Most of the Spring application typically uses form:input with "path" parameter to do data binding.
You should build your functionality around spring-mvc select tag. Few changes would be in order though, push a list to a POJO class e.g.
public class FormBean {
private List<String> users;
public FormBean() {
}
public List<String> getUsers() {
return users;
}
public void setUsers(List<String> users) {
this.users = users;
}
}
change your mapping to
#RequestMapping(value = "admin/remove", method = RequestMethod.POST)
public ModelAndView removeUser(#ModelAttribute(value = "formBean") FormBean formBean) {
finally, swap your c:forEach with springs select tag, so something like
<form:form action="/admin/remove" method="POST" modelAttribute="formBean">
...
<form:select path="users" items="${users}" multiple="true" />
...
</form>
This is because you are using a redirect: in your view. Have a look on Flash Attributes :
http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/servlet/mvc/support/RedirectAttributes.html
http://viralpatel.net/blogs/spring-mvc-flash-attribute-example/
You should be able to get the updated list :)

Categories

Resources