Q&A
送信部のHTMLがあると回答が得られるかも知れません
Thymeleafで入力されたフォームの値をコントローラーで受取、別のｈｔｍｌで表示したいのですが、フォームで受け取った値が表示出来ません。
画面の表示自体は出来ているのですが、フォームの内容だけが表示されず固定のHTMLのみ表示されています。
コントローラの部分がだめなのかthymeleafが問題なのか、、、ご教授いただければ幸いです。
テーブルタグでname, age, hobbyの項がありhobby以外は固定で、hobbyの部分はテキストボックスで可変値です。
可変の部分だけ変更し、submitした時に/confirmにpostして今回の処理を走らせています。
java
1@Controller 2public class HelloController { 3 @RequestMapping(value = "/", method = RequestMethod.GET) 4 public ModelAndView index(Person personFormData) { 5 ModelAndView mav = new ModelAndView(); 6 mav.setViewName("index"); 7 List<Person> personList = new ArrayList<Person>(); 8 9 Person personA = new Person(); 10 personA.setName("A"); 11 personA.setAge(33); 12 personA.setHobby("プログラミング"); 13 personList.add(personA); 14 15 Person personB = new Person(); 16 personB.setName("B"); 17 personB.setAge(32); 18 personB.setHobby("書道"); 19 personList.add(personB); 20 21 Person personC = new Person(); 22 personC.setName("C"); 23 personC.setAge(20); 24 personC.setHobby("トマト栽培"); 25 personList.add(personC); 26 27 mav.addObject("personList", personList); 28 29 //フォーム上で扱うデータはpersonのリストではなくひとつのPersonFormと考える。 30 PersonForm personFrom = new PersonForm(); 31 personFrom.setPersonList(personList); 32 mav.addObject("personFormData", personFrom); 33 34 return mav; 35 } 36＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 37 38@RequestMapping(value = "/confirm", method = RequestMethod.POST) 39 public String confirm(@ModelAttribute PersonForm personFormData, Model model){ 40 model.addAttribute(personFormData); 41 return "confirm"; 42 43//formの内容 44 45public class PersonForm { 46 public PersonForm() { 47 this.personList = new ArrayList<Person>(); 48 } 49 private List<Person>personList; 50 public List<Person>getPersonList(){ 51 return personList; 52 } 53 public void setPersonList(List<Person>personList) { 54 this.personList = personList; 55 } 56} 57
HTML
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta http-equiv="Content-Type" 5 content="text/html;charset=UTF-8"/> 6<title>Confirm</title> 7</head> 8<body> 9 <table id="personList"> 10 <tr> 11 <th>NAME</th> 12 <th>AGE</th> 13 <th>HOBBY</th> 14 </tr> 15 <tr th:each="personFormData, stat : *{personList}"> 16 <td th:text="${personFormData.name}"></td> 17 <td th:text="${personFormData.age}"></td> 18 <td th:text="${personFormData.hobby}"></td> 19 </tr> 20 </table> 21</body> 22</html>
送信部のHTML
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="${personFormData}" 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="tmpPerson, stat : *{personList}"> 21 <td th:text="${tmpPerson.name}"></td> 22 <td th:text="${tmpPerson.age}"></td> 23 <!-- __${stat.index}__ ←プリプロセッシング --> 24 <td><input type="text" class="form-control" th:value="${tmpPerson.hobby}" th:field="*{personList[__${stat.index}__].hobby}" /></td> 25 </tr> 26 </table> 27 <button type="button" id="addrow" onclick="addList();">+</button> 28 <button type="submit" id="confirm" >confirm</button> 29 </form> 30</body> 31<!-- <script> 32function addList(){ 33 var t=document.querySelector("#personList"); 34 var row1 = t.insertRow(-1); // 行を追加 35 var cell1 = row1.insertCell(0); // 一つ目のセルを追加 36 var cell2 = row1.insertCell(1); // 二つ目のセルを追加 37 var cell3 = row1.insertCell(2); // 三つ目のセルを追加 38 var input = '<input type="text" class="form-control/}' 39 cell1.innerHTML = input; 40 cell2.innerHTML = input; 41 cell3.innerHTML = input; 42 } 43</script> --> 44</html>
修正いたしました、フォームでやり取りするというのは理解して、参考にしたサイトでは受け取ったフォームをaddatributeしていたのですが、それだけは今回はだめなようで。。。
試行錯誤しているのですが、なかなかうまく行きません。。。
回答1件
0
自己解決
@RequestMapping(value = "/confirm", method = RequestMethod.POST)
public ModelAndView confirm(@ModelAttribute PersonForm personFormData){
ModelAndView mav = new ModelAndView(); mav.setViewName("confirm"); mav.addObject("personList", personFormData.getPersonList()); return mav;
フォームデータからリストをgetする必要がありました
投稿2017/08/16 04:12
総合スコア20
あなたの回答
tips
プレビュー
