1111

Creating ASPX Controls Programatically

2 2 2 2

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.

3

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.

5

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.

6

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.

7

Panel Demo

Create a new C# ASP.NET empty web site with the name Panel_Demo.

Add Default.aspx

9

Panel Demo

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

slide.

10

The Panel

11

Source View

12

Edit Source

position:static means “no special positioning” Follow the normal rules of HTML

13

Add Text Inside Panel

14

App Running

Try resizing the window.

15

What the Browser Received

16

Effects of Properties

Experiment with property values:

HorizontalAlign Wrap Height Width Padding

17

Dynamic Controls

Let’s 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.

Options for 0 – 4 labels

A second new DropDownList will add a specified number of CheckBoxes.

Options for 0 – 4 CheckBoxes

Also a CheckBox that will hide the panel And a Button to refresh the panel

18

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>

19

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>

20

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>

21

Design View

22

Code for Dynamic Update

using System;

using System.Web;

using System.Web.UI;

using 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 />"));

}

}

Try it!

23

Page in Chrome

24

After Clicking “Refresh Panel”

25

Hiding the Panel

After clicking “Refresh Panel”

26

Refresh Panel Button

We didn’t add an event handler for the “Refresh Panel” button.

How did it work? Why was it needed?

27

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 />"));

}

28

After Clicking “Refresh Panel”

29

Automatic Scrollbar

Resize window. Look at the effect of making the window wider and more narrow.

30

Automatic Scrollbar

End of Presentation

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