SynapseIndia creating asp controls programatically development SynapseIndia Drupal development, SynapseIndia Ecommerce development, SynapseIndia Sharepoint development, SynapseIndia PHP development, SynapseIndia Dotnet development

1. 1111
Creating ASPX Controls Programatically

2. 2222
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. 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.

4. 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. 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. 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. 7
Panel Demo
 Create a new C# ASP.NET empty web site
with the name Panel_Demo.

8. Add Default.aspx

9. 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. 10
The Panel

11. 11
Source View

12. 12
Edit Source
position:static means “no special positioning”
Follow the normal rules of HTML

13. 13
Add Text Inside Panel

14. 14
App Running
Try resizing the window.

15. 15
What the Browser Received

16. 16
Effects of Properties
Experiment with property values:
HorizontalAlign
Wrap
Height
Width
Padding

17. 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. 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. 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. 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. 21
Design View

22. 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. 23
Page in Chrome

24. 24
After Clicking “Refresh Panel”

25. 25
Hiding the Panel
After clicking “Refresh Panel”

26. 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. 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. 28
After Clicking “Refresh Panel”

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

30. 30
Automatic Scrollbar
End of Presentation

31. 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