How to use Panel Control in ASP.Net C#

Panel control is a container of other control. We can place multiple web server control in Panel control and make same effect or action on all controlby applying effect of Panel Control.

Exmaple: if we want to Hide or visible more then one Control as same time, so we can place them to in Panle control and Just Visible or Hide Panle control the all the control will be Visible or Hide according to Panel Control.

Panel Control is a Container of web server control in ASP.Net.

Here, we understand Panel Control by tacking an Example in ASP.Net C#.

We tack an Example of Registration form for any website. Simple Registration Form has many part like Personal Detail, Address Detail, Login Detail. We first Fill up the Personal Detail and Click Next to Address Detail and Finally Login Detail.

The Panel Control is automatically exhaust the Space of web form.

First we design the Registration form in ASP.Net like:

<table style=”z-index: 100; left: 232px; width: 488px; position: absolute; top: 64px”>
<tr>
<td style=”width: 100px; height: 35px; text-align: left;”>
<strong><span style=”font-size: 18pt; color: #0000cc”>Panel Control Example in ASP.Net
C#</span></strong></td>
</tr>
<tr>
<td style=”width: 100px”>
<asp:Panel ID=”Panel1″ runat=”server”>
<asp:Panel ID=”Panel2″ runat=”server”>
<table style=”border-right: maroon thin solid; border-top: maroon thin solid; border-left: maroon thin solid;
border-bottom: maroon thin solid”>
<tr>
<td colspan=”2″ style=”text-align: center;  border-bottom: maroon thin solid”>
<span style=”font-size: 16pt”>Personal Detail :</span></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
Name :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
SureName :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox2″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
Gender :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox3″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
Mobile :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox4″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px; height: 26px”>
</td>
<td style=”width: 100px; height: 26px”>
<asp:Button ID=”Button1″ runat=”server” Text=”Next” Width=”72px” OnClick=”Button1_Click” /></td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID=”Panel3″ runat=”server” Visible=”False”>
<table style=”border-right: maroon thin solid; border-top: maroon thin solid; border-left: maroon thin solid;
border-bottom: maroon thin solid”>
<tr>
<td colspan=”2″ style=”text-align: center;  border-bottom: maroon thin solid”>
<strong><span style=”font-size: 16pt”>Address Detail :</span></strong></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
Address :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox5″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
City :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox6″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
Pincode :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox7″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px”>
</td>
<td style=”width: 100px”>
<asp:Button ID=”Button2″ runat=”server” Text=”Back” Width=”56px” OnClick=”Button2_Click” />
<asp:Button ID=”Button3″ runat=”server” Text=”Next” Width=”56px” OnClick=”Button3_Click” /></td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID=”Panel4″ runat=”server” Visible=”False”>
<table style=”border-right: maroon thin solid; border-top: maroon thin solid; border-left: maroon thin solid;
border-bottom: maroon thin solid”>
<tr>
<td colspan=”2″ style=”text-align: center;  border-bottom: maroon thin solid”>
<strong><span style=”font-size: 16pt”>Login Area :</span></strong></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
UserName :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox8″ runat=”server”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px; text-align: right;”>
Password :</td>
<td style=”width: 100px”>
<asp:TextBox ID=”TextBox9″ runat=”server” TextMode=”Password”></asp:TextBox></td>
</tr>
<tr>
<td style=”width: 100px; height: 21px”>
</td>
<td style=”width: 100px; height: 21px”>
<asp:Button ID=”Button4″ runat=”server” Text=”Back” Width=”56px” OnClick=”Button4_Click” />
<asp:Button ID=”Button5″ runat=”server” Text=”Submit” /></td>
</tr>
<tr>
<td style=”width: 100px”>
</td>
<td style=”width: 100px”>
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
</td>
</tr>
<tr>
<td style=”width: 100px”>
</td>
</tr>
</table>

The ASP.Net Panel Control output is like :

Here, we have Three Panel Control on asp.net web form. Here what we are going to do, just visible and Hide panel control according to the button click event.

Panel Control in ASP.Net with C#

Panel Control in ASP.Net with C#

Now when we run the website we need to display only one portion of Personal Detail at a time like:
After filling personal detail click the NEXT Button to fill Address Detail.

Panel Control in ASP.Net with C#

Panel Control in ASP.Net with C#

Write the below code on NEXT Button of Personal Panel Click Events:

protected void Button1_Click(object sender, EventArgs e)
{
Panel2.Visible = false;
Panel3.Visible = true;
Panel4.Visible = false;
}

The ASP.Net Panel Control Address Detail output is:

Panel Control in ASP.Net C#

Panel Control in ASP.Net C#

Now, we are at Address Detail Form, Click next button to Login Panel control.

Write below code on NEXT Button of Address Detail Click Event in ASP.Net

 protected void Button3_Click(object sender, EventArgs e)
{
Panel2.Visible = false;
Panel3.Visible = false;
Panel4.Visible = true;
}

Write the Below code on Back Button click event for go to Personal Detail from Address Detail.

protected void Button2_Click(object sender, EventArgs e)
{
Panel2.Visible = true;
Panel3.Visible = false;
Panel4.Visible = false;
}

The output of ASP.Net Panel Control Login Area is:

Panel Control in ASP.Net C#

Panel Control in ASP.Net C#

Write below code on Back Button to go to back on Address Detail from Login Panle.

 protected void Button4_Click(object sender, EventArgs e)
{
Panel2.Visible = false;
Panel3.Visible = true;
Panel4.Visible = false;
}

I hope you will enjoy this asp.net panel example……

Leave a Reply

Your email address will not be published. Required fields are marked *

5 + 9 =


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">