Springにおいて画面のリスト状になっている情報をコントローラーで取得したい

Question

前提

現状設計段階のため、まだ実際にコードを書いているわけではなく、
手法としてできないかを質問させていただいております。
リスト型の情報をDBに登録する手段としてMyBatisの「BulkInsert」というものが使用できるとのことで、DB登録については解決しました。
（問題なく処理が行われるかは開発時に調べます。）

実現したいこと

画面上で<table>タグで囲われたリスト状になっている情報をDBに登録をしたいです。
コントローラーで取得したいです。

上記のように動的に行を加減できるリスト型をコントローラーでリスト型で受け取り、
そのリストの行数分DBに登録をしていく形で実装を行いたいです。
リストの加減は表左側の「追加」「削除」をクリックすることで入力行を加減します。
DBからのリストで変動するのではなく、あくまでクライアント側での操作によりリストが加減する形です。

自分なりに調べてみたところ、以下のページに記載してあるものが近い実装かと思っておりますが、
SpringMVC 複数のフォームオブジェクトにバインドする方法
動的にリストが変動するとなった際にどのようにやればよいのかを悩んでしまいました。

＜追記開始＞
A-pZ様のご回答を参考に作ってみたのですが、データが取得できませんでした。

<table class="table table-striped table-bordered table-hover list ">
	<thead>
		<tr>
			<th>Action</th>
			<th>会員種別</th>
			<th>料金名</th>
			<th>金額</th>
			<th>無料アカウント数</th>
		</tr>
	</thead>
	<tbody id="test_table1" th:each="row, stat : ${itemList}">
		<tr>
			<td><input type="button" value="追加" onclick="insertRow('test_table1')" /></td>
			<td><input type="text" name="membarType" th:name="'membarType[' + ${stat.index} + ']'" th:value="${row.membarType}" ></td>
			<td><input type="text" name="ratesCode" th:name="'ratesCode[' + ${stat.index} + ']'" th:value="${row.ratesCode}" ></td>
			<td><input type="text" name="amount" th:name="'amount[' + ${stat.index} + ']'" th:value="${row.amount}" ></td>
			<td><input type="text" name="freeAccounts" th:name="'freeAccounts[' + ${stat.index} + ']'" th:value="${row.freeAccounts}" ></td>
		</tr>
	</tbody>
</table>

@RequestMapping(params="selectInput", method=RequestMethod.POST)
public String postSearch2(
		@ModelAttribute inputmodel formList,
		Model model){

　　　　　　～～　略　～～

}

@Data
public static class inputmodel {
	List<String> membarType;
	List<String> ratesCode;
	List<String> amount;
	List<String> freeAccounts;
}

＜追記終了＞

＜削除開始＞
DB側のテーブル構成は上記のリストと全く同じ形式で作成しているため、リストのレコードをそのままDBに登録できれば問題ないです。
＜追記開始＞
DB定義は以下の通りです。
＜追記終了＞
＜削除終了＞

お手数ですが、よろしくお願いします。

Comments

[m.ts10806]

「動的にリストが変動する」　どのように動的にリストができるのか具体的に記載してください。あとできればDB定義も。

[退会済みユーザー]

参考サイトの情報でできたのをベースに考えてJavaScript で追加するなり POST して列削除するなりまずは手を動かそう

[S.niranira]

私の環境で少し作成してみましたが、うまく取得ができませんでした。質問内容を編集しましたので、お手数ですが再度ご覧いただければと思います。

Answer 1

入力項目を繰り返し表示し、かつ行番号(id)も出力するのが一番簡単でしょうか。

一覧(tableなど)の繰り返しについては、例えばThymeleafであれば

	<tbody>
		<tr th:each="row, stat : ${itemList}">
			<td><input type="text" name="id" th:name="'id[' + ${stat.index} + ']'" th:value="${row.id}" ></td>
			<td><input type="text" name="name" th:name="'name[' + ${stat.index} + ']'" th:value="${row.name}"></td>
		</tr>
	</tbody>

のようにすることで、実際には id[0] name[0] , id[1] name[1] .... と変数名に番号つきで出力されます。

これを受け取るControllerは、この配列つきのパラメータを受け取るよう

	@PostMapping("")
	public ModelAndView select(@ModelAttribute InputModel formList) {

	}

	@Data
	public static class InputModel {
		List<String> id;
		List<String> name;
	}

のように、対応するパラメータ名に対するListを用意することで、全て順番に受け取れます。

※ @DataはLombokのアノテーションです。

Comments

[S.niranira]

ありがとうございます。少しやってみたのですが、うまくいかなかったので、質問を編集させていただきました。お手数ですが、再度ご覧いただければと思います。

[A-pZ]

th:name="'id[' + ${stat.index} + ']'" th:value="${row.id}" で出力されるHTMLの内容は理解されているでしょうか。

th:name は nameの値となり、リクエストパラメータ名です。同様に th:valueはそのパラメータの値となりますので、id という名前ではありません。送信したい変数名にしなければ送信されません。

[S.niranira]

すみません。そこについては完全に見落としておりました。。。
修正をして再実行をしてみましたが、やはりコントローラー側でデータの取得ができておりませんでした。

[A-pZ]

送信されていないとのことですが、出力されているHTMLの繰り返し部分で、name属性が、例えばmembarType[0] のようになっているか。(memberTypeのtypoでしょうか)
ブラウザで送信されている値の名前と中身は期待どおりであるか。（F12などの開発者モードで確認ができます）

public String postSearch2 メソッドが、 @ModelAttribute inputmodel formList, Model model) と、複数種類のオブジェクトで受け取っているように見えますが、これらの値の中身は確かめたでしょうか。

ちなみに、SpringのController部分にて、不正な値、格納できない値が送信された場合にはログに出力されます。

Answer 2

Ajaxによる１件ずつの更新となったため、当質問の方法が不要になりました。
(個人的に実装できるようしたいとは思います。)

Comments

[退会済みユーザー]

こちらの解答ですが
解決されましたでしょうか？
同じ問題で悩んでおります

[S.niranira]

リストのデータを一括で登録するのではなく、（ユーザビリティは低いですが）1行ずつ登録、更新、削除を行うように仕様が変更されました。
そのため、
・1行登録・更新・削除のイベントをJavaScriptで受け取り、その行の入力値を取得
・取得した入力値をAjaxにてRestControllerへリクエストする
・リクエストを受け取りレコードの登録・更新・削除を行う
・登録・更新・削除が完了後、再度リスト部の情報を取得し画面へ返却
という流れ（大まかではありますが）での処理となりました。
ご期待に沿えるかわかりませんが、ご参考になればと思います。