【ASP.NET MVC】一覧編集画面

Question

いつもお世話になります。
ASP.NET MVCを使って構築中のサイトで、また暗礁に乗り上げております。

商品一覧の画面で、一覧表示のままCRUD（追加・更新・削除）するインターフェースを客先から求められております。
一覧表示 → 個別画面でのCRUDはできていますが、画面遷移が面倒ということで却下されました。
ASP.NETでいう、GridViewのようなテイストです。
（各行にテキストボックス・更新ボタン・削除ボタン）

モデルはこんな感じです（簡略化してあります。実際にはご教示いただいたカスタム検証もあります）
public class Lady
{
　public int ID { get; set; }
　public string name { get; set; }
　public int areaID { get; set; }
　public int salesAmount { get; set; }
}
public List<Lady> ladies;

一覧表部分のビューはこんな感じです（細かい点は省略です）

@foreach (var lady in Model.ladies){
　@using(Html.BeginForm("UpdateLady","Admin")) {
　　@Html.Hidden("ID", lady.ID)
　　@Html.TextBox("name", lady.name)
　　@Html.DropDownList("areaID", new SelectList(model.areas, "areaID","areaName", lady.areaID))
　　@Html.TextBox("salesAmount",lady.salesAmount)
　　
　　<input type="submit" value="更新"/>
　　<input type="submit" value="削除"/>
　}
}

コントローラ

class AdminController
{
　public EditLady(){
　　var model = new EditLadyView();
　　return View("EditLady", model);
　}

　[HttpPost]
　public UpdateLady(Lady lady){
　　if (ModelState.IsValid){
　　　// 更新
　　　// lady.IDをキーにしてDBを更新
　　} else {
　　　// 再表示 
　　}
　}

　[HttpPost]
　public DeleteLady(int ID){
　　// 削除
　　// IDをキーにしてDBを削除
　}

}

質問点は以下の通りです。

■表示はOKですが、できたhtmlを見ると、各行の項目が同じid / name名になります。これで正しいですか？
■同じForm内に更新ボタンが複数あった場合、formのPOST先を変える必要がありますが、javascriptを使うのでしょうか？
■検証失敗時、全体を再表示するにはどういった方法があるでしょうか？　読み直すと入力した値が消えてしまいます。

会社にMVCの経験者がおらず、苦労しています。
なにとぞお助けください。

shockatz · Accepted Answer

こんにちは。一覧で表示し、更新は一行単位というのは、GridViewやListViewではよくやる処理です。項目数が少なく行数が限定的な場合を除き、全体一括更新は使ってはいけません！要点だけ述べます。ご謙遜されていますが、MVCの内容ををお分かりのようなので、自分で解決策を考えてください。１　こんな風にレンダリングされるフォームを作ります。２　更新メソッドで、いきなりLady型のladyで受けず、IDだけを取得します。３　取得したIDを接頭辞（prefix）として、表示に使ったビューモデルの指定ID行を、TryUpdateModelで更新します。４　ModelStateは、TryUpdateModelでも有効です。５　DB更新はただUpdateすればいいだけ６　検証失敗時のリトライは、更新できなかったビューモデルをそのまま返します。 ASP.NET MVC3関連の洋書には、こういうTable CRUDの話題が良く出ています。英語読まなあかんのですが。。苦（笑

onos · Answer

> まことにお恥ずかしい限りですが、では、どのように更新画面を組み立てれるべきだと思われますか？

仕様の話なんで、お客さん（利用者？）とつめるべきでしょう。

MVCで組みやすく、一覧形式は保持したい、ということなら

> ・一覧表表示での１行更新という仕様に問題がある。全体一括更新にすべき。

となるかな。

ちなみに、別に「泥臭い」のが悪いとはおもってません。
仕様というかお客様のこだわりで、実装は泥臭いコーディングにせざるを得ないなんてことはいくらでもあることですから。

onos · Answer

> 一つのformに「更新」と「削除」のボタンが２つ出てくるのですが、そもそも各行ごとにformをつけるのは適正なのか？　という点もわからないです。

別にformはいくつあってもかまわないと思います。

> 更新行は１行だけなのですが、検証エラー時も、再度、対象の１画面分のデータはすべて再取得しなければいけませんか？

formを各行に設定した場合、ブラウザから投げられるのは更新行のデータだけです。
サーバー側には他のデータを取得する方法はありません。

＃HTMLがステートレス、というのは理解されてますよね？

まぁ、SessionだのTmpData（は、つまりSessionと同じですが）を使ってサーバ側にデータを保持しておく方法がないわけではないですが。
それであってもある意味データを再取得している、といえなくもないわけで。

あと、こういうユーザーインターフェースだと、2行文のデータなおしたあと、1行めの更新ボタンだけ押したとき、とか、いろいろと問題は多くでてきそうな気がします。
まぁ、仕様としてどう考えるか、なのでそういったときの対処方法がきちんと合意されていればよいですが。

> ASP.NETのような「サーバサイド検証」や「バインディング」の機能がないため、泥臭い大量コーディングを強いられます

この仕様だと検証やバインディングもうまく使えない、というか使えるところが限られてくるかと。
泥臭いコーディングが必要じゃないですかね。

onos · Answer

> ■表示はOKですが、できたhtmlを見ると、各行の項目が同じid / name名になります。これで正しいですか？

OKじゃないから質問してるのでは？
それはともかく、どのようなデータを渡しているのか、またView側の受け取るデータの型がどうなっているか、とかが掲載されたプログラムだけじゃわかりません。
ちゃんと複数のデータ格納して渡せてます？

> ■同じForm内に更新ボタンが複数あった場合、formのPOST先を変える必要がありますが、javascriptを使うのでしょうか？

行ごとに存在する更新ボタンのことですよね？
だったらformのPOST先を変える必要はないように思いますが。。。

> ■検証失敗時、全体を再表示するにはどういった方法があるでしょうか？　読み直すと入力した値が消えてしまいます。

UpdateLady で受け取っているデータが一つだけなのが気になります。
ここで全データ受け取ってるならそのままもとのページに返せばいいだけのはず。
まぁ、どの部分を変更しようとしているか、という対象のとりだしに工夫が必要ですが。
データを一つしか受け取らないなら、他の行については再度取得してビュー側に渡す必要があると思います。

【ASP.NET MVC】一覧編集画面

こんにちは。

> まことにお恥ずかしい限りですが、では、どのように更新画面を組み立てれるべきだと思われますか？

> 一つのformに「更新」と「削除」のボタンが２つ出てくるのですが、そもそも各行ごとにformをつけるのは適正なのか？ という点もわからないです。

この回答への補足

> ■表示はOKですが、できたhtmlを見ると、各行の項目が同じid / name名になります。

この回答への補足

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

> 一つのformに「更新」と「削除」のボタンが２つ出てくるのですが、そもそも各行ごとにformをつけるのは適正なのか？　という点もわからないです。