Visual Web Developer 2010 Express EditionでAJAX Control Toolkit を利用

Question

[日付]のテキストボックスでカレンダーを利用するため、CalendarExtenderを追加したのですが、デバック後、[日付]テキストボックスをクリックしてもカレンダーが表示されません。

下記の手順で追加したのですが、なにか間違っておりますでしょうか。

[デザイナ] → [デザイン] → [日付]テキストボックス → [エクステンダの追加] → [CalendarExtender] を追加

[プロパティ] の [format] にyyyy/MM/dd　と入力

どうぞよろしくお願いいたします。

 

Answer 1

あかん さんに返信

手順は間違っていないように思います。
.NET の実行時例外、もしくは JavaScript のエラーは何か発生しますか?

Answer 2

もりおさん　ありがとうございます。

デバック開始で試していますが、エラーは発生しておりません。

ちなみに上記では、 [CalendarExtender] を追加のみを書いていますが、

その他のテキストボックスで[FilteredTextBoxExtender]を追加し、

[filter type]に【number】、[invalid chars]に【-】を設定しても

設定前と設定後では変化がありません。

 

ソリューションエクスプローラーをみると、【bin】フォルダの中には以下のものがあります。

・AjaxControlToolkit.dll

・jaフォルダ→AjaxControlToolkit.resources.dll　（その他にも【ar】フォルダ　~　【zh-CHT】フォルダがある）

・AjaxControlToolkit.pdb

Answer 3

あかん さんに返信

> デバック開始で試していますが、エラーは発生しておりません。

あら、そうすると JavaScript そのものが動作しないか、もしくは CalendarExtender コントロールと
TextBox の関連付けが行われないのかしら。
こんな感じで確認してみてはいかがでしょうか。

  <script type="text/javascript">
     function pageLoad() {
       var CalendarExtender1 = $find("<%= CalendarExtender1.ClientID %>");
       alert("CalendarExtender1.get_element():" + CalendarExtender1.get_element().id);
       var TextBox1 = $get("<%= TextBox1.ClientID %>");
       alert("TextBox1:" + TextBox1.id);
       if (CalendarExtender1.get_element() === TextBox1) {
         alert("同一であります");
       } else {
         alert("違っているであります");
       }
     }
  </script>
</body>

Answer 4

もりおさん　ありがとうございます。

 

textboxのスマートタグで[エクステンダーの削除]から確認をしましたら、

下記のようになっていました。

------------------------------------------------------

first_action_dateTextboxにアタッチされたエクステンダー

種類：CalendarExtender

ID：first_action_dateTextBox_CalendarExtender

-------------------------------------------------------

CalendarExtender コントロールとTextBox（first_action_dateTextBox） の関連付けはできているように思いますが、いかがでしょうか？

 

上記に記載いただいた <script type="text/javascript">はまだ試していません。

やり方がよくわかりませんでした。すみません。。

Answer 5

あかん さんに返信

> CalendarExtender コントロールとTextBox（first_action_dateTextBox） の関連付けはで
> きているように思いますが、いかがでしょうか？

多分大丈夫だと思います。そして私は少し間違っていました。
クライアント側のプロパティ CalendarExtender.get_element() で取得されるのは Calendar で
日付を選択したときの入力先のコントロール。確認すべきは Calendar を表示するトリガーなコント
ロールが TextBox か否か。
サーバー側のプロパティ CalendarExtender.PopupButtonID が無指定の場合 TextBox がトリガ
ーになりますよーという CalendarExtender コントロールの仕様に基づいて
CalendarExtender.get_button() が null であることを確認するとよいのかなと思います。

    <script type="text/javascript">
        function pageLoad() {
            var CalendarExtender1 = $find("<%= CalendarExtender1.ClientID %>");
            if (CalendarExtender1.get_button() === null) {
                alert("OK:button is null");
            } else {
                alert("NG:button is not null");
            }
        }
    </script>
</body>

> 上記に記載いただいた <script type="text/javascript">はまだ試していません。
> やり方がよくわかりませんでした。すみません。。

[WebForm.aspx] における表示モードを [デザイン] から [ソース] に切り替えると記述することが
できます。記述場所は body タグ内であればどこでも良いような、良くないような。私は body の閉
じタグの直前に記述するようにしています。

Answer 6

 

もりお さん　返信ありがとうございます。

> [WebForm.aspx] における表示モードを [デザイン] から [ソース] に切り替えると記述することが
> できます。記述場所は body タグ内であればどこでも良いような、良くないような。私は body の閉
> じタグの直前に記述するようにしています。

[ソース]はおおまかに以下のようになっています。

<script　runat="server">

</script>

 

<asp:Content　ID="Content1"・・・・・>

</asp:Content>

 

<asp:Content　ID="Content2"・・・・・>

</asp:Content>

 

bodyタグはありませんので、<script　runat="server">　～　</script>の後に記述したのですが、

デバック時に【ビルドエラー】が発生してしまいます。

Answer 7

あかん さんに返信

マスターページを利用されていらっしゃるのですか。
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
のタグ内に記述するとよいかと思います。

> デバック時に【ビルドエラー】が発生してしまいます。

何というエラーが発生するのでしょうか。

Answer 8

もりおさん　返信ありがとうございます。

> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
> のタグ内に記述するとよいかと思います。

2パターンで記述してみましたが、２つともエラーが出ます。

■1つ目（そのまま記述）

    <script type="text/javascript">
        function pageLoad() {
            var CalendarExtender1 = $find("<%= CalendarExtender1.ClientID %>"); →　この行でエラーが発生しました。
            if (CalendarExtender1.get_button() === null) {
                alert("OK:button is null");
            } else {
                alert("NG:button is not null");
            }
        }
    </script>

※エラー 1 'CalendarExtender1' は宣言されていません。保護レベルが原因でアクセスできない可能性もあります。

■2つ目（CalendarExtender1をCalendarExtenderに変更）

    <script type="text/javascript">

        function pageLoad() {

            var CalendarExtender = $find("<%= CalendarExtender.ClientID %>"); →　この行でエラーが発生しました。

            if (CalendarExtender.get_button() === null) {

                alert("OK:button is null");

            } else {

                alert("NG:button is not null");

            }

        }

    </script>

※エラー 1 非共有メンバーを参照するには、オブジェクト参照が必要です。

度々ですみません。　よろしくお願いいたします。

Answer 9

あかん さんに返信

> 1 'CalendarExtender1' は宣言されていません。保護レベルが原因でアクセスできない可能性もあります。
CalendarExtender1 を参照できないですよーという意味です。
$find("<%= CalendarExtender1.ClientID %>");
の部分はページに配置しているサーバーコントロールを参照しなければいけないので、前回ご掲示いた
だいた情報を見る限りではこのようにする必要があります。
$find("<%= first_action_dateTextBox_CalendarExtender.ClientID %>");

Answer 10

もりおさん　返信ありがとうございます。

> 前回ご掲示いただいた情報を見る限りではこのようにする必要があります。

> $find("<%= first_action_dateTextBox_CalendarExtender.ClientID %>");

下記のように変更しましたが、やはりエラーが出てしまいます。

    <script type="text/javascript">

        function pageLoad() {

            var CalendarExtender = $find("<%= first_action_dateTextBox_CalendarExtender.ClientID %>");

            if (CalendarExtender.get_button() === null) {

                alert("OK:button is null");

            } else {

                alert("NG:button is not null");

            }

        }

※エラー1 'first_action_dateTextBox_CalendarExtender' は宣言されていません。保護レベルが原因でアクセスできない可能性もあります。

Answer 11

var CalendarExtender = $find("<%= first_action_dateTextBox_CalendarExtender.ClientID %>");

ここで指定している「first_action_dateTextBox_CalendarExtender」には CalenderExtender の ID を指定する必要があります。
コントロールを貼り直したりして ID が変わってしまったことも考えられるので、再度 ID を確認しなおしてみてください。

動きを見ていると JavaScript 自体が動いていないことも想定されるので、もう少しシンプルに JavaScript が動いていることを確認するのもありかと。

<script type="text/javascript">
function pageLoad() {
  alert("JavaScript は有効");
}
</script>

このコードを入れて alert が出なければ、そもそも JavaScript が動いていないので、この場合には対処が異なってきます。

あと、参考までに AjaxControlToolkit.dll のバージョンはいくつですか？

Answer 12

totojoさん　ありがとうございます。

 

下記のコードでJavaScript確認できました。　【JavaScriptは有効】と表示されました。

<script type="text/javascript">
function pageLoad() {
  alert("JavaScript は有効");
}
</script>

 

先週、下記のサイトからAjaxControlToolkit.Binary.NET35.zipをダウンロードしました。

Version 40412とサイトに記載がありました。

http://ajaxcontroltoolkit.codeplex.com/releases/view/43475

 

Answer 13

あかん さんに返信

> 下記のコードでJavaScript確認できました。　【JavaScriptは有効】と表示されました。
> 先週、下記のサイトからAjaxControlToolkit.Binary.NET35.zipをダウンロードしました。

動作環境は問題なさそうですね。
何が原因でカレンダーが表示されないのかとても気になります。
記述されているコードを丸ごとお教えいただくわけにはいかないでしょうか。

Answer 14

先週、下記のサイトからAjaxControlToolkit.Binary.NET35.zipをダウンロードしました。

Version 40412とサイトに記載がありました。

http://ajaxcontroltoolkit.codeplex.com/releases/view/43475

 

さらに確認をしたいのですが、プロジェクトの対象フレームワークは .NET Framework 3.5 でしょうか？
.NET Framework 4 が対象の場合なら AjaxControlToolkit.Binary.NET4.zip の方を使うべきです。

また、ダウンロード ページに注釈として次のように記述されています。

　- Pages using controls from AJAX Control Tookit .NET 3.5 must use the ToolkitScriptManager, rather than the ASP.NET ScriptManager.

この点については正しく指定されていますでしょうか？

軽く手元で試したのですが、

　・対象フレームワークを .NET Framework 4 にする
　・AjaxControlToolkit.dll は 3.5 を使う（AjaxControlToolkit.Binary.NET35.zip）
　・ToolkitScriptManager ではなく、ScriptManager を使う

とすると、同じように Extender が動かない状態にはなりました。ただ、クライアント側のスクリプト エラーは発生していますけれども。

Answer 15

totojo さんに返信

> .NET Framework 4 が対象の場合なら AjaxControlToolkit.Binary.NET4.zip の方を使うべきです。

げふ、気づきませんでした。

Answer 16

totojo さん もりおさん  ありがとうございます。

> .NET Framework 4 が対象の場合なら AjaxControlToolkit.Binary.NET4.zip の方を使うべきです。

AjaxControlToolkit.Binary.NET4.zipをダウンロードしたところ、無事使えるようになりました。

 

この度は、いろいろとアドバイスをいただき、本当にありがとうございました。

大変、勉強になりました。

Answer 17

こんにちは、あかん さん。

MSDN フォーラムをご利用いただき、ありがとうございます。フォーラム オペレーターの 山本です。

解決されたようで、よかったですね。
アドバイスくださった回答者のみなさんもありがとうございました。

フォーラムでは、今後同じ問題でこのスレッドを参照された方のためにも、有効な情報が目にとまりやすくなり、情報の有効活用ができるかと思いますので、解決策や参考になった情報などには、回答としてマークすることをお願いしています。
今回は私のほうで回答としてマークさせていただきましたが、次回は あかん さんも回答としてマークしてみてくださいね。

今後とも MSDN フォーラムのご利用をよろしくお願いいたしますね。それでは。
                                                     
マイクロソフト株式会社 フォーラム オペレーター 山本 春海