1.AutoPostBackの画面ちらつきを防ぐ方法

1.1.2 ASP.NET(Web Devloper 2005 Express)1. 概説
ASP.NETの基本は、サーバーサイドのプログラミングにより、発行されるWebページの内容を表示する。例えば、Webページのメニューなどの選択結果により、Webページ上のチェックボックスにチェックを入れたり外したりするのに伴って、他のチェックボックスのオンオフを設定する場合でも、ASP.NETサーバー上で動作する必要がある。
ASP.NETでは、AutoPostBackを使ってWebページ上のチェックボックスやテキストが変更されると、制御がASP.NETサーバー側にも戻り、ASP.NET側でのロジックを動作させ、エラーチェックをしたり、チェックボックスをオンにしたりすることになる。

しかし、この方法だと、制御がASP.NETサーバーに戻ることから、画面のちらつきが発生する。

このちらつきを起こさないようにするには、JavaScriptによりクライアント側でロジックを組み込み、制御がASP.NETに戻らないようにする
必要があるが、ASP.NET2005からは、ASP.NETのオブジェクトから、イベント発生時起動するJavaScriptプログラムを定義することが可能になったので、この機能を利用することで、ちらつきの無い表示が可能となる。

最下行にASP.NETの画面ちらつきを防ぐサンプルプログラムがあるので、ダウンロードして参考にして頂きたい。
また、関連情報としてASP.NETを使ったWebシステム例がある「1.1.2 ASP.NET(Web Devloper 2005 Express)」を参照して欲しい。

2. 実例
2つチェックボックスを作成し、一方のチェックボックス(CheckBox1)がオンになったら、他方のチェックボックス(CheckBox2)もオンにするようなASP.NETプログラムを作成する場合のサンプルをAutoPostBackを使う方法と、JavaScriptを使う方法のサンプルを示す。

(1) AutoPostBackを使う方法
ASP.NETサーバー上のVBプログラムでCheckBox1をクリックして作成した手続き(CheckBox1_CheckedChange)で

If CheckBox1.Checked Then
    CheckBox2.Checked = True
End If

とコーディングして、CheckBox1プロパティのAutoPostBackをTrueにする。このように設定すると、ブラウザからCheck1Box1をクリックすると、CheckBox1_CheckedChange関数が起動され、このプログラムの中で、CheckBox2.CheckがTrueになり、CheckBox2チェックボックスがオンになる。
しかし、この方法だと、CheckBox1_CheckedChange関数がASP.NETサーバーサイドで処理するため、画面のちらつきが発生する。

(2) JavaScriptを使う方法
ページロードの手続き(Page_Load)で以下のようにコーディングする。

CheckBox1.InputAttributes.Add("onClick", "if (CheckBox1.checked) CheckBox2.checked = true")

勿論、AutoPostBackはfalseにしておく。

ASP.NETが表示したWeb画面上のCheckBox1は、htmlのinputタグとして定義されている。このinputタグの属性としてにパラメータを定義するのが、InputAttriubutes.Addである。InputAttriubtes.Addのパラメータとして、inputタグがクリックされたとき("OnClick")の動作("if (CheckBox1.checked) CheckBox2.checked=true")を定義している。このときの動作は、JavaScriptで記述する。よって、この命令によって、以下のhtmlが生成されます。

<input id="CheckBox1" type="checkbox" name="CheckBox1"onClick="if (CheckBox1.checked) CheckBox2.checked = true" />

これにより、javascriptでプログラムが動作することができ、クライアント側のブラウザー上で動作することになる。ブラウザー上で動作するのでちらつきが無い。
ASP.NETのオブジェクト部品でInputAttributeを使うのか、Attributeを使うのかについては、どのようなhtmlが表示されているのか必要があり、注意が必要である。生成されたhtmlを見比べれて判断する。

(3) サンプル
上記サンプルプログラムのDefault.aspxとDefault.aspx.vbをzip圧縮したファイルを添付ファイルにアップした。参考にして欲しい。

ċ
Default.zip
(1k)
dirac paul,
2009/10/03 7:24
Comments