Container controls

• Panel - use it when you want to mimic the TPanel Delphi (Win32) component
• PlaceHolder - use it when you want to mimic the TPanel Delphi (Win32) component, BUT without any visual output of the TPanel itself
• Table (with TableRow and TableCell) - one could think of a Table ASP.NET component as a TStringGrid (or TDrawGrid) Win32 Delphi component.

Panel

  <asp:panel id=Panel1 runat="server">
    Panel
  </asp:panel>

At run time, the Panel control will render as a DIV tag (or Table tag on non-IE browsers like Mozilla FireFox). The Panel control does not raise any server side events, but provides a convenient container for controls that you create at run time.

You can *easily* transform a Panel into a TScrollBox (Win32 Delphi) type of control, by tweaking it with custom styles. Here's an example of adding 10 TextBox ASP.NET controls to a Panel transformed into a scroll box (Panel1 is the ID of the Panel dropped on a WebForm7).

procedure TWebForm7.Page_Load
          (sender: System.Object; 
           e: System.EventArgs);
var
  i : integer;
  tb : TextBox;
begin
  //add scroll bars if needed
  Panel1.Style.Add('overflow','auto');

  //add borders using standard properties
  Panel1.BorderColor := Color.Red;
  Panel1.BorderStyle := BorderStyle.Dotted;
  Panel1.BorderWidth := &Unit.Pixel(2);

  //add some controls to the Panel
  for i:= 0 to 10 do
  begin
    tb := TextBox.Create;
    tb.Text := 'TextBox nr. ' + i.ToString;
    Panel1.Controls.Add(tb);
    Panel1.Controls.Add(LiteralControl.Create('<br>'));
  end;
end;

Note: it depends on the Browser you (your users) use whether the "overflow" CSS style will be "accepted".

The Controls property
As you can see from the above code, the Panel control has a Controls property. This ControlCollection type of property enables adding (and removing) controls to a Panel. Much similar to classic Win32 Delphi, Controls is a collection of all the child controls. These are all controls that list this Panel as their Parent property.

To add controls to a Panel at design time, simply select the Panel control and add any controls to it. Once you are done, when you move the Panel, the contained controls will move with it.

Placeholder

Table, TableRow, TableCell

Caution: working with the Table (TableRow and TableCell) controls require you to think hierarhically. The Table control exposes a collection of TableRow controls through its Rows collection. Each TableRow has a Cells collection (that accepts TableCell objects).

Even thought you are most likely to work with Table controls at run time (dynamically add rows and cells), you can drop one from the Tool Palette on the Web Form. When dropped, the design time representation will look like:

  <asp:table id=Table1 
    runat="server">
  </asp:table>

Even though table provides the Controls property, if you try to add a TextBox (for example) to a Table, like in:

 Table1.Controls.Add(TextBox.Create);

At run time, you will get the following exception:

'Table' cannot have children of type 'TextBox'.

Another issue to have in mind is that you MUST "obey" the parentage between table cells and table rows. In other words if you have a table with two rows, and you add one cell to the first row, make sure you add one cell to the second row too.

To the next chapter: A Beginner's Guide to ASP.NET Programming for Delphi developers

If you need any kind of help at this point, please post to the Delphi Programming Forum where all the questions are answered and beginners are treated as experts.

A Beginner's Guide to ASP.NET Programming for Delphi developers: Next Chapter >>
>> Using Validators in Delphi ASP.NET applications