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

Question

我正在開發一個ASP.NET Web頁面，因爲我想顯示數據，因爲它在附加的鏈接中。所以請通過它。 所以我想在我的網頁中也有類似的功能。

正如我們在這裏看到的，我爲商店詳情，POS詳細信息，註冊銀行詳細信息等單獨部分。如果我點擊+/-符號，我應該能夠最大化和最小化該特定部分。

其實我對asp.net來說很新，我到目前爲止只有自己學過東西，沒有人來指導我。 所以我不知道如何做到這一點？ 該怎麼做，我需要從Visual Studio中的工具箱中選擇哪些項目。 我有關於PAnel控制的想法，但面板控制我不能在這裏獲得最大化和最小化功能。 請幫我一把。

感謝

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

Answer 1

爲此，您可以使用AJAX工具包控制（ToolkitScriptManager和CollapsiblePanelExtender）。而對於那些以下步驟：

（1）學習和
http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/或
http://www.asp.net/ajaxlibrary/act.ashx或
下載AJAX工具包 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 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> 

如果這可解決問題，請標誌着這個答案非常有用。