ARTICLE

Show and Hide the contol Panel in ASP.NET

Posted by Sapna in Articles | ASP.NET using VB.NET on December 29, 2010

Tags: ASP.NET, ASP.NET Panel, Hide Panel in ASP.NET, Show and Hide the contol Panel in ASP.NET, Show Panel in ASP.NET

This article will show you how to display or hide ASP.NET Control Panels on the web page.

Tweet
1405
0

Reader Level: Beginner

This article will show you how to display or hide ASP.NET Control Panels on the web page.

Code Snippets

<%@ Page Language="vb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
   Panel1.Visible = false
     Label1.Text = "Panel is now hide"
End Sub
  protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Panel1.Visible = True
    Label1.Text = "Panel is now visible"
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Hide/Show Panel</title>
<body>
  <div>
   <h3 style="color:DarkBlue; font-style:normal; font-family: 'Franklin Gothic Medium';">Hide and Show Panel</h3>
    <asp:Label
      ID="Label1"
      runat="server"
      ForeColor="Red"
      Font-Size="Large"
      Font-Bold="True"
      Font-Italic="True"
    ></asp:Label>
    <br /><br />
    <asp:Panel
      ID="Panel1"
    runat="server"
      Height="148px"
      Width="163px"
    HorizontalAlign="Center"
      ForeColor="#0033CC"
      BackColor="#CCFFFF"
      Font-Size="Large" BorderStyle="Solid"
     >
     <asp:Label ID="Label2" runat="server" Text="Name"></asp:Label>
     <asp:TextBox ID="TextBox1" runat="server" Width="160px">Rahul Kumar</asp:TextBox>
     <asp:Label ID="Label3" runat="server" Text="Email Id"></asp:Label>
     <asp:TextBox ID="TextBox2" runat="server" Width="158px">RK_123@yahoo.com</asp:TextBox>
     <asp:Label ID="Label4" runat="server" Text="Password"></asp:Label>
     <asp:TextBox ID="TextBox3" runat="server" Width="160px" Font-Bold="True"
      Font-Size="Medium" TextMode="Password">*******</asp:TextBox>
     </asp:Panel>
     <br /><br />
     <asp:Button
      ID="Button1"
      runat="server"
      ForeColor="DarkBlue"
      Text="Hide Panel"
      Height="31px"
      OnClick="Button1_Click"
      Font-Bold="true"
     />
     <asp:Button
      ID="Button2"
      runat="server"
      ForeColor="DarkBlue"
      Text="Visible Panel"
      Height="31px"
    OnClick="Button2_Click"
     />
   </div>
</form>
</body>
</html>

Control Panel in Visible Mode

Hide Panel

When user click on Hide Panel button the panel programmatically hide on the page and user will have press the Visible Panel button to show the panel.

Hope this will help you.