« [ActiveReports] 環境によって余白やページサイズが変わるのを防ぐには | メイン | [ASP.NET]IEのファイルダウンロードダイアログの「開く」ボタンを非表示にする方法 »

2012年2月22日 (水)

[ASP.NET][AjaxControlToolkit][Javascript]NumericUpDownExtender操作時のイベント

テキストボックスにAjaxControlToolkitのNumericUpDownExtenderを付けて、数値を1ずつ増減できるのを付けたのだけど、
お客様からの要望で、

1.1〜9は"01"〜"09"に。
2.UpDownする度に、ほかのコントロールを操作したい。

そしてこれをサーバー側ではなく、クライアント側で処理してほしい、
つまりJavacsriptで実現してほしいということになった。

NumericUpDownExtenderにUpDownする時のイベントがあれば簡単だなーと思っていたら、
そんなものは用意されてなかった。。。(私が見つけられなっただけかもしれないけど…)

仕方がないので、TextBox.Attributes["onchange"]に(<input type="text" onchange="・・・" />のこと)
関数を書くことにした。

下に、テキストボックスと最小値とチェックボックスのIDを渡し、
最小値以上の数値が入力された場合はチェックボックスにチェックを入れるという関数を書いてみた。
-------------------------------------------------
function txtChange(obj, min,chkid){
    var e = obj;//テキストボックス
    var i = parseInt(e.value);
    var chk = document.getElementById(chkid);

    if(i < 10){
        e.value = "0" + String(i);
    }
    if(i > min && !chk.checked){
        chk.checked = true;
    else{
        chk.checked = false;
    }
}
------------------------------------------------
これで1.と2.の実現ができた。

しかし、問題が…。
このチェックボックスが曲者で、UpDownの操作が無くても手動で設定できる仕様だったので、
初期ロード時にDBから値をセットした時や、
何かの操作でPostBackが発生してしまう時にもこのtxtChange関数が動いてしまって、
手動で設定した内容が消えてしまうのだ。
(例:最小値2に設定し、テキストボックスには4と入力したが、チェックボックスのチェックは手動で外した場合、
PostBackが発生すると、またチェックがついてしまう。)

NumericUpDownを操作するときだけ、
つまり、サーバー側の操作でテキストボックスの値が変えられる時以外で上の関数を呼び出したいんだけどなぁ。

ちょっと悩んだけど、Page_Load「以外」がわかればいいので、
Javascriptのwindow.onloadを使えばいいんじゃないか!とひらめいた。

というわけで、ページロードがされたかどうかを判断するフラグを置いて、ロード時に"1"を立てるようにした。
--------------------------------------------
<input type="hidden" id="OnLoadFlg" 〜/>を設置。
======================
window.onload = function(){
    document.getElementById("OnLoadFlg").value = "1";//ページロードされた場合1を立てる
}
function txtChange(obj, min,chkid){
    var e = obj;//テキストボックス
    var i = parseInt(e.value);
    var chk = document.getElementById(chkid);
    var onLoadFlg = document.getElementById("OnLoadFlg");

    if(i < 10){
        e.value = "0" + String(i);
    }
    //ページロード時以外の場合にチェックの処理
    if(onLoadFlg.value == "0"){
        if(i > min && !chk.checked){
            chk.checked = true;
        else{
            chk.checked = false;
        }
    }
    onLoadFlg.value = "0";//フラグを元に戻す
}
------------------------------------------------

ちょっと不細工だけど、これで思ったような処理ができた。
もっとスマートな方法があれば教えてください><

トラックバック

このページのトラックバックURL:
http://app.blog.eonet.jp/t/trackback/349283/27980139

[ASP.NET][AjaxControlToolkit][Javascript]NumericUpDownExtender操作時のイベントを参照しているブログ:

コメント

コメントを投稿

フォトアルバム

2012年5月

    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

My Photostream

  • Flickrにアップしてる写真の一部です。
    www.flickr.com
    This is a Flickr badge showing public photos and videos from micek_flicek. Make your own badge here.

クリック募金

  • クリックで救える命がある。
Powered by Six Apart