asp.net 웹 응용 프로그램에서 개별 섹션을 최대화/최소화하는 방법

Question

첨부 된 링크에있는대로 데이터를 표시하려는 ASP.NET 웹 페이지를 하나 개발하고 있습니다. 그래서 그것을 통해 가십시오. 그래서 우리 We Page에서도 비슷한 기능을 원합니다.

여기서 볼 수 있듯이 상점 세부 사항, POS 세부 사항, 등록 된 은행 세부 사항 등을위한 별도의 섹션이 있습니다. 그리고 +/- 기호를 클릭하면 특정 부분을 최대화하고 최소화 할 수 있어야합니다.

사실 저는 Asp.net에 아주 익숙합니다. 나는 지금까지만 배웠습니다. 아무도 나를 안내하지 못했습니다. 그래서 어떻게 해야할지 모르겠다. Visual Studio의 도구 상자에서 수행 할 작업과 항목을 선택해야합니다. PAnel 컨트롤에 대한 아이디어가 있지만 패널 컨트롤을 사용하면 여기에서 기능을 최대화하고 최소화 할 수 없습니다. 도와주세요.

감사

! ( http://imageshack.us/content_round.php?page=done&l=img542/4391/spx1.png) 당신이 사용할 수있는이 들어

Answer 1

는 AJAX Toolkit은 (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> 

,691 웹 설정

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

에서 363,210

나는이 5 월 당신을 도움이되기를 바랍니다. 먼저 AJAX Toolkit을 배우고 도구 상자에 추가 한 다음 위의 코드를 시도해 보는 것이 좋습니다.

또 다른 방법은 아래와 같이 자바 스크립트를 사용하고 있습니다 :

자바 스크립트

<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> 

영문 또는 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> 

이 응답 유용 표시해주십시오.