Thymeleafでnameを配列で保持した実装

Java Thymeleaf

Thymeleafでnameを配列で保持した実装

Thymeleafでnameを配列で保持するための実装例を以下に示します。
ここでは、フォームでnameフィールドを配列として扱い、サーバーサイドでリストとして受け取る方法を説明します。

1. フォームクラスの作成

まず、NameFormというフォームクラスを作成します。
このクラスには、namesというリストを持たせます。

import java.util.List;

public class NameForm {

  private List<String> names;

  // ゲッターとセッター
  public List<String> getNames() {
    return names;
  }

  public void setNames(List<String> names) {
    this.names = names;
  }
}

2. コントローラの変更

NameFormクラスを使用してデータを受け取るようにします。

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/example")
public class ExampleController {

  @PostMapping("/submit")
  public ModelAndView submitForm(@ModelAttribute NameForm nameForm) {
    // NameFormから名前リストを取得
    List<String> names = nameForm.getNames();
    for (String name : names) {
      System.out.println(name);
    }

    // ビューの名前を返す（適宜変更）
    return new ModelAndView("result").addObject("names", names);
  }
}

3. HTMLテンプレートの更新

th:object属性を使用して、NameFormクラスのプロパティにバインドします。

<form action="/example/submit" method="post" th:object="${nameForm}">
  <div>
    <label for="name1">名前 1:</label>
    <input type="text" id="name1" name="names[0]" />
  </div>
  <div>
    <label for="name2">名前 2:</label>
    <input type="text" id="name2" name="names[1]" />
  </div>
  <div>
    <label for="name3">名前 3:</label>
    <input type="text" id="name3" name="names[2]" />
  </div>
  <button type="submit">送信</button>
</form>

4. ビュー（result.html）

result.htmlでは、コントローラから渡されたデータを表示します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>結果</title>
</head>
<body>
  <h1>送信された名前</h1>
  <ul>
    <li th:each="name : ${names}" th:text="${name}"></li>
  </ul>
</body>
</html>

この方法で、NameFormクラスを使ってフォームのデータを受け取ることができ、データをサーバーサイドで処理する際に便利です。
フォームの各フィールドにはnames[]という形式で名前を付け、リストとして送信されるようにします。