如何最大化/最小化asp.net Web應用程序中的單獨部分

Question

我正在開發一個ASP.NET網頁，因為它要顯示數據，如附件鏈接中所示。 因此，請仔細閱讀。 因此，我也希望在我的We Page中具有類似的功能。

正如我們在這里看到的，我有一個單獨的部分，分別是商店詳細信息，POS詳細信息，注冊銀行詳細信息等等。 如果單擊+/-符號，則應該可以最大化和最小化該特定部分。

實際上，我對Asp.net還是陌生的，到目前為止我還只是自己學到東西，沒有人來指導我。 所以我不知道該怎么做？ 該怎么辦，我需要從Visual Studio的工具箱中選擇哪些項目。 我對PAnel Control有所了解，但是使用面板控制時，我無法在此處獲得最大化和最小化功能。 請幫幫我。

謝謝

！（ http://imageshack.us/content_round.php?page=done&l=img542/4391/spx1.png ）

Answer 1

為此，您可以使用AJAX Toolkit控件 （ToolkitScriptManager和CollapsiblePanelExtender）。 為此，請執行以下步驟：

（1）從了解和下載AJAX工具包
http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesamplesite/或
http://www.asp.net/ajaxlibrary/act.ashx或
http://www.stackoverflow.com/questions/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012
（2） 將工具箱添加到項目中，並使用該工具箱的任何控件創建一個示例
（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>

在Web配置中

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

希望對您有幫助。 我建議先學習AJAX工具包，然后將其添加到工具箱中，然后嘗試上面的代碼。

另一種方法是使用如下所示的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>

如果可以解決您的問題，請將此答案標記為有用。