質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

ASP.NET MVC 4

ASP.NET MVC4は、MVCパターンを利用して、高度なテスト機能と保守機能を備えた Web アプリケーションを開発するためのフレームワークです。

Q&A

解決済

3回答

12046閲覧

ASP.NET MVCにおける部分ビュー更新時のJavascriptのバリデーションチェックについて

f_horizon

総合スコア163

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

ASP.NET MVC 4

ASP.NET MVC4は、MVCパターンを利用して、高度なテスト機能と保守機能を備えた Web アプリケーションを開発するためのフレームワークです。

0グッド

0クリップ

投稿2016/10/29 00:18

編集2016/10/29 01:37

お世話になっております。
formの変更を検知する以下のテストコードを_ViewStart.cshtmlに記述しています。

@*<script type="text/javascript"> $(function () { "use strict"; $("form").change(function (event) { if (!$(this).valid()) { alert("NG"); } }); }); </script>*@

これにより、各Index.cshtml及びその中で部分的に呼び出しているビューにも検知が効いています。(formのバリデーションチェックを行い、例えば数値フィールドに文字列を入力していたら"NG"がアラートされる)
しかし、部分ビューをajaxで更新すると、更新したビューに対して検知ができなくなります。Index.cshtmlには効いたままです。

ajax内 $.ajax({ ・ ・ }).done(function (data) { // 部分ビューの更新 // サーバーから返されたhtml文字列(JSON)をjQueryのhtml()を使い、更新 })

どういった理由があるのでしょうか?ご教授お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

自己解決

解決ではありませんが、長いこと放置させてしまっていましたので一旦締めさせていただきます。

投稿2017/06/02 08:47

f_horizon

総合スコア163

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/06/02 10:21

長い間放置した挙句結局放棄ですか・・・ 回答者は回答を書くのに結構時間と労力を使っているということは認識されていますか? 逆の立場だったらあなたはどう思いますか?
guest

0

ASP.NET MVCというより、JavaScriptの世界とは思いますが

そのようですね。

MVC も部分ビューも問題とは直接関係なくて、ユーザーが画面のテキストボックスを手動で書き換えると定義してあるスクリプトが働くが、jQuery ajax を使って書き換えた場合はスクリプトが動かないというようなことだと理解しました。

全体のコードや再現手順が分からないので、当方としては想像をたくましくして考えるしかないのですが、一つだけ思いつくのは jQuery ajax なのでデフォルトで非同期になり、そのあたりのタイミングの問題がありそうな気がします。

その想像が当たっているなら、async オプションを false に設定すると何か違った結果になるかもしれません。

今提供されている情報で自分が想像できるのはその程度です。ハズレでしたらすみません。

【2016/10/29 16:35 追伸】

書き忘れましたが、async オプションを false に設定する場合は jqXHR.done() は使わないで、success, error, complete にコールバックを書けと言うことですので注意してください。詳しくは API Documentation を見てください。

http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings

もう一つ、ユーザー入力の検証には、Model のクラスのプロパティにデータアノテーション属性を付与すれば、クライアント側での検証用のスクリプトは ASP.NET が自動的に設定してくれますのでそれを使うのが一般的です。

[C#] #21. データ アノテーション検証コントロールでの検証
https://technet.microsoft.com/ja-jp/subscriptions/ff642519.aspx

なので、今回のような質問者さん自作の検証用スクリプトは必要ないと思うのですが・・・ そんなことは十分承知の上で今回のようなことをしていると言うことでしたら失礼しました。

でも、もしそうでなければ、上記のデータ アノテーション検証を使うことを検討されることをオススメします。

【2016/10/30 11:00 追伸】

たびたびの追伸ですみません。多分以下の想像が当たりだと思います。

$("form").change(function (event) { ... はバブルアップしてきた input 要素の change イベントを捕捉しているようですが、スクリプトで書き込んだだけでは、そもそもの input 要素の change イベントが発生しないというのが原因でしょう。

input 要素の change イベントはユーザー入力後フォーカスが外れた時に発生します。しかし、スクリプトで書き込んだだけではその条件を満たさないので change イベントは発生しません。

書き込んだ後、その input 要素の change イベントを発生させるスクリプトを追加すれば期待通りに動くと思います。

ASP.NET MVC も部分ビューも jQuery ajax も関係ない以下のようなシンプルなコードで質問者さんの問題を再現できます。(ブラウザにキャッシュされないよう、以下のサンプルは ASP.NET Web Forms の .aspx ページを使ってますが、そこは今回の話とは関係ないです)

「// これがないとダメ」とコメントした下のコードのコメントアウトを外せば当該 input 要素の change イベントが発生するので、form にてバブルアップしてきた change イベントを捕捉できます。

次からは是非ご自分で切り分けてみることをオススメします。切り分ける途中で原因が分かって自己解決できると思いますので。

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.11.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { $("form").change(function () { alert("change event fired!"); }); $("#Button1").click(function () { $("#Text1").val("Written by JavaScript"); // これがないとダメ //$("#Text1").change(); }); }); //]]> </script> </head> <body> <form id="form1" runat="server"> <input id="Text1" type="text" /> <input id="Button1" type="button" value="button" /> </form> </body> </html>

投稿2016/10/29 06:36

編集2016/10/30 01:59
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

f_horizon

2017/06/02 08:41

返信が大変遅くなってしまい申し訳ありません、悩んでいるうちに優先順位が下がっておりました。 ご回答いただいた内容は参考になりましたが、本質問はあくまで「部分エリアの更新が行われた所へのハンドラーの喪失」といったことでした。ありがとうございました。
guest

0

_ViewStart.cshtml というのは、以下の記事に書いてある、 Visual Studio でテンプレートを使ってプロジェクトを作った時に自動生成されるファイルですよね?

第1回 Controller-View開発のキモを押さえる
http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_02/aspnetmvc3_02_03.html

その記事に書いてあるように "Razorでは、ビューの処理に当たって、まず_ViewStart.htmlを呼び出し、その内容を処理する" ということですが、質問者さんが行った「部分ビューをajaxで更新」ではビューの処理に当たらないということで、期待通りにならないのではないかと推測してます。

でも「部分ビューをajaxで更新」を具体的にどうしているのか不明ですので、上記推測の域を出ることができません。

「部分ビューをajaxで更新」というところを具体的にどうしたのか、できれば回答者の方でもコピペすれば質問者さんの問題を再現できる極簡単なサンプルコードをアップしていただければ、もう少しお役に立てるかもしれません。(立てないかもしれませんが、その時はすみません)

投稿2016/10/29 01:13

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

f_horizon

2016/10/29 01:45

ご回答ありがとうございます、タイトル及び説明欄を修正致しました。具体的なコードを載せることができずに申し訳ありません。。 ASP.NET MVCというより、JavaScriptの世界とは思いますが、 「ajaxで更新したhtmlの部分エリアに対して、大元で定義してあるjavascriptが効かなくなる」 と認識していただいていいかと思います。
退会済みユーザー

退会済みユーザー

2016/10/30 02:03

多分当たりだと思う想像を下の解答欄の【2016/10/30 11:00 追伸】に書いておきました。(間違えて 2 つ回答欄を作ってしまいすみません)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問