1111 Creating ASPX Controls Programatically 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 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. 4 5 Panel Demo The Panel control is a container for other controls. Use it to put a border around a group of related controls. We 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. 8 Panel Demo Add New Item 9 Add Web Form Default.aspx 10 11 Add a Panel View the Toolbox. Expand the Standard section. Add a Panel to the. Use handles on the panel in design view to resize it. Set its properties in the Properties window on the right side of the design surface. As shown in a later slide Adding a Panel 12 Double click on"Panel" in the Toolbox to add a panel at the cursor position. New Panel in Source View 13 14 New Panel in Design View Use handles on the panel to resize it. 15 Source View 16 Edit Source position:static means no special positioning Follow the normal rules of HTML Add Text Inside Panel This is static content in the panel. This text is here to show the effect of changing the padding values. Padding value can be specified in terms of pixels (px), centimeters (cm), or percentage of the panel's width (%). 17 18 Text Inside Panel 19 App Running Try resizing the window. 20 What the Browser Received... became... 21 Effects of Properties Experiment with property values: HorizontalAlign Wrap Height Width Padding 22 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. 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 23 Dynamic Controls Number of Labels: 24 Dynamic Controls Number of TextBoxes: 25 Dynamic Controls 26 Design View 27 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