jQuery APIの利用

InputMan for ASP.NETのコントロールでは、クライアント側の処理にjQuery APIを使用することが可能です。基本的なDOM操作から、Ajax機能やエフェクト機能をInputMan for ASP.NETのコントロールに適用することができます。以下にjQueryを使用した例を紹介します。

注意点

以下のコントロールは、jQuery APIの使用ができません。

カレンダーコントロール
電卓コントロール
リストコントロール
ファンクションキーコントロール
各検証コントロール
ショートカットエクステンダ

CSSの切り替え

コントロールのCSSを切り替えます。次のサンプルコードは、各コントロールに境界線、背景色を設定します。

JavaScript

$(function () {
    $("#GcTextBox1").css("border", "3px solid red");
    $("#GcTime1").css("background", "yellow");
});

エフェクト

コントロールにエフェクト機能を付与します。次のサンプルコードは、ボタンクリックにより時刻コントロールの表示非表示をアニメーション付きで切り替えます。

JavaScript

$(function () {
    $("#Button1").click(function () {
        $("#GcTime1").toggle("slow");
    });
});

イベント

クライアント側で発生するイベントをハンドルします。次のサンプルコードは、テキストコントロールのマウスホバー時に背景色を変更します。

JavaScript

$(function () {
    $("#GcTextBox1").hover(
    function () {
        $(this).SetBackColor("orange");
    },
    function () {
        $(this).SetBackColor("white");
    });
});

また、次のサンプルコードは日付コントロールに範囲外の日付が入力されたときに、メッセージを表示します。

JavaScript

$(function () {
    $("#GcDate1").InvalidRange(function () {
        alert("範囲外の値が入力されています。");
    });
});

Ajax通信

サーバーサイドとのAjax通信が可能です。次のサンプルコードでは、日付コントロールをダブルクリックすると、サーバー側から現在の日付を取得し表示します。

JavaScript

$(function () {
    $("#GcDate1").dblclick(function () {
        $.ajax({
            type: "POST",
            url: "WebService.asmx/GetToday",
            success: function (result) {
                var dt = new Date(Date.parse(result.text))
                $("#GcDate1").SetValue(dt);
            }
        });
    });
});

なお、WebService.asmxには以下の実装がされています。

Visual Basic
C#

<WebMethod>
Public Function GetToday() As String
    Return DateTime.Now.ToString()
End Function

[WebMethod]
public string GetToday()
{
    return DateTime.Now.ToString();
}