「AjaxHelper を利用した作成・更新フォーム(サーバー側検証エラーの表示)」までで作成した入力・編集ウィンドウを jQuery を利用してダイアログ化します。やることは「ASP.NET MVC と jQuery で新規登録ダイアログと編集ダイアログ」で行ったことと概ね同じですけど、新規登録と編集のダイアログで表示するフォームを部分ビューの呼び出しで入手する必要があります。そのため、Javascript からリンクのクリック操作を行い、サーバーから部分ビューを入手します。 続きを読む AjaxHelper を利用した作成・更新フォーム(ダイアログで表示) →

「AjaxHelper を利用した作成・更新フォーム」で、AjaxHelper を利用して非同期通信で作成・更新の部分フォームを取得し、現在表示している画面に挿入することができました。ここでは、サーバー側で把握した検証エラーをデータ入力しているときと同じ状態の画面で通知できるようにしてみます。

方法としては、「入力ダイアログで入力された値のサーバーでの検証エラーの表示」と同じく、「データ検証でエラーが発生した場合、エラーメッセージと入力データをビューへ渡し、クライアント側では受け取った HTML ドキュメントからエラー発生を把握して、入力されていたデータをフォームにセットしてからダイアログを表示させる」ようにします。 続きを読む AjaxHelper を利用した作成・更新フォーム(サーバー側検証エラーの表示) →

「ASP.NET MVC と jQuery で新規登録ダイアログと編集ダイアログ」でダイアログ上での新規登録とデータの編集を行ったわけですが、その際にサーバー側でのデータ検証でエラーを把握した場合に、単純にデータ入力画面（この場合はダイアログ表示）に戻せないと書きました。実際そのとおりなのですが、サーバー側のデータを使わないと検証できないものがあるのも事実です（ページング表示でクライアント側にすべてのデータが渡されていない場合のデータの重複確認など）。

そこで、サーバー側でデータ検証エラーを把握した際に、データ入力のダイアログを再表示させる方法を考えてみました。 続きを読む 入力ダイアログで入力された値のサーバーでの検証エラーの表示 →

ASP.NET MVC と jQuery で削除確認ダイアログの記事で、確認を行うダイアログを作ってみましたが、ダイアログの中で入力を行うダイアログは? と気になったので、ちょっと新規登録と編集をダイアログ上で行うものを作ってみました。登録・編集を行うものは、連絡先情報(名前、メールアドレス、電話番号)にしました。

ダイアログの表示部分は、jQuery と jQuery UI の Dialog を利用して JavaScript で、フォームの部分は、ASP.NET MVC の PartialView で構築します。 続きを読む ASP.NET MVC と jQuery で新規登録ダイアログと編集ダイアログ →

「一覧で表示しているものから選択されたものを操作するときに、確認ダイアログを出したい」と思ったので、ちょっと書いてみました。動作概要はこんな感じです（操作は「削除」ということにします）。

1. 一覧で表示しているものの中から削除したいものをクリックする
2. 削除して良いか確認するダイアログを表示
3. 「はい」ボタンがクリックされたら、サーバーへ POST メッセージで削除を依頼
4. サーバーから削除後の一覧が送られてくるので、表示する

ダイアログの表示部分は、jQuery と jQuery UI の Dialog を利用して JavaScript で構築します。

続きを読む ASP.NET MVC と jQuery で削除確認ダイアログ →