Creating ASPX Controls Programatically

Objectives

You will be able to

Dynamically add controls to a page.

Dynamically alter properties of controls.
Use the Panel control as a container for other controls.

Panel Demo

Example of dynamically creating controls and

adding them to a page.

Also using a Panel control as a container for other controls.

An alternative way to put new HTML onto a

page at run time.

Rather than outputting HTML directly, we add

control objects to the internal representation of the
page in server memory.
They output HTML during the render phase of the
page life cycle on the server.

Adding ASPX Controls Dynamically

Think about what would happen if we

used Response.Write( ) to add an ASPX
control to the page.
To add a dynamically created ASPX
control to the page we have to add it to
the data structure in server memory that
is the internal representation of the page.

Panel Demo

The Panel control is a container for other

controls.

Use it to put a border around a group of

related controls.
Can set styling, position, and visibility for the
entire group by setting properties of the
panel.
Provides a convenient way to add controls to
the page dynamically.

Panel Demo

We will create a page with a panel

control containing some static text.
Dropdown lists permit the user to

Add 1 4 labels to the panel.

Add 1 4 textboxes to the panel.

CheckBox permits user to hide the panel.

Panel Demo

Create a new C# ASP.NET empty web site

with the name Panel_Demo.

Add Default.aspx

Panel Demo

View the Toolbox.

Expand the Standard section.
Add a Panel to the <div>.
Set its properties as shown on the next slide.

The Panel

10

Source View

11

Edit Source

position:static means no special positioning

Follow the normal rules of HTML

12

Add Text Inside Panel

13

App Running

Try resizing the window.

14

What the Browser Received

15

Effects of Properties

Experiment with property values:

HorizontalAlign
Wrap
Height
Width
Padding

16

Dynamic Controls

Lets add some controls that will have the effect of

adding other controls to the panel dynamically.
A new DropDown List will add a specified number of
labels to the panel.

A second new DropDownList will add a specified

number of CheckBoxes.

Options for 0 4 labels

Options for 0 4 CheckBoxes

Also a CheckBox that will hide the panel

And a Button to refresh the panel
17

Dynamic Controls

</asp:Panel>
<table>
<tr>
<td>
Number of Labels:
</td>
<td>
<asp:DropDownList ID="ddlLabels" runat="server">
<asp:ListItem Text="0" Value="0" />
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="3" />
<asp:ListItem Text="4" Value="4" />
</asp:DropDownList>
</td>
</tr>
18

Dynamic Controls
<tr>
<td>
Number of TextBoxes:
</td>
<td>
<asp:DropDownList ID="ddlBoxes" runat="server">
<asp:ListItem Text="0" Value="0" />
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="3" />
<asp:ListItem Text="4" Value="4" />
</asp:DropDownList>
</td>
</tr>

19

Dynamic Controls
<tr>
<td colspan=2> &nbsp; </td>
</tr>
<tr>
<td>
<asp:CheckBox id="cbHide" runat="server"
text="Hide Panel" />
</td>
<td>
<asp:Button ID="btnRefreshPanel" runat="server"
text="Refresh Panel" />
</td>
</tr>
</table>

20

Design View

21

Code for Dynamic Update

using
using
using
using

System;
System.Web;
System.Web.UI;
System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
pnlDynamic.Visible = !cbHide.Checked;
int numLabels = int.Parse(ddlLabels.SelectedItem.Value);
for (int i = 1; i <= numLabels; i++)
{
Label lbl = new Label();
lbl.Text = "Label" + i.ToString();
lbl.ID = "Label" + i.ToString();
pnlDynamic.Controls.Add(lbl);
pnlDynamic.Controls.Add(new LiteralControl("<br />"));
}
}

22

Page in Chrome

23

After Clicking Refresh Panel

24

Hiding the Panel

After clicking Refresh Panel

25

Refresh Panel Button

We didnt add an event handler for the

Refresh Panel button.

How did it work?

Why was it needed?

26

Code to Add TextBoxes

Add to Page_Load:

// Generate TextBox controls

int numBoxes = int.Parse(ddlBoxes.SelectedItem.Value);
for (int i = 1; i <= numBoxes; i++)
{
TextBox tb = new TextBox();
tb.Text = "TextBox" + i.ToString();
tb.ID = "TextBox" + i.ToString();
pnlDynamic.Controls.Add(tb);
pnlDynamic.Controls.Add(new LiteralControl("<br />"));
}

27

After Clicking Refresh Panel

28

Automatic Scrollbar

Resize window. Look at the effect of making the

window wider and more narrow.
29

Automatic Scrollbar

End of Presentation

30

Summary

We can create ASPX controls dynamically

using C# code and add them to the page
before the page is translated into HTML.
We can dynamically modify controls
defined in the .aspx file in the Page_Load
event handler.

End of Presentation