Introduction

This article demonstrates how to create and use a Panel Control in ASP.NET with C#. This article starts with the introduction of the panel in ASP.NET. After that, it demonstrates how to position the click event handler of a panel.

Creating a Panel

The Panel tag is,

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

Panel control is derived from the WebControl class. Hence it inherits all the properties, methods and events of the same. It does not have any method or event of its own.

Steps

The source code snippet creates a panel control and sets the name and content of a Pannel control.

We can take an example of online payment mode for panel control in this. There are 3-4 panels; after selecting any option the respective panel appears on screen.

So if you select the 1st radio button then it will show you panel 1 ,similarly if you select the 2nd radio button then it will show you panel 2 , if you select the 3rd radio button then it will show you panel 3, and if you select the 4th radio button then it will show you panel 4.

Codes

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title>Pannel Control</title>
  7. <style type="text/css">
  8. .style1
  9. {
  10. text-align: center;
  11. background-color: #999999;
  12. }
  13. .style2
  14. {
  15. background-color: #999999;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <form id="form1" runat="server">
  21. <div>
  22. <table class="style3" align="center">
  23. <tr>
  24. <td class="style1">
  25. <strong style="background-color: #999999">Payment Mode</strong></td>
  26. </tr>
  27. <tr>
  28. <td class="style2">
  29. <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
  30. onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
  31. <asp:ListItem>Via Debit Card</asp:ListItem>
  32. <asp:ListItem>Via Credit Card</asp:ListItem>
  33. <asp:ListItem>Via Internet Banking</asp:ListItem>
  34. <asp:ListItem>Via Cash On Delivery</asp:ListItem>
  35. </asp:RadioButtonList>
  36. </td>
  37. </tr>
  38. <tr>
  39. <td class="style2">
  40. <asp:Panel ID="Panel1" runat="server" CssClass="style2">
  41. Bank
  42. <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
  43. <asp:ListItem>SBI</asp:ListItem>
  44. <asp:ListItem>PNB</asp:ListItem>
  45. <asp:ListItem>CBI</asp:ListItem>
  46. <asp:ListItem>BOI</asp:ListItem>
  47. </asp:DropDownList>
  48. <br />
  49. Card No
  50. <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
  51. <br />
  52. CVV No
  53. <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
  54. </asp:Panel>
  55. </td>
  56. </tr>
  57. <tr>
  58. <td class="style2">
  59. <asp:Panel ID="Panel2" runat="server" CssClass="style2">
  60. Bank
  61. <asp:DropDownList ID="DropDownList3" runat="server">
  62. <asp:ListItem>SBI</asp:ListItem>
  63. <asp:ListItem>IOB</asp:ListItem>
  64. </asp:DropDownList>
  65. <br />
  66. Card No
  67. <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
  68. </asp:Panel>
  69. </td>
  70. </tr>
  71. <tr>
  72. <td class="style2">
  73. <asp:Panel ID="Panel3" runat="server" CssClass="style2">
  74. Bank
  75. <asp:DropDownList ID="DropDownList4" runat="server">
  76. <asp:ListItem>SBI</asp:ListItem>
  77. <asp:ListItem>IOB</asp:ListItem>
  78. <asp:ListItem>CBI</asp:ListItem>
  79. <asp:ListItem>PNB</asp:ListItem>
  80. <asp:ListItem>HDFC</asp:ListItem>
  81. </asp:DropDownList>
  82. </asp:Panel>
  83. </td>
  84. </tr>
  85. <tr>
  86. <td class="style2">
  87. <asp:Panel ID="Panel4" runat="server" CssClass="style2">
  88. Pay Bill on Delivery Time
  89. <asp:Button ID="Button5" runat="server" Text="I Agree" />
  90. </asp:Panel>
  91. </td> </tr></table>
  92. </div>
  93. </form>
  94. </body>
  95. </html>

The design looks like Figure 1.

Panel Control In ASP.NET
Figure 1

code

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  8. public partial class Default3 : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  12. Panel1.Visible = false;
  13. Panel2.Visible = false;
  14. Panel3.Visible = false;
  15. Panel4.Visible = false;
  16. }
  17. protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
  18. {
  19. if (RadioButtonList1.SelectedIndex == 0)
  20. {
  21. Panel1.Visible = true;
  22. }
  23. if (RadioButtonList1.SelectedIndex == 1)
  24. {
  25. Panel2.Visible = true;
  26. }
  27. if (RadioButtonList1.SelectedIndex == 2)
  28. {
  29. Panel3.Visible = true;
  30. }
  31. if (RadioButtonList1.SelectedIndex == 3)
  32. {
  33. Panel4.Visible = true;
  34. }
  35. }}

Output

The output of the panel in the browser is like figure 2.

Panel Control In ASP.NET
Figure 2

When you click on any option, like Debit Card, the Debit Card Panel appears like Figure 3,

Panel Control In ASP.NET
Figure 3

And when you click on another option like figure 4:

Panel Control In ASP.NET
Figure 4

Summary

In this article, I discussed how we can create a Panel Control in ASP.NET with C#. We saw how with the help of Radio Button, we can control the panel and we can first set the panel invisible and on every radio button, they are seperately visible.