この広告は、90日以上更新していないブログに表示しています。Ajax今回は、Ajax.BeginFormを使ったPartialViewでのレコード編集にチャレンジしたときのメモ書きです。初心者が行き当たりばったりにいろいろ動かしてみたときのメモなので、記載内容には勝手な解釈や誤りもあるかと思います。お気づきの点がありましたら、ご指摘よろしくお願いします。や@Ajax.BeginFormでの呼び出しについて少しメモしまた。今回は、PartialViewでのレコード編集についてのメモです。実は、まだ試作中の状態で課題の全てが解決している訳ではないのですが、今の状態をメモしておかないと忘れてしまいそうなのでメモを残します。参考にさせてもらった情報はこれ。アプリケーション開発』http://msdn.microsoft.com/ja-jp/data/ff723829.aspxのサンプルのZIPファイル内のサンプルデータベースです。出来上がりのイメージはこんなかんじです。ナビから「テスト」をクリックすると上記のページが表示されます。商品マスタの編集用PartialViewが現れます。商品名などを入力して「登録」ボタンをクリックすると、データベースに内容が更新されます。入力必須項目の「商品名」が空の状態で「登録」ボタンをクリックすると、データアノテーション機能の働きでエラーメッセージが表示されます。それでは、ソースを貼り付けしておきます。edmxについては今回は割愛します。Modelにフォーム上で使用しない項目を置かないように。//フォーム上に表示されていなくても検証は行われます。]の2つのクラスを用意しました。@*↓Ajax.BeginFormに続く{}内にある項目がコントローラに正しく受け渡される。padding:4px;display:none"></div>まず、@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/jqueryval")AjaxFormを使う為この2行が必要ですが、適当に扱わないと痛い目にあいます。私の場合、この商品コード指定ページに記述済みにも関わらず、商品編集ページにも聞き込んでしまってました。商品編集ページでは特にエラーメッセージが出るわけでもなくしばらく気が付かなかったのですが、「登録」ボタンをクリックすると2回登録処理が実行されてました。部分には、「編集Form」ボタンクリック時と「編集Link」クリック時にPartialView部分を見えるようにしています(更新後に隠しているので)。「編集Link」クリック時にはリンク先を商品コードをパラメータにもつように変更しています。このページでは、PartialViewを2つの方法で表示可能になっています。Ajax.BeginForm「編集Link」クリック:@Ajax.ActionLink今回は、商品コード指定がリストボックスとなっています。省略されることがないので検証不要ですが、入力して内容の検証も行うのであれば、Ajax.BeginFormを使う方がいいと思います。更新の2重実行の防止の為です。実はこのタイミングでsubmitボタンをdisabledしてしまうと、コントローラーの引数(Button)にはnullが渡されてしまいます。OnSuccessで指定しているファンクションです。Ajaxリクエストが成功したときに呼び出されるファンクションです。Headerから取り出し、更新成功か否かを判定しています。]ボタンがクリックされたときのAjax呼び出し指定で、Shouhinコントローラーの"Update"アクションが呼び出され制御はそちらに移ります。Updateアクションでサーバー側の処理が終わる際PartialViewを戻され、"pvShouhin"に再度表示されるはずです。言葉尻が弱いのは、ここうまくいってないからです。ボタンクリック時点の内容になります。「更新完了です」とかのメッセージをmodelにセットして表示しようとしていたのですが、今の私の力ではできませんでした。アノテーションとの絡みかもしれませんが不明です。submitボタンは2つ設置しています。2つともname="Button"にし、valueの値を違えておきます。Button)と記述すると、引数Buttonにvalueで設定した値が引き渡されます。コントローラー側で使用したい項目は、Ajax.BeginForm()に続く{...}の中に含めます。{...}の外に置いた場合エラーになるかというと、エラーにはなりませんが値が引き渡されないようです。//↑:引数にはPartialViewのmodelを指定しないとデータアノテーションが効かなくなる。(ModelState.IsValid)を必ず記述すること。書いとかないとエラーのまま更新してしまう。"更新処理は実行されませんでした。ActionMethodSelectorAttributeというクラスがありますが、これは[AjaxOnly]属性の部分です。今回はコントローラーの中に記述していますが、本来は汎用的なクラスなのでコントローラーの外に記述されるクラスです。引数Buttonについては前述しました。ButtonにFormで入力した値がセットされます。(ModelState.IsValid)を必ず記述しましょう。AjaxFormのデータアノテーションはAjaxを使わない一般的(?)なpostの場合と挙動がことなるようです。Ajaxじゃない場合のアノテーションって、submitした時点でクライアントサイドで検証され、例えば入力必須項目が空になってる場合コントローラーに制御が移らずにエラーメッセージ表示されていたように思います。Updateに飛び込んできます。クライアントに戻った時点でエラー表示されます。(ModelState.IsValid)が無いとそのままデータの更新処理を実行してしまいます。model);で、空のビューを戻しています。画面上の情報を初期化しようとの意図ですが、実際は効き目なしで、入力された値が再度表示されます。