Let’s say you want to add an IFRAME editor to your custom control. In this example, we are using the HTML element IFRAME; however, this is same for any other HTML element.

In the above piece of code, we are creating a new IFRAME element using HtmlGenericControl. Depending on whether your custom control is derived from WebControl or CompositeControl, you will show this control from one of the Render() methods or CreateChildControls().

Figure 1. Class Hierarchy for HtmlGenericControl and some important properties

Adding an ID to the element

Now we need a way to add ID to this (so that, perhaps we would manipulate this element from JavaScript on the client side, i.e. from the browser). There are two way of doing this:

Option 1:

Option 2:

The first statement uses the ID property available in the HtmlGenericControl class. And the second line adds an attribute to the generated IFRAME element.

Now let’s look at the HTML code generated by ASP.NET framework at runtime.

The HTML generated using the ID in HtmlGenericControl

Above HTML is generated by using the following code:

As you can see, the ID generated for the IFRAME element is “awArticle_ajaxwrite”, which is different from the iFrame.ID (which is just “ajaxwrite”). The prefix “awArticle” is the ID of this instance of the custom control on the page. Since this “awArticle” is unique on the page, the ID generated from IFRAME will also be unique.

Advantages of this approach

A unique id will be generated for each of the HTML controls you add to the custom control. That means there won’t be any name collisions either with controls that the user might add on the page or with a second instance of the same control. The elements in the second (or third, etc.) instance will be prefixed with the unique id of that instance itself.

Disadvantages of this approach

With the unique id being prefixed to the id of the control, you won’t be able to manipulate that control directly from the JavaScript code. You need to do some extra work for the JS code to manipulate the right element.

The HTML generated by using Attributes.Add

The above HTML is generated by using a series of Attributes.Add as shown in the code below:

As can be seen above, the generated ID has no suffixes or prefixes. Other attributes are made from a series of strings.

Advantages of this approach

Here, the ID you add in the code is the ID you see for this element at runtime. With this the JavaScript that’s in the control can refer to the same ID both at the design time and run time. Parts of the code gets simplified.

Disadvantages of this approach

Name collisions and won’t be able to use multiple instances of this control on the same page. If your control is simple and if the names are reasonably unique by the way they are named and the if the page developer knows of these names, this might be ok.