AutoPostBackでちらつかないサンプル

以前、「ASP.NETでAutoPostBackにより画面ちらつきを行わない方法」について書きました。今度はこの方法を使ったサンプルを作りましたので、紹介します。

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

AutoPostBackを使う方法では、

CheckBox1をクリックして作成した手続き（CheckBox1_CheckedChange)で

If CheckBox1.Checked Then

    CheckBox2.Checked = True

End If

とコーディングして、CheckBox1プロパティのAutoPostBackをTrueにすると動作します。

しかし、この方法だと、複雑なロジックが必要ないのにもかかわらずサーバーサイドで処理するため、画面のちらつきが発生します。

JavaScriptを使う方法では、

ページロードの手続き(Page_Load)で以下のようにコーディングします。

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

勿論、AutoPostBackはfalseにしておきます。

ASP.NETのcheckboxは、ｈｔｍｌのinputタグにありますので、このinputタグの属性として、クリックされた場合のjavascriptプログラムを指定しているのがInputAttribute.Addです。この命令によって、以下のhtmlが生成されます。

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

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

※　javascriptのCheckBox1.checkedは、本当は、document.form1.CheckBox1.checkedなどと記述すべきかもしれません。詳しくは、javascriptのマニュアルなどをご覧ください。