HtmlControls In ASP.NET

System.Web.UI.HtmlControls namespace is often ignored by ASP.NET developers. There is an opinion that System.Web.UI.WebControls classes are more natural to ASP.NET web application and I agree with that. However, HtmlControls namespace is still standard part of .Net Framework just like WebControls. You can drag it from toolbox and easily drop it to your web form. HtmlControls have its advantages in some scenarios and you should know both namespaces so you can decide which class to use in your specific case.

What are HtmlControls?

HtmlControls are just programmable HTML tags. By default these tags are literal text and you can't reference them with server side code. To "see" any HTML tag with your ASP.NET server side code you need to add runat="server" and some value to ID parameter. For example, to work with <textarea> HTML tag with server side code, you can use HTML code like this:

So, nothing hard here, we just set value of id property and add runat="server" part. After this, we can manipulate with this tag with C# or VB.NET server side code, like this:

[ C# ]

protected void Page_Load(object sender, EventArgs e)
{
// set new size of textarea
TextArea1.Cols = 15;
}

[ VB.NET ]

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
' set new size of textarea
TextArea1.Cols = 15
End Sub

HtmlControls are much less abstract than WebControls. With HtmlControls you work directly with HTML output. WebControls are not always rendered on the same way. For example TextBox control is rendered as <input type="text" /> tag if value of its TextMode property is SingleLine but TextBox will render as <textarea > if TextMode=MultiLine.

How to apply styles to HtmlControls

HtmlControls have not styles property so you can't set style directly. To apply styles to HtmlControls you need to use Attributes property, with code like this:

[ C# ]

TextArea1.Attributes["Style"] = "FONT-FAMILY: 'Arial'; COLOR: blue; BACKGROUND-COLOR: yellow";

[ VB.NET ]

TextArea1.Attributes("Style") = "FONT-FAMILY: 'Arial'; COLOR: blue; BACKGROUND-COLOR: yellow"

Differences between HtmlControls and WebControls

HtmlControls don't fire Click event on server side. Unlike WebControls, HtmlControls use OnClick handler on client side. You can access to Click event by using javascript. To handle click event on server side you need to use ServerClick event with event handler named OnServerClick.

HtmlInputText control doesn't have Text property. To get string inside Html text box you need to use Value property.

HtmlGenericControl also doesn't have Text property. To write text inside HtmlGenericControl you need to use its InnerText property.

Advantages of HtmlControls

* HtmlControls are very useful if you need to translate classic ASP web site to ASP.NET. Just add runat="server" to needed <input> or <select > tags and you can convert HTML form to ASP.NET web form fast.

* With HtmlControls you can easily access any html tag on web page. For example, if you want to change some attribute of <body> tag, just add runat="server" and you can do it with one line of code like with TextArea in last example.

* If you need to manipulate HTML tags, you will can do it easily with HtmlControls, instead of working with ASP.NET code inside of <% and %> like in classic ASP before.

* Reset of all input elements on form is very easy to do with HtmlInputReset control.

* Adding meta tags is easy to do with HtmlMeta control. Or, simply add id and runat="server" to meta tag, like this:

Then, you can set meta description with line like this:

[ C# ]

MetaDescription.Attributes["content"] = "This is description of my web site.";

[ VB.NET ]

MetaDescription.Attributes("content") = "This is description of my web site."

System.Web.UI.HtmlControls classes

System.Web.UI.HtmlControls namespace contains these classes:

HtmlAnchor	HtmlButton
HtmlForm	HtmlImage
HtmlContainerControl	HtmlControl
HtmlEmptyTagControlBuilder	HtmlGenericControl
HtmlHead	HtmlHeadBuilder
HtmlInputButton	HtmlInputCheckBox
HtmlInputControl	HtmlInputFile
HtmlInputHidden	HtmlInputImage
HtmlInputPassword	HtmlInputRadioButton
HtmlInputReset	HtmlInputText
HtmlInputSubmit	HtmlLink
HtmlMeta	HtmlSelect
HtmlSelectBuilder	HtmlTable
HtmlTable.HtmlTableRowControlCollection	HtmlTableCell
HtmlTableCellCollection	HtmlTableRow
HtmlTableRow.HtmlTableCellControlCollection	HtmlTableRowCollection
HtmlTextArea	HtmlTitle

HtmlControls endnote

Note that, by default, simple html tags can be anywhere on page, but programmable html controls must be inside <form> tag. That form tag must have runat="server" attribute. Of course, all programmable elements must be properly closed and nested.

There is no runat="client" attribute. If you try to write that, you'll get a parser error.

All HtmlControls are inherited from System.Web.UI.HtmlControls.HtmlControl. All html tags that not exist in HtmlControls namespace can be accessed by using HtmlGenericControl.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback | Google