ThymeleafでPOSTされた値を画面に出力したい

こんにちは、SpringBoot、ThymeleafをつかってHTMLでつくられた固定値の入ったテーブルを表示し、
空白のカラムなどを追加してデータの変更を受付けsubmitすることによって、
変更された値をコントローラーに送り、変更を受付ない画面を改めて表示したいです。

現在変更を受け付ける画面は作成できたのですが、
POSTを受け付けるコントローラの作り方がさっぱりわからないです。

Thymeleafにてｔｈ：objectで設定した値とDTOのクラス名が結びついているから
引数でｔｈ：objectに設定した値をうければいいのでしょうか？？

質問がかなりふわっとしていて申し訳ありません。

以下にコードを記載します

java
1@Controller
2public class HelloController {
3	@RequestMapping(value = "/", method = RequestMethod.GET)
4	public ModelAndView index(ModelAndView mav) {
5		mav.setViewName("index");
6		List<Person> personList = new ArrayList<Person>();
7
8		Person personA = new Person();
9		personA.setName("A");
10		personA.setAge(33);
11		personA.setHobby("プログラミング");
12		personList.add(personA);
13
14		Person personB = new Person();
15		personB.setName("B");
16		personB.setAge(32);
17		personB.setHobby("書道");
18		personList.add(personB);
19
20		Person personC = new Person();
21		personC.setName("C");
22		personC.setAge(20);
23		personC.setHobby("トマト栽培");
24		personList.add(personC);
25
26		mav.addObject("personList", personList);
27		return mav;
28	}
29
30}

java
1   public class Person {
2
3    	    private String name;
4	    private int age;
5	    private String hobby;
6
7	    public String getName() {
8			return name;
9		}
10		public void setName(String name) {
11			this.name = name;
12		}
13		public int getAge() {
14			return age;
15		}
16		public void setAge(int age) {
17			this.age = age;
18		}
19		public String getHobby() {
20			return hobby;
21		}
22		public void setHobby(String hobby) {
23			this.hobby = hobby;
24		}
25
26
27
28}
29    
30

HTML
1<!DOCTYPE HTML>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4<title>Top page</title>
5<meta http-equiv="Content-Type"
6    content="text/html;charset=UTF-8"/>
7<style>
8body { font-size:13pt; color:gray; margin:5px 25px; }
9pre { font-size:13pt; color:gray; padding:5px 10px; border:1px; solid gray; }
10</style>
11</head>
12<body>
13    <form th:action="@{/confirm}" th:object="${Person}" method="post">
14	<table id="personList">
15		<tr>
16			<th>NAME</th>
17			<th>AGE</th>
18			<th>HOBBY</th>
19		</tr>
20		<tr th:each="person:${personList}">
21			<td th:text="${person.name}" th:field="*{name}"></td>
22			<td th:text="${person.age}" th:field="*{age}"></td>
23			<td><input type="text" class="form-control" th:value="${person.hobby}" th:field="*{hobby}" /></td>
24		</tr>
25	</table>
26	<button type="button" id="addrow" onclick="addList();">+</button>
27    <button type="submit" id="confirm" >confirm</button>
28    </form>
29</body>
30<script language="javascript">
31function addList(){
32	  var t=document.querySelector("#personList");
33	  var row1 = t.insertRow(-1);	// 行を追加
34	  var cell1 = row1.insertCell(0);	// 一つ目のセルを追加
35	  var cell2 = row1.insertCell(1);	// 二つ目のセルを追加
36	  var cell3 = row1.insertCell(2);	// 三つ目のセルを追加
37	  var input = '<input type="text" class="form-control" th:field="*{hobby}"/>'
38	  cell1.innerHTML = input;
39	  cell2.innerHTML = input;
40	  cell3.innerHTML = input;
41	}

java
1@Controller
2public class ConfirmController {
3	@RequestMapping(value = "/confirm", method = RequestMethod.POST)
4	    public String confirm (Person person, Model model){
5		model.addAttribute("Person", person);
6		return "result";

行動規範の内容に同意します

回答1件

ベストアンサー

フォームの入出力をリストで扱いたいということですよね？
ソースを見ると単一のPersonを送る話とごっちゃになっているように見えます。
ひとまず3人分の変更受付だけ。

java
1
2import java.util.ArrayList;
3import java.util.List;
4
5/**
6 * 新規に追加
7 * フォームで送るデータ情報を定義します。
8 * 一回のPOSTでPersonFormをひとつ送るとイメージしてください。
9 */
10public class PersonForm {
11	public PersonForm() {
12		this.personList = new ArrayList<Person>();
13	}
14	private List<Person> personList;
15	public List<Person> getPersonList() {
16		return personList;
17	}
18	public void setPersonList(List<Person> personList) {
19		this.personList = personList;
20	}
21
22	
23}

java
1
2import java.util.ArrayList;
3import java.util.List;
4
5import org.springframework.stereotype.Controller;
6import org.springframework.web.bind.annotation.ModelAttribute;
7import org.springframework.web.bind.annotation.RequestMapping;
8import org.springframework.web.bind.annotation.RequestMethod;
9import org.springframework.web.servlet.ModelAndView;
10
11import com.hakidame.common.dto.Person;
12import com.hakidame.common.dto.PersonForm;
13
14@Controller
15public class MainController {
16	
17	@RequestMapping(value = "/", method = RequestMethod.GET)
18    public ModelAndView index(Person personFormData) {
19		//public ModelAndView index(ModelAndView mav) {
20		ModelAndView mav = new ModelAndView();
21		mav.setViewName("index");
22        List<Person> personList = new ArrayList<Person>();
23
24        Person personA = new Person();
25        personA.setName("A");
26        personA.setAge(33);
27        personA.setHobby("プログラミング");
28        personList.add(personA);
29
30        Person personB = new Person();
31        personB.setName("B");
32        personB.setAge(32);
33        personB.setHobby("書道");
34        personList.add(personB);
35
36        Person personC = new Person();
37        personC.setName("C");
38        personC.setAge(20);
39        personC.setHobby("トマト栽培");
40        personList.add(personC);
41        
42        //フォーム上で扱うデータはpersonのリストではなくひとつのPersonFormと考えます。
43        PersonForm personFrom = new PersonForm();
44        personFrom.setPersonList(personList);
45        mav.addObject("personFormData", personFrom);
46        
47        return mav;
48    }
49	
50	
51    @RequestMapping(value = "/confirm", method = RequestMethod.POST)
52        public String confirm (@ModelAttribute PersonForm personFormData){
53        //なんかいろいろ
54        return "result";
55    }
56	
57}

html
1<!DOCTYPE HTML>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4<title>Top page</title>
5<meta http-equiv="Content-Type"
6    content="text/html;charset=UTF-8"/>
7<style>
8body { font-size:13pt; color:gray; margin:5px 25px; }
9pre { font-size:13pt; color:gray; padding:5px 10px; border:1px; solid gray; }
10</style>
11</head>
12<body>
13    <!-- <form th:action="@{/confirm}" th:object="${Person}" method="post"> -->
14    <form th:action="@{/confirm}" th:object="${personFormData}" method="post">
15    <table id="personList">
16        <tr>
17            <th>NAME</th>
18            <th>AGE</th>
19            <th>HOBBY</th>
20        </tr>
21        <tr th:each="tmpPerson, stat : *{personList}">
22        <!-- <tr th:each="person:${personList}"> --><!-- indexがほしいのでループ方法変更 -->
23            <!-- <td th:text="${person.name}" th:field="*{name}"></td> --><!-- th:fieldはinputタグ用です-->
24            <!-- <td th:text="${person.age}" th:field="*{age}"></td> -->
25            <td><input type="text" th:value="${tmpPerson.name}" th:field="*{personList[__${stat.index}__].name}" /></td><!-- とりあえずinputtextで -->
26            <td><input type="text" th:value="${tmpPerson.age}" th:field="*{personList[__${stat.index}__].age}" /></td>
27            <!-- __${stat.index}__ ←プリプロセッシングと呼びます http://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482 -->
28            <td><input type="text" class="form-control" th:value="${tmpPerson.hobby}" th:field="*{personList[__${stat.index}__].hobby}" /></td>
29        </tr>
30    </table>
31    <button type="button" id="addrow" onclick="addList();">+</button>
32    <button type="submit" id="confirm" >confirm</button>
33    </form>
34</body>
35
36    </html>

コメントにも書いてありますが、Personのリストをやり取りしているのではなくPersonFormという1つのデータをやり取りしているのがポイントです。

動的に4人目を追加したい場合は上記コードを動かしたときに表示されるhtmlを参考に作って見ていただければと思います。
注意点ですが、th:～で値が入ったりする処理はあくまでサーバー側の処理です。
（ブラウザに表示されたページのhtmlを見るとth:～といった記載はなくなっているはずです）
そのためクライアント側のスクリプトでいくら～.innerHTML('<input type="text" class="form-control" th:field="*{hobby}"/>')などとやっても意味はありません。

また、th:objectに紐づいているのはクラス名ではなく変数名です。
変数名を変えて紐づいていることを確認して見てください。

投稿2017/08/10 08:00