如何最大化/最小化 Web 应用程序中 asp.net 单独的部分

本文关键字：net asp 单独 应用程序 最大化 最小化 Web | 更新日期: 2023-09-27 18:35:21

我正在开发一个 ASP.NET 网页，因为我想显示数据，因为它在附加的链接中。所以请通过它。所以我也希望在我的"我们页面"中使用类似的功能。

正如我们在这里看到的，我有单独的部分用于商店详细信息，POS详细信息，注册银行详细信息等。如果我点击 +/- 符号，我应该能够最大化和最小化该特定部分。

其实我对 Asp.net 很陌生，我自己学到的东西到目前为止，没有人在这里指导我。所以我不知道该怎么做？要做什么以及我需要从 Visual Studio 中的工具箱中选择哪些项。我对PAnel Control 有想法，但是使用面板控制，我无法在这里获得最大化和最小化功能。请帮帮我.

谢谢

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

如何最大化/最小化 Web 应用程序中 asp.net 单独的部分

为此，您可以使用 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>

在网络配置中

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

如果这解决了您的问题，请将此答案标记为有用。

相关文章：