1111 creating aspx controls programatically. 2222 objectives you will be able to dynamically add...
TRANSCRIPT
![Page 1: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/1.jpg)
1111
Creating ASPX Controls Programatically
![Page 2: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/2.jpg)
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.
![Page 3: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/3.jpg)
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.
![Page 4: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/4.jpg)
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.
![Page 5: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/5.jpg)
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.
![Page 6: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/6.jpg)
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.
![Page 7: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/7.jpg)
7
Panel Demo
Create a new C# ASP.NET empty web site with the name Panel_Demo.
![Page 8: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/8.jpg)
Add Default.aspx
![Page 9: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/9.jpg)
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.
![Page 10: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/10.jpg)
10
The Panel
![Page 11: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/11.jpg)
11
Source View
![Page 12: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/12.jpg)
12
Edit Source
position:static means “no special positioning” Follow the normal rules of HTML
![Page 13: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/13.jpg)
13
Add Text Inside Panel
![Page 14: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/14.jpg)
14
App Running
Try resizing the window.
![Page 15: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/15.jpg)
15
What the Browser Received
![Page 16: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/16.jpg)
16
Effects of Properties
Experiment with property values:
HorizontalAlign Wrap Height Width Padding
![Page 17: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/17.jpg)
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
![Page 18: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/18.jpg)
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>
![Page 19: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/19.jpg)
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>
![Page 20: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/20.jpg)
20
Dynamic Controls
<tr>
<td colspan=2> </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>
![Page 21: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/21.jpg)
21
Design View
![Page 22: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/22.jpg)
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!
![Page 23: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/23.jpg)
23
Page in Chrome
![Page 24: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/24.jpg)
24
After Clicking “Refresh Panel”
![Page 25: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/25.jpg)
25
Hiding the Panel
After clicking “Refresh Panel”
![Page 26: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/26.jpg)
26
Refresh Panel Button
We didn’t add an event handler for the “Refresh Panel” button.
How did it work? Why was it needed?
![Page 27: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/27.jpg)
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 />"));
}
![Page 28: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/28.jpg)
28
After Clicking “Refresh Panel”
![Page 29: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/29.jpg)
29
Automatic Scrollbar
Resize window. Look at the effect of making the window wider and more narrow.
![Page 30: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/30.jpg)
30
Automatic Scrollbar
End of Presentation
![Page 31: 1111 Creating ASPX Controls Programatically. 2222 Objectives You will be able to Dynamically add controls to a page. Dynamically alter properties of controls](https://reader035.vdocument.in/reader035/viewer/2022062620/551a44c95503463e778b509f/html5/thumbnails/31.jpg)
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