1. Tech

Your suggestion is on its way!

An email with a link to:

http://delphi.about.com/od/aspnet/l/aa091404a.htm

was emailed to:

Thanks for sharing About.com with others!

An introduction to ASP.NET Web Server controls
Web Server controls are specifically designed to work with Web Forms pages. Find about the basic concepts, benefits and limitations of using Web Server controls in ASP.NET.
 Win prizes by sharing code!
Do you have some Delphi code you want to share? Are you interested in winning a prize for your work?
Delphi Programming Quickies Contest
 Join the Discussion
"Post your views and comments to this chapter of the free Asp.Net Delphi Programming Course"
Discuss!
 Related Resources
• A Beginner's Guide to Asp.Net Programming for Delphi developers.TOC
 Elsewhere on the Web
• Free Web server controls
• About HTML
• About JavaScript

Welcome to the twelfth chapter of the FREE online programming course:
A Beginner's Guide to Asp.Net Programming for Delphi developers.
Web Server controls are specifically designed to work with Web Forms pages. Find about the basic concepts, benefits and limitations of using Web Server controls in ASP.NET.

The true power of ASP.NET - Web Server controls
As mentioned before, ASP.NET provides two sets of controls you can choose from when developing ASP.NET Web Forms pages. Besides using server-side HTML controls, a Delphi developer working on an ASP.NET application has a far more richer set of controls at his/her disposal: the Web Server controls.

In this chapter, you'll learn about the following:

  • What are Web Server controls
  • The difference between HTML controls and Web Server controls
  • Common properties, events and methods
  • Web Controls are the real gems of ASP.NET. By using Web Controls instead of "standard" HTML controls, substantial benefits in visual appearance and functionality are gained. While server-side HTML controls map one-to-one to HTML elements, Web Server controls are defined as abstract controls in which the actual HTML rendered by the control can be quite different from the model that you program against.

    HTML controls exist "only" to provide an easy transition from old ASP pages to ASP.NET; they do not provide a useful object model and aren't simple to program against.

    Web Server controls provide a consistent, object-oriented programming model, with common properties and events that can be handled on the server. Web server controls include traditional ("desktop") form controls such as buttons and edit boxes as well as complex controls such as lists, grids and calendars. What's more Web Server controls provide much richer sets of properties, methods and events.

    Web Control model
    Given the fact that HTML control and Web Server controls at the end render to standard HTML elements, one might come to the conclusion that those two are similar. However there is a large difference. At design time HTML controls look exactly as their maped HTML elements with familiar HTML tags. On the other hand, Web Server controls render quite differently from the object model a developers sees.
    Back in the 'Your first "Hello World" ASP.NET Delphi application' we've already built a simple web page consisting of several Web Server Controls - let us now explore the Web Controls concepts.

    Web Controls on Delphi's Tool Palette For example, try adding (double click, or drag and drop on a web form) a CheckBoxList web server control to a web form. Note that all the Web Controls are located under the "Web Controls" on the Tool Palette window.

    If you switch to the "aspx" (html) view of the page, you should see that, at design time, the control appears in your page in a format such as

    <asp:checkboxlist id=CheckBoxList1 runat="server"></asp:checkboxlist>

    Note: If you are familiar with HTML then I guess you would expect to see something like
    <input type=checkbox" />

    However, since we are dealing with Web Server controls, the actual "HTML" you see is quite different.

    More generally, a Web Server control renders as (at design time):

    <asp:controlname attributes runat="server"/>

    Or, even more generally, in:

    <tag_prefix:controlname attributes runat="server"/>

    Note: the "asp:" (or "tag_prefix:") determines a unique namespace for the web control. All Microsoft's web controls (those in System.Web.UI.WebControls namespace) have the "asp:" prefix.
    Borland specific controls (like DBWebImage) have the "borland:" prefix. Third party developers will have their own prefixes for web controls (like "aspxd:" for web controls from apsxDelphi.net).

    In the above case, attributes are not those of HTML elements. Instead, they are properties of the Web control.

    Let's now manipulate the control in a *common* way. Switch to code-behind and in the Page_Load procedure add the following code:

    procedure TWebForm1.Page_Load
    (sender: System.Object; e: System.EventArgs);
    begin
      with CheckBoxList1.Items do
      begin
        Add('ASP.NET');
        Add(ListItem.Create('Rocks','is great'));
        Add('with Delphi');
      end;
    end;
    

    Let's see the resulting HTML that will be sent to the client's browser:

    CheckBoxList WebServer control at run time

    As you can see from the HTML below, this "simple" asp:CheckBoxList Web Server control renders to quite a complex HTML table element containing <input> and <label> tags.

    <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1:0" />
    <label for="CheckBoxList1_0">ASP.NET
    <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1:1" />
    <label for="CheckBoxList1_1">Rocks
    <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1:2" />
    <label for="CheckBoxList1_2">with Delphi

    The actual HTML the Web Server controls renders to, depends not only on the browser type but also on settings that you have made for the control. For example, a TextBox control might render as an <INPUT> tag or a <TEXTAREA> tag, depending on its properties. An asp:Panel component renders as <div ..> element on Interent Explorer, but as <table ..> on Netscape or Firefox.

    Common features
    Mostly all Web Server controls inherit from a common base class, namely the WebControl class defined in the System.Web.UI.WebControls namespace. This base class implements a set of common properties that all Web Server controls have: Attributes, CSSClass, BackColor, Enabled, Visible, Width, etc. Web server controls that do not inherit from the WebControl class include Literal, PlaceHolder, Repeater, and Xml.

    As you can see from the above example, Web Server controls are used in the same way as HTML server controls. You drop them from the Tool Palette to a Web Form or enter the appropriate tags manually in the "aspx" view. As mentioned, all Web Controls from the System.Web.UI.WebControls namespace are prefixed with "asp:". Web Controls from third-party vendors will have a different prefix. For example, controls in Borland.Data.Web namespace (those found on the "DB Web" section on the Tool Palette) have the "borland:" prefix.
    All Web Controls on a Web Form must have a name - specified using the "ID" attribute. You use the ID attribute, the name of the component, to access its properties and methods.

    In general, Web Controls can be split into several categories:

    • Intrinsic controls are rendered to simple HTML elements. For example, a Button Web Server controls renders to an <input> element, but provides additional server-side functionality for a developer
    • Validation controls provide a way to reduce the number of server round-trips by adding client side validation code
    • Rich controls like Calendar or DataGrid provide a rich user interface for particular tasks. They both render to quite complex table elements. What's more DataGrid even enables editing data from a database ... but we'll leave this discussion for some other time.

    Before we move to limitations and end this chapter (and prior to some real world examples that will come in the next chapters), here are a few Web Controls essentials:

  • All Web Controls follow a rich object model that provides type-safe programming capabilities
  • Web Controls are able to raise a greater variety of server-side events
  • Some controls (DataGrid, repeater, etc) have the ability to define your own look for the control using templates.
  • There must be some magic here since Web development is stateless and yet each control can raise a Change event if the value in the control has changed.

    And most importantly:

  • Web Controls are extensible, meaning that you can create your own Web Controls as in the good old days of VCL and Delphi for Win32 :)

    WebControl "limitations"
    Even though we have just started exploring Web Server controls I'll expose some of the limitations:

    • Most Web Controls cannot act as containers - you cannot simply nest their tags and overlap with other controls. However the Table, Panel and Repeater can act as containers.
    • You'll find it hard to manipulate most Web Server controls using client-side code (JavaScript).
    • more to come as we explore the System.Web.UI.WebControls namespace ;)
    To the next chapter: A Beginner's Guide to ASP.NET Programming for Delphi developers
    That's it for today, in the next chapter we'll continue to explore Web Controls. Stay tuned!

    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 >>
    >> Examining Control-Passing ASP.NET Web Controls: Button, ImageButton and LinkButton

  • ©2014 About.com. All rights reserved.