1. Computing
An introduction to server-side HTML controls and HTML tags in ASP.NET applications
Taking a look at the use of standard HTML tags and elements and the use of server-side HTML controls - from a perspective of a Delphi developer.
 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"
 Related Resources
• A Beginner's Guide to Asp.Net Programming for Delphi developers.TOC
 Elsewhere on the Web
• About HTML

Welcome to the eighth chapter of the FREE online programming course:
A Beginner's Guide to Asp.Net Programming for Delphi developers.
Taking a look at the use of standard HTML tags and elements and the use of server-side HTML controls - from a perspective of a Delphi developer.

As mentioned earlier in this course, ASP.Net provides two sets of controls you can choose from when developing web applications with web forms.
Besides working with server-side controls (HTML or WEB) every asp.net page will generally contain pure (or native) HTML elements like tables, lists, images, etc. This article provides an overview of working with HTML elements in a server-side fashion. That being said, if your experience with HTML is a little rusty, I do suggest you to take a look at the About HTML web site.

"Pure" HTML - tags, elements, attributes,...
HTML elements are structural parts of a Web Form, defined by HTML tags and tag attributes. By default, classic HTML elements within an ASP.NET web form are treated as literal text and are programmatically inaccessible to page developers - such elements are client-side operated - the client's browser uses the tags to render the page.
For example, This is a link is a hyperlink element; <a> is a tag, href="..." is an attribute.
Another example: <input type=button> - will render a button element on a web form.

In order to programmatically operate on a HTML element from your page's code-behind class, you'll need to server-side "enable" an element you want to operate on. HTML elements that are marked "server-side" are called HTML Controls. HTML controls mimic the actual HTML elements you would use if you were using Notepad, HTMLKit, FrontPage or any other HTML editor to draw your UI.

HTML Controls
To make HTML elements programmatically accessible, you can indicate that an HTML element should be parsed and treated as a server control by adding a runat="server" attribute. Another attribute, "id", allows you to programmatically reference the control - by accessing attributes as properties.

ASP.NET web forms always begin with a HTML control - the HTMLForm control. The HTMLForm control is just like its standard HTML equivalent, but it contains the runat="server" attribute. For other server controls (HTML or web) to be recognized by the ASP.NET framework, they must be placed between beginning and ending


HTML Controls in Delphi for .Net Tool Palette To create a HTML control you need to make two steps. Firstly, you add HTML elements to a web form page by dragging and dropping (or double-clicking) them from the Tool Palette (when working on a web form in "design" view). Secondly, you need to add the runat="server" attribute manually to the HTML element - making it a HTML server-side control. You can also assign a value to the ID attribute.
Note: the design view editing surface offers two ways to position web elements, flow layout and absolute layout.

Adding HTML controls to a web page
Let's try: have a web form displayed in "design" view, point to Tool Palette, open the "HTML Controls" group, locate the "HTML Anchor" item and drag it on your web form. Next, open the "aspx" view, locate the added <a> element. It should look like:

<a href=" ">Anchor</a>

Add the runat="server" and id attributes, something like:

<a runat="server" id=htmlLink href=" ">Anchor</a>

Unfortunately, this is not enough. The code for the web form must also contain a declaration for a corresponding object variable in the code behind class - and you'll have to do this manually. Activate the "code" view, and locate the "strict-private" section of the TWebForm1 (if this is the name of your form's class). Add a line like:

htmlLink: System.Web.UI.HtmlControls.HtmlAnchor;

HTML control declaration

Now, you can access anchor's attributes as properties in your code:

HTML Anchor's properties

Sounds too complicated? Well, yes it is! But before you decide to never again use HTML controls, let me assure (better to say: warn) you that you *will* use them in every asp.net web application not being a kind of "Hello world" :(

Here's just one situation: if you want to enable file upload in a web page from a client to a web-server, you'll need to use the "HTML File Upload" control.

Note 1: just dropping a HTML control to a web form does "nothing" - a dummy client-side HTML element/tag (with attributes) will be added to the page. With this in mind, another way to add a HTML control to a web page, is to add it manually in the aspx view - just add the tag as you would normally add it in "client-side" web dev. environments.

HTML controls and their rendering
Let's take a look at the "HTML Control" group on the Tool Palette. There are more than a dozen controls to choose from. The following list explains their relation with classic HTML elements.

Note: some HTML controls don't correspond to a specific control like a button, hyperlink or a text box. What's more, such controls do not have a visual representation by themselves. Some examples include: <div>, <span>, , <font>, etc.

HTML ControlHTML representationDeclare as / Description
HTML Label<div>HtmlGenericControl
HTML Button<input type="button">HtmlButton
HTML TextBox<input>HtmlInputText
HTML TextArea<textarea>HtmlTextArea
HTML Password<input type="password">HtmlInputText
HTML Submit Button<input type="submit">HtmlInputButton
HTML Reset Button<input type="reset">HtmlInputButton
HTML Image Button<input type="image">HtmlInputImage
HTML CheckBox<input type="checkbox">HtmlInputCheckBox
HTML Radio Button<input type="radio">HtmlInputRadioButton
HTML DropDown<select>HtmlSelect
HTML ListBox<select>HtmlSelect
HTML Hidden FieldHtmlInputHidden
HTML File Upload<input type="file">HtmlInputFile
HTML Anchor<a>HtmlAnchor
HTML ImageHtmlImage
HTML Table<table>HtmlTable
HTML Span<span>HtmlGenericControl
HTML Div<div>HtmlGenericControl
HTML Flow Panel<div ms_positioning=FlowLayout>HtmlGenericControl
HTML Grid Panel
HTML Horizontal Rule<hr>HtmlGenericControl

Note: you cannot drop a "HTML Table Cell" from the Tool Palette if you need to server-side enable a <td> tag, for example. When you drop a HTML Table to a form, a sample HTML table will be created containing 3 rows with 3 cells in each row. Now, if you want to programmatically access a single cell, you need to add the runat=server attribute and an ID attribute to the appropriate td tag. Don't forget that you also need to add a reference to this "object" to your code behind; the class you are looking for is called "HTMLTableCell". The same story goes for tr tags.

If anything can go wrong - it will!
Yep, sad story with HTML controls. Take a look at the common errors that might occur at run-time if you failed to follow the 3 steps of making an HTML element server-side. In the following examples I'll presume that we are working with that HTML Anchor control and everything is set up as needed, but...

System.NullReferenceException: Object reference not set to an instance of an object.
Possible cause 1: you forgot to add a runat=server attribute to your HTML element.
Possible cause 2: you forgot to add a unique ID attribute to your HTML element.

Parser Error Message: The ID 'htmlLink' is already used by another control.
Possible cause: you have more than one HTML element with ID 'htmlLink'.

Parser Error Message: The base class includes the field 'htmlLink', but its type (System.Web.UI.HtmlControls.HtmlButton) is not compatible with the type of control (System.Web.UI.HtmlControls.HtmlAnchor).
Possible cause: you failed to declare your HTML anchor properly in the code behind - class selected was HtmlButton.

Properties, methods and events: HTML Controls
Being just "dummy" objects, HTML controls do not provide a rich set of properties an methods as you will see Web controls do. For example, events are limited to either ServerChange or ServerClick, depending on the type of control. However, there are quite a few great examples when HTML controls can come handy, one such example is "
Changing a Page title dynamically"

All HTML controls derive from one base HTMLControl class. The HtmlControl class provides common properties inherited by all HTML server control classes. For example, the TagName property returns the element name of the tag. With HTML controls that map to HTMLGenericControl, like <div>, or <title>, you can use the TagName property to decipher between different controls.
Another property, Visible returns or assigns a boolean value indicating the control's visibility. If this value is false, the control does not get rendered on the client side (even though it exists in your page's design).

Why and when to use HTML controls?
As you can see, HTML controls provide a relatively quick and easy way to move your existing (pure HTML) websites to ASP.NET. Only a few steps and your HTML element becomes a full blown server-side object. However, HTML controls are only one part of the Web Form story. As you will see in the coming chapters, Web controls provide all the features and functions of HTML controls and much more.

With the above statement in mind, note that if you need to generate specific HTML content to be sent to the client's browser, then using HTML controls should be more predictable than Web Controls - since (as we are yet to discuss) Web Controls can adjust their rendering depending on the type of the browser (desktop web explorer, mobile phone or Pocket PC device, for example).

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 the content of a web form: HTML controls, Web control ... and who knows what else :) 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 >>
>> Uploading files to a web server with ASP.Net

Related Video
Create Tables in HTML
Using PHP With HTML

©2014 About.com. All rights reserved.