C# 如何在ASP.NET中创建客户端显示/隐藏面板_C#_Asp.net

C# 如何在ASP.NET中创建客户端显示/隐藏面板

c# asp.net

C# 如何在ASP.NET中创建客户端显示/隐藏面板,c#,asp.net,C#,Asp.net,我对ASP.NET还很陌生。我需要在ASP.NET中创建一个只包含文本的显示/隐藏面板。面板需要有滑动效果。我需要回邮。是否有任何内置控件可以做到这一点而无需回发此外，文本“Show”应更改为“Hide”，而不回发编辑：忘了提到我的应用程序中有几个这样的面板。你看过jQuery了吗您研究过jQuery吗你可以这样试试 <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="ser

我对ASP.NET还很陌生。我需要在ASP.NET中创建一个只包含文本的显示/隐藏面板。面板需要有滑动效果。我需要回邮。是否有任何内置控件可以做到这一点而无需回发

此外，文本“Show”应更改为“Hide”，而不回发

编辑：忘了提到我的应用程序中有几个这样的面板。

你看过jQuery了吗

您研究过jQuery吗

你可以这样试试

     <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
function Show1_onclick() {
document.getElementById('Panel1').style.display ='block';
document.getElementById('Panel2').style.display ='none';
document.getElementById('Hidden1').value = 'Panel1';
}

function Show2_onclick() {
document.getElementById('Panel1').style.display ='none';
document.getElementById('Panel2').style.display ='block';
document.getElementById('Hidden1').value = 'Panel2';
}

function StartUpScript()
{
    if (document.getElementById('Hidden1').value == 'Panel1')
    {
        document.getElementById('Panel1').style.display ='block';
        document.getElementById('Panel2').style.display ='none';
    }
    else if (document.getElementById('Hidden1').value == 'Panel2')
    {
        document.getElementById('Panel1').style.display ='none';
        document.getElementById('Panel2').style.display ='block';
    }
}
// -->
    </script>

</head>
<body onload="StartUpScript()">
    <form id="form1" runat="server">
        <div>
            <input id="Show1" language="javascript" onclick="return Show1_onclick()" type="button"
                value="Show1" />
            <input id="Show2" language="javascript" onclick="return Show2_onclick()" type="button"
                value="Show2" />
            <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
                <table id="Table1">
                    <tr>
                        <td style="width: 95px">
                            table1<br />
                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click1" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">
                <table id="Table2">
                    <tr>
                        <td style="width: 99px">
                            table2<br />
                            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Click2" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <input id="Hidden1" runat="server" type="hidden" />
        </div>
    </form>
</body>
</html>


无标题页
函数Show1_onclick（）{
document.getElementById（'Panel1'）.style.display='block'；
document.getElementById（'Panel2'）.style.display='none'；
document.getElementById（'Hidden1'）。值='Panel1'；
}
函数Show2_onclick（）{
document.getElementById（'Panel1'）.style.display='none'；
document.getElementById（'Panel2'）.style.display='block'；
document.getElementById（'Hidden1'）。值='Panel2'；
}
函数StartUpScript（）
{
if（document.getElementById（'Hidden1'）。值=='Panel1'）
{
document.getElementById（'Panel1'）.style.display='block'；
document.getElementById（'Panel2'）.style.display='none'；
}
else if（document.getElementById（'Hidden1'）。value=='Panel2'）
{
document.getElementById（'Panel1'）.style.display='none'；
document.getElementById（'Panel2'）.style.display='block'；
}
}
// -->
表1

表2

您可以这样尝试

     <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
function Show1_onclick() {
document.getElementById('Panel1').style.display ='block';
document.getElementById('Panel2').style.display ='none';
document.getElementById('Hidden1').value = 'Panel1';
}

function Show2_onclick() {
document.getElementById('Panel1').style.display ='none';
document.getElementById('Panel2').style.display ='block';
document.getElementById('Hidden1').value = 'Panel2';
}

function StartUpScript()
{
    if (document.getElementById('Hidden1').value == 'Panel1')
    {
        document.getElementById('Panel1').style.display ='block';
        document.getElementById('Panel2').style.display ='none';
    }
    else if (document.getElementById('Hidden1').value == 'Panel2')
    {
        document.getElementById('Panel1').style.display ='none';
        document.getElementById('Panel2').style.display ='block';
    }
}
// -->
    </script>

</head>
<body onload="StartUpScript()">
    <form id="form1" runat="server">
        <div>
            <input id="Show1" language="javascript" onclick="return Show1_onclick()" type="button"
                value="Show1" />
            <input id="Show2" language="javascript" onclick="return Show2_onclick()" type="button"
                value="Show2" />
            <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
                <table id="Table1">
                    <tr>
                        <td style="width: 95px">
                            table1<br />
                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click1" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">
                <table id="Table2">
                    <tr>
                        <td style="width: 99px">
                            table2<br />
                            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Click2" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <input id="Hidden1" runat="server" type="hidden" />
        </div>
    </form>
</body>
</html>


无标题页
函数Show1_onclick（）{
document.getElementById（'Panel1'）.style.display='block'；
document.getElementById（'Panel2'）.style.display='none'；
document.getElementById（'Hidden1'）。值='Panel1'；
}
函数Show2_onclick（）{
document.getElementById（'Panel1'）.style.display='none'；
document.getElementById（'Panel2'）.style.display='block'；
document.getElementById（'Hidden1'）。值='Panel2'；
}
函数StartUpScript（）
{
if（document.getElementById（'Hidden1'）。值=='Panel1'）
{
document.getElementById（'Panel1'）.style.display='block'；
document.getElementById（'Panel2'）.style.display='none'；
}
else if（document.getElementById（'Hidden1'）。value=='Panel2'）
{
document.getElementById（'Panel1'）.style.display='none'；
document.getElementById（'Panel2'）.style.display='block'；
}
}
// -->
表1

表2

ASP.Net具有可自定义主题和效果的控件，整个库非常值得一看。
ASP.Net具有可自定义主题和效果的控件，整个库非常值得一看。
但是我不是必须对页面中的所有面板重复此操作吗？但是我不是必须对页面中的所有面板重复此操作吗？