ASP.Net + jQuery + jQuery検証プラグイン+ UpdatePanel + nyroModal - 各フィールドでの成功の発射！

Question

私は、ユーザーが価格（数値）を入力する入力フィールドのリストを含むフォームを持っています。私はjQueryの検証プラグインがそれに応じてそれを検証するように、彼らのcssクラスを "必須"と "番号"に設定しました。すべてが完璧に機能しています。エラーは、各フィールドが数値でないか値が欠落している場合に表示されます。

このフォーム全体は、実際にはnyroModal（jQueryプラグイン）モデルのポップアップウィンドウ内にあります。しかし、それは重要ではありません。その中で、私はUpdatePanelを使って、その中にすべてを入れました。私のフォームは本質的に2段階のプロセスなので、フォームの最初の 'ページ'でユーザーが完了する必要があるいくつかの基本的な手順があります。それが検証されて動作するとき、私は、UpdatePanel内のいくつかの要素を非表示にして、フォームの次の 'ページ'を表示します。これは上記のすべての価格テキストボックス入力フィールドです。

フォームを検証するためのトリガーポイントとしてImageButtonを使用しています。デフォルトではImageButtonのままにしておけば、.NetはUpdatePanel内で起こっているため、私の場合はポストバックのAJAXポストバックを起動します。それは再び望まれています。私は明白な理由のために醜い完全なポストバックを望んでいません。

多くの読書の後、私はjQueryがフォームの検証に成功したかどうかに基づいて.Netがポストバックをしたいときにインターセプトできるように、.NetのPageRequestManagerにjavascriptで接続する方法が必要でした。私のロジックは次のように言います：デフォルトでは、ポストバックを許可しませんが、jQueryがフォームの検証を成功させると、ポストバックが許可されているという変数を設定します。したがって、ユーザーに成功を表示します。

これはすべて正常に動作しますが、最終的な問題が1つあります。

jQuery検証プラグインの検証（{success}）オプションは、フォーム全体ではなく、個々のフィールドで検証が成功した後、誤って起動しているようです。私。価格入力フィールドのいずれかに数字を入力すると、この成功オプションが発生し、cancelPostback変数がfalseに設定されます。つまり、検証されていないにもかかわらずフォームが送信されることを意味します。有効です。この検証（{成功}）オプションは、フォーム全体が検証された後にのみ起動すると予想していました。

私はこれを間違って解釈しましたが、実際にはその意味は何ですか？ もしそうなら、私は単純に完全フォームが検証されたときだけ、cancelPostback変数をtrueに設定することができますか？

ヒントがあれば、洞察力があります。次のように

私のjQueryのコードの検証を実施し、またネットのポストバックイベントをインターセプトするためには、次のとおりです。

<script type="text/javascript"> 
    // By default, don't allow Postback until we've successfully validated our form on the client-side. 
    var cancelPostback=true; 

    // Every single time the page loads, including every single AJAX partial postback 
    function pageLoad() 
    { 
     // Reset the value to say that "We don't allow Postbacks at this stage".. 
     cancelPostback=true; 

     // Attach client-side validation to the main form 
     $("#<%= form1.ClientID %>").validate({ success: function() { alert('validation succeeded!'); cancelPostback = false; } }); 

     // Grab a reference to the Page Request Manager 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_initializeRequest(onEachRequest); 

     alert("Page Load"); 
    } 

    // Our own custom method to be attached to each new/future page request.. 
    function onEachRequest(sender, args) 
    { 
     alert("About to cancel? " + cancelPostback); 
     // Check to see if we need to Cancel this Postback based on Conditional Logic within this page.. 
     args.set_cancel(cancelPostback); 
    } 
</script> 

Answer 1

私はsubmitHandlerとinvalidHandlerオプションを見てお勧めします。どちらか一方があなたが望むもののために働くべきです。私は、デフォルトでポストバックを許可し、invalidHandlerでcancelPostbackをtrueに設定するのが最善の方法だと思います。あるいは、__doPostBackを直接呼び出し、ImageButton経由でサブミットを置き換える独自のsubmitHandlerを記述することもできます。

Answer 2

おかげさまでヒントtvanfossonが見つかりました。

[OK]を更新：

私はより多くのリンクが続き、最終的には「成功」のドキュメントを見つけました。プラグインのホームページのドキュメントはひどいので、多くの主要な機能は省略しています:)しかし、公式のjQueryページでは「より良い」ものです。 「成功」オプションは、個々のフィールドが正常に検証されるたびに発生するオプションです。それは設計によって動作していたので、フォーム全体が有効なときにのみ起動すると誤って想定していました。

あなたのinvalidHandlerのアイデアを試しました。私はこのアイデアが大好きです。私が打ち明けた問題の1つは、ImageButtonのポストバックが常に最初に起動するため、invalidHandlerコードが実行される前にポストバックを開始するということでした。したがって、ポストバックはまだ進んでいます。その後、invalidHandlerは将来のポストバックを無効にしますが、残念ながら間違った順序で発火しています。しかしそれとは別に、それは完璧な解決策であるという兆候を示していました。

それから、私はもう一度submitHandlerの方法、つまり逆を試してみました。また、これはいくつかの順序問題を抱えていました。なぜなら、ポストバックは再び最初に起動し、ブロックされるからです。その後、submitHandlerは将来のポストバックを許可しますが、それはすでに遅すぎたので、このポストバックは見落とされました。もう一度ボタンを2回クリックしなければならないでしょう。

ので、最終的な半kludgeyソリューションは、それは正直であるには余りにも悪くありませんでした： //メインフォーム $（ "＃<にクライアント側の検証を取り付けます

私はこの行を変更）;}}）;}};}};}};}};}}

最初に表示されるように、PreventPostback変数をトグルしますが、最初のポストバックがすでにブロックされていて、死んでしまうため、新しいポストバックが手動で発生します。したがって、この手動の__doPostBackコールは、新しいポストバックがPreventPostbackの新しい値を尊重して起動することを保証します。

ImageButtonsの背後からイベントメソッドを削除し、DoPostBackLogic（）というサーバーサイドコードで新しいメソッドを作成しました。このメソッドは、ページがポストバックされたときにのみ呼び出されます。これは私のフォームで起こる唯一のポストバックだからです。それから、hide/show/saveロジックがすべて私の中で起こります。つまり、__doPostBackを手動で呼び出しているときは、UpdatePanelのIDを使用するだけで、特定のImageButtonなどを模倣する心配はありません。

これは完全に動作します。ポストバックはデフォルトでは無効になっており、フォームが有効な場合はポストバックが許可されますが、ポストバックが手動でトリガーされ、新しい値が有効になります。

これは本質的には2番目の解決策です。もう一度聞いて共有していただきありがとうございます！ :)

Answer 3

IE以外のすべてのブラウザがjQueryバリデータのsubmitHandler（）関数の前に "onEachRequest"関数を起動していたので、私はあなたのソリューションに問題がありました。私はプリセット変数に頼るのではなく、単に検証が失敗した場合にポストバックをキャンセルするより洗練されたソリューションを考え出しました。

Sys.Application.add_init(function() { 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_initializeRequest(onEachRequest); 
    }); 

    function onEachRequest(sender, args) { 
    if (args.get_postBackElement().id == <%= [YourSubmitButton].ClientID %>) { 
     args.set_cancel(!$('#aspnetForm').valid()); 
    } 
    }