AJAXについて教えてください

Question

 

こんにちわ。

いつもお世話になっております。

 

今回もよろしくお願い致します。

 

ASP.NET AJAXでCollapsiblePanelを利用しなければいけない状況になり

以下のサイトを参考にしました。

【AJAXの設定】

http://www.atmarkit.co.jp/fdotnet/dotnettips/561aspajaxprepare/aspajaxprepare.html

【CollapsiblePanelの作成】

http://www.atmarkit.co.jp/fdotnet/dotnettips/595aspajaxcollapspnl/aspajaxcollapspnl.html

 

【AJAXの設定】

①ファイルをbinフォルダに配置

②Web.configに登録

③Control Toolkitをツールボックスに登録

 

【CollapsiblePanelの作成】

①サイト通りに作成

 

を行ってみましたがパネルは開いたままでクリックしても何も

動かない状態です。

実は以前もCascadingDropDownに挑戦してまったく動かず諦めた経験があります。

 

一体、何が足りないのでしょうか？

ご教示下さい。

 

サイトには.cssファイルで定義されているクラスを指定するとありますが

詳細が分からず何もしていないのが気になっています。

 

宜しくお願い致します。

Answer 1

ICE AGE さんからの引用

サイトには.cssファイルで定義されているクラスを指定するとありますが 詳細が分からず何もしていないのが気になっています。

 

それは、無視して大丈夫です。

 

そのページのデザイン画面で、下のほうにデザインというタブとソースというタブがあると思いますが、

（なんていうのか知らないんですがhtmlビュー？）そのソースタブにどう書かれているか、

載せてもらえますか？

 

わかるかわからないかわかりませんけど。（＾＾；

Answer 2

はなはなはな　さま

ありがとうございます。

 

はなはなはな さんからの引用

それは、無視して大丈夫です。

ここがネックだと思っていました...

 

はなはなはな さんからの引用

そのページのデザイン画面で、下のほうにデザインというタブとソースというタブがあると思いますが、 （なんていうのか知らないんですがhtmlビュー？）そのソースタブにどう書かれているか、 載せてもらえますか？

AJAXの部分を抜粋して投稿致します。

 

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

    <%--Control Toolkitを使用する場合には先頭ScriptManagerの配置は必須--%>
    <aspcriptManager ID="Manager" runat="server">
    </aspcriptManager>
    <%--折り畳みパネル操作のためのパネルを定義--%>
    <aspanel ID="ph" runat="server" CssClass="collapsePanelHeader" Height="19px" Style="z-index: 147; left: 49px;
        border-top-style: none; border-right-style: none; border-left-style: none; position: absolute;
        top: 554px; background-color: #ccccff; border-bottom-style: none" Width="386px">
    </aspanel>
    <%--開閉する対象のパネルを定義--%>
    <aspanel ID="pc" runat="server" CssClass="collapsePanel" Height="116px" Style="border-right: gray 1px solid;
        border-top: gray 1px solid; z-index: 149; left: 49px; border-left: gray 1px solid;
        border-bottom: gray 1px solid; position: absolute; top: 573px" Width="384px">
        <asp:Label ID="msg" runat="server" Height="36px" Style="z-index: 100; left: 17px;
            position: absolute; top: 6px" Text="Label" Width="354px"></asp:Label>
        <asp:TextBox ID="TextTrans" runat="server" Height="34px" Style="z-index: 101; left: 16px;
            position: absolute; top: 48px" TextMode="MultiLine" Width="349px"></asp:TextBox>
        <asp:LinkButton ID="LinkTransfer" runat="server" Style="z-index: 103; left: 337px;
            position: absolute; top: 92px">登録</asp:LinkButton>
    </aspanel>
    <%--CollapsiblePanelコントロールの諸設定--%>
    <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
     TargetControlID="pc" ExpandControlID="ph" CollapseControlID="ph"
      AutoCollapse="true" AutoExpand="true" Collapsed="false" ExpandDirection="Vertical" />

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

 

よろしくお願い致します。

Answer 3

 

<asp:Label ID="msg" …

の位置がおかしいと思います。

pcのパネルではなくphのパネルに入らないといけないのではないですかね。

 

一度、新しくプロジェクトを作って、サイトどおりに作って動くかどうか、

というところからやられたほうがいいかとおもいますよ。

Answer 4

はなはなはな　さま

ありがとうございます。

 

はなはなはな さんからの引用

pcのパネルではなくphのパネルに入らないといけないのではないですかね。

 

phのパネルをクリックするとテキストボックス・ラベル・ボタンが表示されるといった

動作を希望していたのでpcでいいかとおもいます。

 

はなはなはな さんからの引用

一度、新しくプロジェクトを作って、サイトどおりに作って動くかどうか、 というところからやられたほうがいいかとおもいますよ。

そうですね...

何回かやってみたのですが(^ ^;

もう１度トライしてみます。

Answer 5

ICE AGE さんからの引用

phのパネルをクリックするとテキストボックス・ラベル・ボタンが表示されるといった 動作を希望していたのでpcでいいかとおもいます。

 

そうするとcpeのTextLabelIDには何を指定されてますか？

TextLabelIDかImageControlIDに指定したコントロールをクリックすると表示、非表示の動作をするんですよ。

 

 

追記）なくても動きますね。すみません。

Answer 6

提示していただいたプログラムを動かしてみました。

ただし、サイトはプロジェクトテンプレートのASP.NET AJAX-Enabled　Web Siteを使って作成しました。

提示していただいたままだと左下に折りたたむパネルが表示され、実際に折りたたんだり、展開したりできました。

ただし、ものすごく縦の高さが小さいですが。なので折りたたむパネル内の3つのコントロールのpositino属性をstaticに変えると縦幅がコントロールを表示できるサイズになって動作するようになりました。

 

Code Snippet

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>...略

        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <%--折り畳みパネル操作のためのパネルを定義--%>
            <asp:Panel ID="ph" runat="server" CssClass="collapsePanelHeader" Height="19px" Style="z-index: 147;
                left: 49px; border-top-style: none; border-right-style: none; border-left-style: none;
                position: absolute; top: 554px; background-color: #ccccff; border-bottom-style: none"
                Width="386px">
            </asp:Panel>
            <%--開閉する対象のパネルを定義--%>
            <asp:Panel ID="pc" runat="server" CssClass="collapsePanel" Height="226px" Style="border-right: gray 1px solid;
                border-top: gray 1px solid; z-index: 149; left: 49px; border-left: gray 1px solid;
                border-bottom: gray 1px solid; position: absolute; top: 573px; bottom: 700px;"
                Width="384px">
                <asp:Label ID="msg" runat="server" Height="36px" Style="z-index: 100; left: 17px;
                    position: static; top: 6px" Text="Label" Width="354px"></asp:Label>
                <asp:TextBox ID="TextTrans" runat="server" Height="34px" Style="z-index: 101; left: 16px;
                    position: static; top: 48px" TextMode="MultiLine" Width="349px"></asp:TextBox>
                <asp:LinkButton ID="LinkTransfer" runat="server" Style="z-index: 103; left: 337px;
                    position: static; top: 92px">登録</asp:LinkButton>
            </asp:Panel>
            <%--CollapsiblePanelコントロールの諸設定--%>
            <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="pc"
                ExpandControlID="ph" CollapseControlID="ph" AutoCollapse="true" AutoExpand="true"
                Collapsed="false" ExpandDirection="Vertical" />
        </div>

 

 

なので、提示していただいたままでも動くことは動くので、まったく動作しないなら、ASP.NET AJAXを使用するための構成がおかしいのかもしれませんね。

Answer 7

handcraft　さま

 

ありがとうございます！

 

分かりました！

 

handcraft さんからの引用

提示していただいたプログラムを動かしてみました。 ただし、サイトはプロジェクトテンプレートのASP.NET AJAX-Enabled　Web Siteを使って作成しました。

 

ASP.NET AJAX-Enabled　Web Siteをテンプレートで呼び出して作ると動きました。

 

謎が解けてすっきりました。

ありがとうございます。

 

皆様ありがとうござました。

 

ASP.NET AJAX-Enabled　Web Siteにて作成したWEBサイトでAJAXを使わない

普通のaspxファイルを作成しても問題ないのでしょうか？

 

この１点だけご教示下さい。

Answer 8

ICE AGE さんからの引用

ASP.NET AJAX-Enabled　Web Siteにて作成したWEBサイトでAJAXを使わない 普通のaspxファイルを作成しても問題ないのでしょうか？   この１点だけご教示下さい。

 

問題はありません。

Asp.NET AJAX-Enabled Web Siteを使って作成すると、既定で作成されるWeb.configがASP.NET AJAXに対応するように構成ます。それ以外はAJAX対応のフォームやマスターページを作成すると既定でScriptManagerが配置されるようになるくらいだったはずです。ScriptManagerのないフォームを作成すれば、通常のフォームと変わりありません。

 

私は、既存のプロジェクトからASP.NET AJAXに対応したサイトに移行したことがあるのですが、そのときはAJAX-Enabled　Web Siteで作成されるWeb.configと地道に差分をとってWeb.configを構成して動くようになりましたよ(たしか)。

Answer 9

handcraft　さま

 

ありがとうございます！

handcraft さんからの引用

問題はありません。 Asp.NET AJAX-Enabled Web Siteを使って作成すると、既定で作成されるWeb.configがASP.NET AJAXに対応するように構成ます。それ以外はAJAX対応のフォームやマスターページを作成すると既定でScriptManagerが配置されるようになるくらいだったはずです。ScriptManagerのないフォームを作成すれば、通常のフォームと変わりありません。

仰るとおりちゃんと動きました。

 

ご丁寧にご教示頂きました事感謝致します。

 

本当にありがとうございました！