Introduction to HTML Controls

Sometimes as an ASP.NET developer, you may want to create your web application using a specific html structure or specific html elements. ASP.NET Web Controls only allow so much customization over the interface and the actual markup that gets displayed in the browser. Today we will discuss how to use hand coded html elements known in the framework as HTML Controls.

These HTML Controls allow us to have full control over our interface markup yet still allows us to use our own HTML element as a ASP.NET Server Control. Let’s get started.

Implementation

First, we’ll add our element to our aspx file. In order to use the element as a Server Control, we need to specify an element ID and the runat="server" properties.

Add the following code within the <body> tag in Default.aspx:

To demonstrate the abilities of HTML Controls, we’re going to leave this heading tag blank, and populate it via server side code in the code-behind. This single HTML element is enough for a demonstration, but in a larger production application, you will have many elements that need to be dynamically populated throughout your project.

In order to use an HTML Control we’re going to have to import the HTML Controls namespace in Default.aspx.cs like so:

Now that we have the required namespace referenced in the top of the code-behind, we can continue by instantiating and manipulating our HTML Control.

Within the standard Page_Load method in Default.aspx.cs, type the following:

In the code above, we are instantiating a variable named a that contains the string " World!". On the next line we reference our HTML Control via it’s ID attribute the_heading.

We call the method InnerHtml on the HTML element which replaces the content within the elements tags.

Finally, we specify the content to populate the element with as the string "Hello" concatenated with our variable a to create the message "Hello World!". Now when we compile our program, our empty heading tag should contain the friendly message “Hello World!”.

The entire code-behind should look similar to the following:

Thanks for following along in this quick tutorial. By using HTML Controls you have gained access to more control over your user interfaces. For more options regarding HTML elements in ASP.NET, visit the Reference at Microsoft’s MSDN.