0

添付のリンクにあるように、データを表示したいという点で、1 つの ASP.NET Web ページを開発しています。ですから、それを通過してください。したがって、We Page にも同様の機能が必要です。

ここでわかるように、店舗の詳細、POS の詳細、登録銀行の詳細などの個別のセクションがあります。+/- 記号をクリックすると、その特定のセクションを最大化および最小化できるはずです。

実際、私は Asp.net に非常に慣れていません。これまでのところ、自分で物事を学んだだけです。誰も私を案内してくれません。だから私はこれを行う方法がわかりませんか?何をすべきか、Visual Studio のツールボックスからどの項目を選択する必要があるか。PAnel Control についての考えはありますが、パネル コントロールを使用すると、ここで機能を最大化および最小化することができません。私を助けてください 。

ありがとう

!( http://imageshack.us/content_round.php?page=done&l=img542/4391/spx1.png )

4

1 に答える 1

0

これには、AJAX Toolkit コントロール(ToolkitScriptManager および CollapsiblePanelExtender) を使用できます。そのためには、次の手順を実行します。

(1) AJAX Toolkit について学び、 http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/または
http://www.asp.net/ajaxlibrary/act.ashxまたは
http://www.stackoverflow.com/からダウンロードします
。 question/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012
(2)プロジェクトにツールキットを追加し、ツールキットの任意の 1 つのコントロールで 1 つの例を作成します
(3)必要に応じて以下の例を試してください

<cc1:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
    </cc1:ToolkitScriptManager>
    <asp:Panel ID="pnlCPTop" runat="server" Width="500">
        <table width="100%">
            <tr>
                <td>
                    POS DETAILS
                </td>
                <td align="right" valign="top">
                    <asp:Label ID="lblTop" runat="server">(Show Details...)</asp:Label>
                    <asp:ImageButton ID="imgTop" runat="server" AlternateText="(Show Details...)" ImageUrl="App_Themes/Default/images/expand_blue.jpg" />
                </td>
            </tr>
        </table>
    </asp:Panel>
    <asp:Panel ID="pnlTop" runat="server" Width="500">
        <table width="100%">
            <tr>
                <td>
                    TID :
                </td>
                <td>
                    abc...
                </td>
                <td>
                    Name :
                </td>
                <td>
                    xyz ...
                </td>
            </tr>
        </table>
    </asp:Panel>
    <cc1:CollapsiblePanelExtender ID="cpTop" runat="server" TargetControlID="pnlTop"
        BehaviorID="cpTop" CollapseControlID="pnlCPTop" Collapsed="False" CollapsedImage="App_Themes/Default/images/expand_blue.jpg"
        CollapsedText="(Show Details...)" ExpandControlID="pnlCPTop" ExpandedImage="App_Themes/Default/images/collapse_blue.jpg"
        ExpandedText="(Hide Details...)" ImageControlID="imgTop" SuppressPostBack="True"
        TextLabelID="lblTop">
    </cc1:CollapsiblePanelExtender>

ウェブ設定で

<system.web>
 <pages>
      <controls>
        <add tagPrefix="cc1" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />

これがお役に立てば幸いです。最初に AJAX Toolkit を学習してから、ツール ボックスに追加してから上記のコードを試すことをお勧めします。

別の方法は、以下のように JavaScript を使用することです。

JavaScript

<script type="text/javascript">
        function funHide() {
            document.getElementById('imgShow').style.display = 'block';
            document.getElementById('trPOSDETAILS').style.display = 'none';
            document.getElementById('imgHide').style.display = 'none';
        }
        function funShow() {
            document.getElementById('imgShow').style.display = 'none';
            document.getElementById('trPOSDETAILS').style.display = 'block';
            document.getElementById('imgHide').style.display = 'block';
        }
    </script>

aspx または html

<table width="500px">
        <tr>
            <td colspan='3'>
                POS DETAILS
            </td>
            <td align="right">
                <img id='imgShow' src='App_Themes/Default/images/expand_blue.jpg' alt='Show Details...' onclick="funShow()" style='display:none;'/>
                <img id='imgHide' src='App_Themes/Default/images/collapse_blue.jpg' alt='Hide Details...' onclick="funHide()" />
            </td>
        </tr>
        <tr id="trPOSDETAILS">
            <td>TID :</td>
            <td>abc...</td>
            <td>Name :</td>
            <td>xyz ...</td>
        </tr>
    </table>

これで問題が解決する場合は、この回答を有用とマークしてください。

于 2013-10-14T05:47:13.737 に答える