c# - 如何在单个页面上的按钮上应用面板

Question

有三个按钮，现在有三个面板，如果我点击按钮一然后显示面板一，如果在第二个然后第二个和第三个相同，那么可能是什么条件。？

Answer 1

使用javascripts可能很容易。asp.net的方式可以是：

将按钮保留在面板之外。

EnableViewState将属性标记true为 aspx 上的所有面板，例如：

<asp:Panel id="panel1" EnableViewstate = "true" runat="server">
...
</asp:Panel>

在Page_Load方法上，添加：

if(!IsPostBack)
{
   panel1.Visible = false;
   panel2.Visible = false;
   panel3.Visible = false;
}

现在在按钮处理程序中，只需将相关面板的Visible属性更改为true和其他人false喜欢：

protected void btn1_click(object sender, EventArgs e)
{
   panel1.Visible = true;
   panel2.Visible = false;
   panel3.Visible = false;
}

Answer 2

有很多方法可以做到这一点。例如，下面的代码将在单击按钮 1 时显示面板 1，如果单击按钮 2 则显示面板 2 等等。这只是完成您所要求的快速而肮脏的方法。

    <asp:Button ID="Button1" runat="server" AssociatedPanelClass="Panel1" Text="Button 1" class="btn" />
    <asp:Button ID="Button2" runat="server" AssociatedPanelClass="Panel2" Text="Button 2" class="btn" />
    <asp:Button ID="Button3" runat="server" AssociatedPanelClass="Panel3" Text="Button 3" class="btn" />

    <asp:Panel ID="Panel1" runat="server" class="panel panel1 selected">
        <asp:Label ID="Label1" runat="server" Text="Label" >Panel 1</asp:Label>
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" class="panel panel2">
        <asp:Label ID="Label2" runat="server" Text="Label" >Panel 2</asp:Label>
    </asp:Panel>
    <asp:Panel ID="Panel3" runat="server" class="panel panel3">
        <asp:Label ID="Label3" runat="server" Text="Label" >Panel 3</asp:Label>
    </asp:Panel>

    <script type="text/javascript">
        function showHide() {
            $(".panel").hide();//hide all panels
            $(".selected").show();//show the selected panel
        }
        $(document).ready(function () {
            showHide();//show the default panel
            $(".btn").click(function () {//assign a click handler to the buttons
                $(".selected").removeClass("selected");//remove class from previously selected panel
                switch ($(this).attr("AssociatedPanelClass")) {//assign new panel the selected class
                    case "Panel1":
                        $(".panel1").addClass("selected");
                        break;
                    case "Panel2":
                        $(".panel2").addClass("selected");
                        break;
                    case "Panel3":
                        $(".panel3").addClass("selected");
                        break;
                }
                showHide();//hide and display selected
                return false;//return false to avoid a postback
            });
        });
    </script>