{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
Generating a unique id for Html Controls in custom controls
Summary
When you add an HtmlControl to your custom control, sometimes you want to have a unique id given to that HTML element and sometimes you don’t care as much about it. This article looks at how to generate unique and previously known IDs (same at design time and runtime).
 
Table of Contents

Figure 1. Class Hierarchy for HtmlGenericControl and some important properties

Adding an ID to the element

The HTML generated using the ID in HtmlGenericControl

Advantages of this approach

Disadvantages of this approach

The HTML generated by using Attributes.Add

Advantages of this approach

Disadvantages of this approach

 

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.

// The IFRAME editor
HtmlGenericControl iFrame = new HtmlGenericControl("IFRAME");

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

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:

iFrame.ID = "ajaxwrite";

Option 2:

iFrame.Attributes.Add("ID", "ajaxwrite");

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

<IFRAME id="awArticle_ajaxwrite" style="border: gray solid 1px; padding: 0px;" frameborder="0" width="555" height="267" OnLoad="AW_Load"></IFRAME>

Above HTML is generated by using the following code:

// The IFRAME editor
HtmlGenericControl iFrame = new HtmlGenericControl("IFRAME");
iFrame.ID = "ajaxwrite";
iFrame.Attributes.Add("style", EditorStyle);
iFrame.Attributes.Add("frameborder", "0");
iFrame.Attributes.Add("width", Convert.ToString(this.Width.Value - 2.0));
iFrame.Attributes.Add("height", Convert.ToString(this.Height.Value - 100.0));
iFrame.Attributes.Add("OnLoad", "AW_Load");

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

<IFRAME ID="ajaxwrite" style="border: gray solid 1px; padding: 0px;" frameborder="0" width="555" height="267" OnLoad="AW_Load">

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

iFrame.Attributes.Add("ID", "ajaxwrite");
iFrame.Attributes.Add("style", EditorStyle);
iFrame.Attributes.Add("frameborder", "0");
iFrame.Attributes.Add("width", Convert.ToString(this.Width.Value - 2.0));
iFrame.Attributes.Add("height", Convert.ToString(this.Height.Value - 100.0));
iFrame.Attributes.Add("OnLoad", "AW_Load");

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.

Bookmark and Share This

More Articles With Similar Tags
icon-ajaxservercontrol-new-project.jpg
This article explains the various pieces of the code generated for beginning an AJAX Server Control. The class ScriptControl and the over-ridden methods GetScriptDescriptors() and GetScriptReferences() are explained, among others.
icon-ajaxservercontrol-toolbox.jpg
This article talks about using an AJAX Server Control from a web site. Registering the control and adding a ScriptManager are also discussed.
This test has questions about using an AJAX Server Control from a web site. Registering the control and adding a ScriptManager are also included.
This is a test on the various pieces of the code generated for an AJAX Server Control. This includes the class ScriptControl and the over-ridden methods GetScriptDescriptors() and GetScriptReferences().
icon-ajaxservercontrol-client-files.jpg
With an AJAX Server control, some additional JavaScript is generated behind the scenes (in addition to the JS you write). This article looks at this generated JavaScript when an AJAX Server Control is used.
About  Contact  Privacy Policy  Site Map