I have this controller file code. This accepts data from the frontend in the form of @RequestParams. Once I have received the values, I am trying to call another html file called cart .html by adding an attribute using the addAttribute function in models.
@GetMapping("/cart")
@ResponseBody
public String getIfBorrowedBook(Model model, @RequestParam List<Integer> bookIds) {
System.out.println(bookIds);
// if(ifBorrowed.equals("on")) {
// Books book = booksService.findById(bookId);
// book.setIfBorrowed(true);
// booksService.save(book);
List<Books> booksInCart = new ArrayList<>();
for(Integer id:bookIds) {
booksInCart.add(booksService.findById(id));
}
System.out.println(booksInCart);
model.addAttribute("booksInCart", booksInCart);
return "cart";
}
This is my cart.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>List Books</title>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<h1>
Cart
</h1>
<div>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Genre</th>
<th>Author</th>
<th>Edition</th>
</tr>
</thead>
<tbody>
<tr th:each="book: ${booksInCart}">
<td th:text="${book.title}">Title</td>
<td th:text="${book.genre}">Genre</td>
<td th:text="${book.author}">Author</td>
<td th:text="${book.edition}">Edition</td>
<td>
</td>
</tr>
</tbody>
<div>
</div>
</table>
</div>
</div>
</body>
</html>
This is the show_filtered books file that has a form which is submitted to the controller get request once a buttom is clicked.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>List Books</title>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<div>
<h1>
<div th:text="'Books on '+${filteredBooks[0].genre}"></div>
</h1>
</div>
<div>
<form th:action="@{/cart}">
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Genre</th>
<th>Author</th>
<th>Edition</th>
<th>Borrow Book</th>
</tr>
</thead>
<tbody>
<tr th:each="book: ${filteredBooks}">
<td th:text="${book.title}">Title</td>
<td th:text="${book.genre}">Genre</td>
<td th:text="${book.author}">Author</td>
<td th:text="${book.edition}">Edition</td>
<td>
<input type="checkbox" name="bookIds" th:value="${book.bookId}" th:checked="${book.ifBorrowed}"/>
</td>
</tr>
</tbody>
<div>
<a href="cart">
<button type="submit" class="btn btn-primary">Add to Cart</button>
</a>
</div>
</table>
</form>
</div>
</div>
</body>
</html>
But when I try to return the cart string at the end of getIfBorrowed() method, I am not getting the cart.html file. I am just getting a string that says cart on the webpage. This cart.html file is location in src/main/resources/templates. Therefore spring mvc should automatically be able to recognize the file but it does not do so.