Вы находитесь на странице: 1из 31

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