articles

Home / DeveloperSection / Articles / Panel Control in ASP.Net

Panel Control in ASP.Net

Pushpendra Singh8110 27-Oct-2010

The Panel Web server control is used to contain other controls, say a set of radio buttons, check boxes, etc. This is a very useful control which allows us to show or hide a group of controls at once.

<asp:Panel ID="Panel1" runat="server">
 </asp:Panel>


Panel Control in ASP.Net

Properties

Property

Description

BackImageUrl

Specifies a URL to an image file to display as a background for this control

Direction

Specifies the content display direction of the Panel

ScrollBars

Specifies the position and visibility of scroll bars in the Panel

Panel Control in ASP.Net

We can change the appearance of panel; we can set the image in the background of panel

Panel Control in ASP.Net

 

Panel Control in ASP.Net

Example

Personal information is specified in Panel1 and contact information is specified in panel2.

Here two link buttons are used to show information of panel1 and panel2.

 

        <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Personal information</asp:LinkButton>
        <asp:LinkButton ID="LinkButton2" runat="server" onclick="LinkButton2_Click">contact information</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" Font-Bold="True" Font-Underline="False"
            ForeColor="Red" Height="202px" BackColor="#99FFCC" Width="267px">
            <span class="style1">Personal Information<br />
            Name&nbsp;&nbsp;&nbsp;&nbsp; </span>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <br class="style1" />
            <span class="style1">&nbsp;Id&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br class="style1" />
            <span class="style1">&nbsp;Country</span><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <br class="style1" />
            <span class="style1"></span>
            <asp:Button ID="Button1" runat="server" Text="Save" />
            <br />
        </asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="202px" BackColor="#66FF99"
        Width="268px">
        <b>&nbsp;contact Information<br />
        <br />
        &nbsp;mob. no </b>
        <asp:TextBox ID="TextBox4" runat="server" CssClass="style2"></asp:TextBox>
        <b>
        <br />
        email id&nbsp; </b>
        <asp:TextBox ID="TextBox5" runat="server" CssClass="style2"></asp:TextBox>
        <b>
        <br />
         </b>
    <asp:Button ID="Button2" runat="server" CssClass="style2" Text="save" />
        <br />
    </asp:Panel>
 
protected void Page_Load(object sender, EventArgs e)
    {
        Panel1.Visible = false;
        Panel2.Visible = false;
    }
    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        Panel1.Visible = true;
        Panel2.Visible = false;
    }
    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        Panel1.Visible = false;
        Panel2.Visible = true;
    }


 When you click personal information LinkButton then personal information panel will show.

Panel Control in ASP.Net

 When you click contact information link button then contact information panel will show.

Panel Control in ASP.Net


Updated 07-Sep-2019

Leave Comment

Comments

Liked By