Spring @RequestParam 与 Thymeleaf

1. Introduction

In our article Introduction to Using Thymeleaf in Spring, we saw how to bind user input to objects.

We used th:object and th:field in the Thymeleaf template and @ModelAttribute in the controller to bind data to a Java object. In this article, we’ll look at how to use the Spring annotation @RequestParam in combination with Thymeleaf.

2. Parameters in Forms

Let’s first create a simple controller that accepts four optional request parameters:

@Controller
public class MainController {
    @RequestMapping("/")
    public String index(
        @RequestParam(value = "participant", required = false) String participant,
        @RequestParam(value = "country", required = false) String country,
        @RequestParam(value = "action", required = false) String action,
        @RequestParam(value = "id", required = false) Integer id,
        Model model
    ) {
        model.addAttribute("id", id);
        List<Integer> userIds = asList(1,2,3,4);
        model.addAttribute("userIds", userIds);
        return "index";
    }
}

The name of our Thymeleaf template is index.html. In the following three sections, we’ll use different HTML form elements for the user to pass data to the controller.

2.1. Input Element

First, let’s create a simple form with a text input field and a button to submit the form:

<form th:action="@{/}">
<input type="text" th:name="participant"/> 
<input type="submit"/> 
</form>

The attribute th:name=”participant” binds the value of the input field to the parameter participant of the controller. *For this to work, we need to annotate the parameter with @RequestParam(value = “participant”).*

2.2. Select Element

Likewise for the HTML select element:

<form th:action="@{/}">
    <input type="text" th:name="participant"/>
    <select th:name="country">
        <option value="de">Germany</option>
        <option value="nl">Netherlands</option>
        <option value="pl">Poland</option>
        <option value="lv">Latvia</option>
    </select>
</form>

The value of the selected option is bound to the parameter country, annotated with @RequestParam(value = “country”).

2.3. Button Element

Another element where we can use th:name is the button element:

<form th:action="@{/}">
    <button type="submit" th:name="action" th:value="in">check-in</button>
    <button type="submit" th:name="action" th:value="out">check-out</button>
</form>

Depending on whether the first or second button is pressed to submit the form, the value of the parameter action will be either check-in or check-out.

3. Parameters in Hyperlinks

Another way to pass request parameters to a controller is via a hyperlink:

<a th:href="@{/index}">

And we can add parameters in parentheses:

<a th:href="@{/index(param1='value1',param2='value2')}">

Thymeleaf evaluates the above to:

<a href="/index?param1=value1&param2=value2">

Using Thymeleaf expressions to generate hyperlinks is particularly useful if we want to assign parameter values based on variables. For example, let’s generate a hyperlink for each user ID:

<th:block th:each="userId: ${userIds}">
    <a th:href="@{/(id=${userId})}"> User [[${userId}]]</a> <br/>
</th:block>

We can pass a list of user IDs as a property to the template:

List<Integer> userIds = asList(1,2,3);
model.addAttribute("userIds", userIds);

And the resulting HTML will be:

<a th:href="/?id=1"> User 1</a> <br/>
<a th:href="/?id=2"> User 2</a> <br/>
<a th:href="/?id=3"> User 3</a> <br/>

The parameter id in the hyperlink is bound to the parameter id, annotated with @RequestParam(value = “id”).

4. Summary

In this short article, we saw how to use Spring request parameters in combination with Thymeleaf.

First, we created a simple controller that accepts request parameters. Second, we looked at how to use Thymeleaf to generate an HTML page that can call our controller.

The full source code for all examples in this article can be found on GitHub.