2016-04-27 5 views
2

クライアント側の要素からクラスを削除し、その削除をViewStateで維持する適切な方法を判断しようとしています。たとえば、カスタムバリデーターを持つフォームがあります。カスタムバリデーターは、1つ以上のフィールドに無効な入力があると判断します。それは赤く表示されるようにそれはその要素にCSSクラスを追加します。クライアント側でASP WebフォームViewStateからクラスクライアント側を削除する

TextBox_UserName.CssClass += " error"; 

を、私は、ユーザーがフィールドに入力して開始したときになるようにクラスを削除しますonkeyupの機能を持っていますデフォルトのスタイルに戻っ:

<asp:TextBox ID="TextBox_UserName" runat="server" onkeyup="clearError(event, this)" /> 

Javascriptの機能は非常に単純です:

function clearError(event, elem) { 
    if (event.keyCode != 9 && event.keyCode != 16 && event.keyCode != 13) 
     $(elem).removeClass('error'); 
} 

これはうまく動作しますが、私はに実行している問題は、このです。ユーザーがエラークラスをクリアする値を入力すると、ポストバックを引き起こすフォーム上の別のコントロールの値が変更されます。ポストバック後にフォームがリロードされると、エラークラスはTextBox_UserNameコントロールに戻ります。これは、クラスがコードビハインドを介して追加され、ViewStateに保存されるためです。

要素のクラスをクライアントサイドで削除または更新し、その変更をViewStateに反映させる方法はありますか?

これを処理するコードビハインドにロジックを追加することしか考えられませんが、私が使用しているフォームには多数のフィールドがあり、理想的ではありません。もう1つは、ポストバックの原因となるフィールドだけがポストバックの影響を受けるように、telerik AjaxManagerを使用することです。しかし、これは本当に理想的ではありません。私はjavascriptを使用して達成しようとしていることを行うためのより良い、またはより効率的な方法があることを願っています。 ViewStateを変更するとエラーが発生する(と私はこれを削除する必要はありません)方法について話をするので、私は解決策を見つける運がなかった。

編集:私は影響を受ける可能性があるすべてのコントロールからのエラークラスをクリアし、私のカスタム検証方法では

:私は、このソリューションを選択しました。次に、各フィールドが有効であるかどうかを確認してから、チェックに失敗したフィールドにエラークラスを追加します。次に、隠しフィールドの値を更新して、フォームで検証が行われたことを示します。ポストバックをトリガーコントロールのイベントを処理する方法で

は、に検証が発生した場合、私はチェックして、それを持っている場合、私は電話をかける:

Page.Validate(); 

これが再び私のカスタムバリデータをトリガします最初にエラークラスをクリアするので、固定フィールドだけを残してユーザが修正しなかったフィールドのcssクラスを更新します。

+2

一歩を踏み出し、あなたがしていることを再考してください。バリデータを使用していますが、ワークフローに干渉しています。おそらく、それらを「適切に」使用する方法があるため、作業を続けるために余分なコードを書く必要はありません。 – Alexander

+0

入力いただきありがとうございます。私はあなたが何を意味するかは分かりません。私は、ユーザーが問題を解決できるようにしながら、検証に失敗した要素のスタイルを設定しようとしています。問題があることを示すスタイルをクリアし、ViewStateでそれを維持して、スタイルは戻ってくる。バリデータのワークフローにどのように干渉しているかを詳しく教えていただけますか?より良い解決策を考え出すために、より良い理解を得ることができますか?私はどのように私がそれを解決したのか説明するために私の質問を編集したが、おそらくそれは最善の方法ではない。 –

+1

それは私が言っていることです。バリデーターはスタイリングを担当することになっています。あなたが "干渉"し始めると、彼らは彼らが働くことを意図した方法を離れることになります。通常、安全のために、カスタムバリデータの_and_クライアント側の検証の背後にあるコードを記述します。あなたは大丈夫です。 – Alexander

答えて

1

クライアント側で表示状態を変更できないことは事実です。ポストを更新パネルに戻す原因となるすべてのコントロールを置くのはどうですか?そうすれば、それらのコントロールだけがポストバック中に影響を受けます。個人的には、軽量なので、部分的なポストバックのためにjQueryでAJAX関数を使用することを好みます。しかし、Webフォームを使用しているので、jQuery AJAXに慣れていない場合は、アップデートパネルが素早い解決策になります。

もう1つの方法は、テキストボックスの状態を隠しフィールドに保存することです。次に、サーバーコードは、どのクラスをテキストボックスに適用するかを知ります。

+1

これは良い解決策です。私はUpdatePanels/AjaxPanels(私が働いているプロジェクトはTelerikコントロールを利用しています)の個々のコントロールをラップすることを避けたかったのです。この主な理由は、フォーム全体がすでにAjaxPanelにラップされているため、私はそれを解体したくないからです。私は隠されたフィールドを使用することを選択しましたが、あなたの提案とは異なる方法で、変更が少なくて済むと思っています。私は何をしたのかを説明するために質問を編集しました。 –

関連する問題