Normally, server controls are hard-coded on a page because you know in advance what types of controls you need and how many are needed. For certain applications, though, you may not know this information. Either you may be aware of which types of controls are needed but not know how many; or you may not know exactly what controls are required to respond to page events.

This is especially the case when page information is imported from external data sources. For instance, assume you want to produce Button controls to display book types from the BooksDB.mdb database. The number of buttons needed depends on the number of book types in the database. Although it currently contains six different types, over time this number might expand or contract depending on maintenance activities surrounding the database. Some types may be added, others removed. Therefore, only as many buttons are needed as there are currently book types in the database, and this number isn't known until the database is accessed.

The following example displays six buttons to match the number of different book types. However, these buttons are not hard-coded on the page. They are created by a script which first determines how many different book types are in the database; then the script creates this many buttons. The controls are produced dynamically, when the page is loaded. They must, in fact, be created each time the page is loaded or posted back since they are not hard-coded on the page.

Creating Controls with Script

Any type of server control can be created in script, producing it on-the-fly as needed. The statement used to create a new control is shown below.

Dim Control As New Type

A Control object is declared as a new control Type. The name assigned to the Control follows Visual Basic naming conventions. The control Type is one of the standard types of server controls. For example, to create an <asp:Label> control, declare it as a Label type; to create an <asp:Button> control, declare it as a Button type; to create an <asp:TextBox> control, declare it as a TextBox type; and so forth.

Dim MyLabel As New Label
Dim MyButton As New Button
Dim MyTextBox As New TextBox

The <asp:PlaceHolder> Control

Once a control is created, it is placed on the page by adding it to one of the Controls collections appearing on the page. The page itself has a Controls collection (Page.Controls) representing all controls on the page and to which new controls can be added. Preferably, though, you create a special area on the page as the location for adding new controls.

An <asp:PlaceHolder> control identifies a location where dynamically created controls can be placed. A control is assigned to this PlaceHolder's Controls collection to appear at this exact location on a page. The general format for creating a PlaceHolder control is shown below.

The PlaceHolder itself does not occupy space on the page. It simple reserves an area where dynamically created controls can be added. It must be assigned an id so that a script can identify this PlaceHolder's Controls collection as the location where a control is added.

Adding Controls to a PlaceHolder

Once a PlaceHolder appears on the page, its Add() method identifies the control to add to its Controls collection using the following general format.

PlaceholderId.Controls.Add(Control)

PlaceholderId identifies a previously defined PlaceHolder to which a new control is added. Control gives the name of a dynamically created control to add next in order to this PlaceHolder's Controls collection.

For example, the code below declares a PlaceHolder to which dynamically created controls can be added. The script creates a new Label control and adds it to this PlaceHolder.

<SCRIPT Runat="Server">

Sub Page_Load

  Dim MyLabel As New Label
  MyPlaceHolder.Controls.Add(MyLabel)

End Sub

</SCRIPT>

<form Runat="Server">

<asp:PlaceHolder id="MyPlaceHolder" Runat="Server"/>

</form>

The newly created Label appears on the page at the location of the PlaceHolder. Any additional controls created by the script can be added to the PlaceHolder and appear next-in-line after the Label control. An option is to create different PlaceHolder controls in different areas of the page to which various script-generated controls can be added.

Creation of the new Label takes place in the Page_Load subprogram. It is necessarily placed here in order to create the Label each time the page loads since a script-generated control does not take part in the page's View State and is not automatically recreated between page postings.

Scripting Control Properties

In the previous example, the Label control appears in its default configuration without any styling or property settings. Normally, you will want to add properties to a control before placing it on the page. This is done for a script-generated control in exactly the same manner as for a control that is hard-coded on the page. In the following code rewrite for the example Label control, various properties are set prior to adding it to the PlaceHolder's Controls collection.

<%@ Import Namespace="System.Drawing" %>

<SCRIPT Runat="Server">

Sub Page_Load

  Dim MyLabel As New Label
  MyLabel.id = "Label01"
  MyLabel.Text = "This is a script-generated Label"
  MyLabel.ForeColor = Color.FromName("blue")
  MyLabel.Font.Bold = True
  MyLabel.Font.Size = FontUnit.Parse("14pt")
  MyPlaceHolder.Controls.Add(MyLabel)

End Sub

</SCRIPT>

<form Runat="Server">

<asp:PlaceHolder id="MyPlaceHolder" Runat="Server"/>

</form>

This exact coding appears on this page to produce the Label control shown below. The PlaceHolder appears where the Label text is displayed.

Scripting Control Events

When creating script activation controls such as Buttons, the controls need to include event handlers that call subprograms. These event handlers can be script-generated by using the statement format shown below.

Control is the name of the control to which the event handler is being added. Event is the type of event handler. Subprogram is the name of the subprogram to call.

Consider, for example, adding a script-generated Button control to a PlaceHolder. In addition to creating the button and setting its properties, an event handler needs to be added to the button to identify a subprogram to call when the button is clicked. Assume that the event handler OnClick="My_Subprogram" needs to be added to the button. The following AddHandler statement is added to the script.

Dim MyButton As New Button
MyButton.id = "Button1"
MyButton.Text = "Click Me"
AddHandler MyButton.Click, AddressOf My_Subprogram
MyPlaceHolder.Controls.Add(MyButton)

A handler for the Click event is added to the Button control. My_Subprogram is identified (AddressOf) as the subprogram to call when the button is clicked. When this button is added to the page—at the location of MyPlaceHolder—it appears just as if you had hard-coded it as

<asp:Button id="Button1" Text="Click Me" OnClick="My_Subprogram" 
Runat="Server"/>

The types of scripted events that can be added to controls are given by the same event handlers that are hard-coded for these controls. For example, a Button control recognizes both OnClick and OnCommand event handlers. Therefore, a Click event (as shown above) or a Command event can be scripted for a Button. Event names are the same as hard-coded event handlers with the prefix "On" removed. Note that when a Command event is scripted, CommandName and CommandArgument properties also can be set for a button.

Scripting Literal Controls

It is often the case that text and XHTML tags need to be added to a PlaceHolder to help arrange or format dynamically created controls. For example, you might wish to insert paragraphs, line breaks, blank characters, or other strings of text among the controls to correctly space them on the page. Since these strings of text and XHTML cannot be precoded in the PlaceHolder, they must be inserted by script at the same time the controls are being created. The special <asp:Literal> control is used for this purpose.

A Literal control is created in script just like other ASP.NET controls. It is declared as a Literal control, its Text property is assigned a text or XHTML string, and the control is added to the PlaceHolder among the other controls. In the following example, a Literal control is created in order to add a line break characters among other dynamically created controls.

Dim MyBreak As Literal
MyBreak.Text = "<br/>"
MyPlaceHolder.Controls.Add(MyBreak)

As many Literal controls as necessary can be created and interspersed within a PlaceHolder to arrange or style other controls appearing in that area.

Scripting Command Buttons

Returning to the example of scripted buttons shown at the top of this page, the following script and code is used. As many command buttons are created as there are book types in the database. At the same time, Literal controls provide spacing of the buttons.

<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.Drawing" %>

<SCRIPT Runat="Server">

Sub Page_Load
  
  Dim DBConnection As OleDbConnection
  Dim DBCommand As OleDbCommand
  Dim DBReader As OleDbDataReader
  Dim SQLString As String
  Dim Counter As Integer = 0
  
  DBConnection = New OleDbConnection( _
    "Provider=Microsoft.Jet.OLEDB.4.0;" & _
    "Data Source=" & Server.MapPath("../Databases/BooksDB.mdb"))
  DBConnection.Open()
  
  SQLString = "SELECT DISTINCT BookType FROM Books ORDER BY BookType"
  DBCommand = New OleDbCommand(SQLString, DBConnection)
  DBReader = DBCommand.ExecuteReader()
	
  While DBReader.Read()
    Dim MyButton as New Button
    MyButton.Text = DBReader("BookType")
    MyButton.CommandName = DBReader("BookType")
    MyButton.Width = Unit.Parse("100px")
    MyButton.Font.Size = FontUnit.Parse("8pt")
    AddHandler MyButton.Command, AddressOf Get_Books
    ButtonArea.Controls.Add(MyButton)
    
    Dim MyBlank As New Literal
    MyBlank.Text = "&nbsp;&nbsp;"
    ButtonArea.Controls.Add(MyBlank)
    
    Counter += 1
    If Counter Mod 3 = 0 Then
      Dim MyBreak As New Literal
      MyBreak.Text = "<br/>"
      ButtonArea.Controls.Add(MyBreak)
    End If

  End While
	
  DBReader.Close()
  DBConnection.Close()

End Sub

Sub Get_Books (Src as Object, Args As CommandEventArgs)
  
  Dim SQLString As String 
  SQLString = "SELECT BookID, BookTitle, BookPrice, BookQty FROM Books " & _
              "WHERE BookType = '" & Args.CommandName & "' " & _
              "ORDER BY BookID"
  BookSource.SelectCommand = SQLString

End Sub

</SCRIPT>

<form Runat="Server">

<h3>Display Book Types</h3>

<asp:PlaceHolder id="ButtonArea" Runat="Server"/>

<asp:AccessDataSource id="BookSource" Runat="Server" 
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand="SELECT BookID, BookTitle, BookPrice, BookQty FROM Books
                 WHERE BookType = 'DataBase' ORDER BY BookID"/>

<br/><br/>	
<asp:GridView id="BookGrid" DataSourceID="BookSource" Runat="Server"/>

</form>