1. Introduction
In this short tutorial, we’re going to learn how to use Thymeleaf to create URLs using Spring path variables.
We use path variables when we want to pass a value as part of the URL. In a Spring controller, we access these values using the @PathVariable annotation.
2. Using Path Variables
First, let’s set up our example by creating a simple Item class:
public class Item {
private int id;
private String name;
// Constructor and standard getters and setters
}
Now, let’s take create our controller:
@Controller
public class PathVariablesController {
@GetMapping("/pathvars")
public String start(Model model) {
List<Item> items = new ArrayList<Item>();
items.add(new Item(1, "First Item"));
items.add(new Item(2, "Second Item"));
model.addAttribute("items", items);
return "pathvariables/index";
}
@GetMapping("/pathvars/single/{id}")
public String singlePathVariable(@PathVariable("id") int id, Model model) {
if (id == 1) {
model.addAttribute("item", new Item(1, "First Item"));
} else {
model.addAttribute("item", new Item(2, "Second Item"));
}
return "pathvariables/view";
}
}
In our index.html template, let’s loop through our items and create links calling the singlePathVariable method:
<div th:each="item : ${items}">
<a th:href="@{/pathvars/single/{id}(id = ${item.id})}">
<span th:text="${item.name}"></span>
</a>
</div>
The code we just created makes URLs like this:
http://localhost:8080/pathvars/single/1
This is standard Thymeleaf syntax for using expressions in URLs.
We can also use concatenation to achieve the same result:
<div th:each="item : ${items}">
<a th:href="@{'/pathvars/single/' + ${item.id}}">
<span th:text="${item.name}"></span>
</a>
</div>
3. Using Multiple Path Variables
Now that we’ve covered the basics of creating a path variable URL in Thymeleaf, let’s quickly cover using multiple.
First, we’ll create a Detail class and modify our Item class to have a list of them:
public class Detail {
private int id;
private String description;
// constructor and standard getters and setters
}
Next, let’s add a list of Detail to Item:
private List<Detail> details;
Now, let’s update our controller to add a method using multiple @PathVariable annotations:
@GetMapping("/pathvars/item/{itemId}/detail/{dtlId}")
public String multiplePathVariable(@PathVariable("itemId") int itemId,
@PathVariable("dtlId") int dtlId, Model model) {
for (Item item : items) {
if (item.getId() == itemId) {
model.addAttribute("item", item);
for (Detail detail : item.getDetails()) {
if (detail.getId() == dtlId) {
model.addAttribute("detail", detail);
}
}
}
}
return "pathvariables/view";
}
Finally, let’s modify our index.html template to create URLs for each detail record:
<ul>
<li th:each="detail : ${item.details}">
<a th:href="@{/pathvars/item/{itemId}/detail/{dtlId}(itemId = ${item.id}, dtlId = ${dtl.id})}">
<span th:text="${detail.description}"></span>
</a>
</li>
</ul>
4. Conclusion
In this quick tutorial, we learned how to use Thymeleaf to create URLs with path variables. We started by creating a simple URL with only one. Later, we expanded on our example to use multiple path variables.
The example code is available over on GitHub.
