クライアントスクリプトの作成
クライアントサイドで動作するJavaScriptも用意します。対象のファイルは「ColorDialog.js」ファイルです。ASP.NET AJAXを利用して作成します。
ここで、Type.registerNamespace('Higuchi.UI');という記述をしておくことで、独自の名前空間を作成できます。また、「ColorDialog.js」ファイルの最後で
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
と記述しておけば、ASP.NET AJAXに対してスクリプトのロードが終了したことを通知できます。
JavaScript関数の処理概要
JavaScript関数の処理は次のとおりです。
| 関数 | 処理概要 |
| Preview | 選択した色をプレビューする処理を記述します。第1引数でColorDialogのID、第2引数で選択されたカラーセルのインスタンスが渡されます。 |
| ResetPreview | プレビューによって変更された値を元に戻します。 |
| SelectColor | 選択した色の色コードを、適切なプロパティにセットします。セット可能なプロパティはvalueか、スタイル属性のbackground-color、colorのいずれかです。 |
| Show | クリックした場所がColorDialogコントロールの左上隅になるようにColorDialogコントロールを表示します。 |
| Hide | ColorDialogコントロールを非表示にします。 |
サンプルの実行
それではサンプルを実行してみましょう。［Button1］をクリックするとColorDialogを表示します。TextBox1へ値をセットする場合は、以下の内容をcsファイル中に記述します。
this.ColorDialog1.Observe(this.Button1, Higuchi.Web.JavaScript.EventList.Click, this.TextBox1);
また、テキストボックスの背景色を設定したい場合は、
this.ColorDialog1.TargetProperty
= Higuchi.Web.CustomControl.ColorDialog.PropertyType.BackgroundColor;
と記述することで、TextBox1.valueではなく、背景色が変更されるようになります。
Preview関数のオーバーライド
最後にPreview関数のオーバーライドの方法について説明します。「Override.aspx」には次のようなクライアントスクリプトが記述してあります。
function Override() { $get('ColorDialog1').ColorDialog.Preview = function(ColorCell) { $get('Zone').style.backgroundColor = ColorCell.style.backgroundColor; $get('ColorDialog1').ColorDialog._TargetTextBox.value = ColorCell.style.backgroundColor; } }
この関数をbodyのonloadイベント時に実行すると、Preview関数をオーバーライドできます。このサンプルの場合、Zoneというidを持つdivコントロールの背景色を変更するように関数をオーバーライドしました。同様にPreview関数ではなく、SelectColor関数をオーバーライドして独自の処理を行わせることも可能です。
まとめ
ASP.NET AJAXとAjax Control Toolkitを利用することで便利なコントロールを簡単に作成することが可能です。他にもUpdatePanelを利用するとページ遷移なしでデータの書き換えなどを容易にできる機能がASP.NET AJAXには用意されています。参考にしてみてください。
