ASP.NET – Panel Controls
ASP.NET - Panel Controls
Advertisements
Previous Page
Next Page
The Panel control works as a container for other controls on the page. It controls the appearance and visibility of the controls it contains. It also allows generating controls programmatically.
The basic syntax of panel control is as follows:
<asp:Panel ID= "Panel1" runat = "server">
</asp:Panel>
The 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. However it has the following properties of its own:
BackImageUrl
URL of the background image of the panel.
DefaultButton
Gets or sets the identifier for the default button that is contained in the Panel control.
Direction
Text direction in the panel.
GroupingText
Allows grouping of text as a field.
HorizontalAlign
Horizontal alignment of the content in the panel.
ScrollBars
Specifies visibility and location of scrollbars within the panel.
Wrap
Allows text wrapping.
Working with the Panel Control
Let us start with a simple scrollable panel of specific height and width and a border style. The ScrollBars property is set to both the scrollbars, hence both the scrollbars are rendered.
The source file has the following code for the panel tag:
<asp:Panel runat="server" BorderColor="#990000" BorderStyle="Solid"
Borderstyle="width:1px" ScrollBars="Both">
This is a scrollable panel.
<br />
<br />
<asp:Button runat="server" Text="Button" />
</asp:Panel>
The panel is rendered as follows:
Example
The following example demonstrates dynamic content generation. The user provides the number of label controls and textboxes to be generated on the panel. The controls are generated programmatically.
Change the properties of the panel using the properties window. When you select a control on the design view, the properties window displays the properties of that particular control and allows you to make changes without typing.
The source file for the example is as follows:
<form runat="server">
<div>
<asp:Panel runat="server" BorderColor="#990000"
BorderStyle="Solid" Borderstyle="width:1px" ScrollBars="Auto" BackColor="#CCCCFF" Font-Names="Courier" HorizontalAlign="Center">
This panel shows dynamic control generation:
<br />
<br />
</asp:Panel>
</div>
<table>
<tr>
<td>No of Labels:</td>
<td>
<asp:DropDownList runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>No of Text Boxes :</td>
<td>
<asp:DropDownList runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem Value="1"></asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>
<asp:CheckBox runat="server"
Text="Make the Panel Visible" />
</td>
<td>
<asp:Button runat="server" Text="Refresh Panel" />
</td>
</tr>
</table>
</form>
The code behind the Page_Load event is responsible for generating the controls dynamically:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//make the panel visible
pnldynamic.Visible = chkvisible.Checked;
//generating the lable controls:
int n = Int32.Parse(ddllabels.SelectedItem.Value);
for (int i = 1; i <= n; i++)
{
Label lbl = new Label();
lbl.Text = "Label" + (i).ToString();
pnldynamic.Controls.Add(lbl);
pnldynamic.Controls.Add(new LiteralControl("<br />"));
}
//generating the text box controls:
int m = Int32.Parse(ddltextbox.SelectedItem.Value);
for (int i = 1; i <= m; i++)
{
TextBox txt = new TextBox();
txt.Text = "Text Box" + (i).ToString();
pnldynamic.Controls.Add(txt);
pnldynamic.Controls.Add(new LiteralControl("<br />"));
}
}
}
When executed, the panel is rendered as:
Previous Page
Next Page
Advertisements
