ThymeleafでのControllerからの値受渡し関連の使い方まとめ

###ThymeleafでControllerに/から値受渡しする書き方

ThymeleafはSpring BootでWebアプリを作成するときに便利ですが、formでこの値受渡しをする際のやり方を見つけるのに、色んなサイトをググりまくらないとわからなかったので、自分が解決した方法をまとめました。

##Listの値をthymeleafで表示する

すごく簡単なのですが、for(String s: list)の要領でth:each="s : ${attributeから渡したリスト名}"を指定して、あとはその下のHTML要素ではsまたはs.nameのようにして呼び出せます。

user.html

<tr th:each="users : ${usersList}">
        <td><a th:href="|/admin/edituser/${users.userId}|"><span th:text="${users.userId}"></span></a></td>
        <td><span th:text="${users.userName}"></span></td>
        <td><span th:text="${users.password}"></span></td>
        <td><span th:text="${users.passUpdateDate}"></span></td>
        <td><span th:text="${users.loginMissTimes}"></span></td>
        <td><span th:text="${users.unlock}"></span></td>
        <td><span th:text="${users.enabled}"></span></td>
        <td><span th:text="${users.userDueDate}"></span></td>
        <td><span th:text="${users.roleId}"></span></td>
</tr>

##基本的なform

###form actionにデータの値を渡したい際：
th:action=|/${変数名}|でアクション先を指定可能です。(ちなみにth:action="@{/${変数名}}")でもできるのですが、このやり方だとデータの値部分が文字化けっぽくなってしまって(不明)、URIの値がデータ値になりません。)

edituser.html

<form th:action="|/admin/edituser/${userInfo.userId}|" th:method="post" th:object="${userEditRequest}" class="container-sm">
</form>

以上、

###inputボックス内のデフォルト値にデータを渡したい場合

例えばユーザ情報編集画面でデフォルト値に編集前の値を表示したいときは、以下のようにすればできます。
th:value=${変数名}

ちなみに自分がハマったポイントとしては、デフォルトでもとの値を表示しつつ、ここの値をそのままControllerに渡したいときです。

大体の場合はinputボックスにデフォルト値を表示したいときは
<input type="text" th:value="${}" th:name="*{}" />でやる方法が出てくるのですが、th:valueとth:nameを両方同じinputの中に入れてしまうと、表示したときにデフォルト値がなぜか出てきません。。

なので、両方指定したいときはth:nameの方はname=""で指定しましょう。

edituser.html

<input type="text" th:value="${userInfo.userName}" name="userName"></input><

###固定値を表示しつつ、固定値の値をcontrollerで受け取りたいとき

例えばユーザーIDは固定なので編集不可だが、Controller側でこの値をformから受け取りたいときは、hiddenでformからは非表示にしつつ、これで値を受け取ることができます。これは別にthymeleafに限った小技でもないですが...

edituser.html

<td>
      	<span th:text="${userInfo.userId}"></span>
      	<input type="hidden" th:value="${userInfo.userId}" name="userId"></input>
</td>

###プルダウンで値を指定したいとき

自分の場合はroleでadminとgeneralという権限を作成し、そのどちらかをユーザー編集画面ではプルダウンから編集できるようにしつつ、デフォルト選択はもとのデータとしたかったのですが、以下のやり方でできました。ちなみに<option>の間の値は[[${変数名}]]としないと表示されないので注意。

useredit.html

<select id="roleIds" name="roleIds">
   <option th:each="roleId : ${roleIds}" th:value="${roleId}" th:selected="${roleId == userInfo.roleId}">[[${roleId}]]</option>
</select>