ClientDOM

• Download source code - 25.2 KB

Introduction

This control is used to get the DHTML object of an ASP.NET server control on the client side even though the ASP.NET Framework will interfere with the control's ID in order to keep the ID unique across the page.

Using the code

• Control: ClientDOM
• Namespace: IBM.DOTNET.Web.Controls
• Assembly: IBM.DOTNET.Web
• Description

This control is used to get an ASP.NET server control on the client side. When we use a sever control in ASP.NET or any HTML control with "runat=server" tag, the ASP.NET framework will interfere with the control's ID in order to keep the ID unique across the page. This is what usually happens when we use user controls and custom controls. A developer cannot perform validations on the client side using client side scripting, as it is not possible to get the object by using the getElementById or getElementsByName method of the Document object. This is because the ID of the control is changed by the ASP.NET framework. In four years of my career working on ASP.NET as a developer, I have observed that people deal with this issue in various ways. Some of which are mentioned below. They are error prone or not easy to use. Note that this solution is developed in .NET Framework 2.0 and Visual Studio 2005. However, the actual object is encapsulated in the "IBM.DOTNET.Web.dll" assembly. Another web project "WebSample" was created only to demonstrate how it works in ASP.NET 2.0. If .NET Framework 3.0 supports backwards compatibility then it must work with that framework too. However, it is not tested with .NET Framework 3.0, so right now we can say this solution is for .NET Framework 2.0 only.

1. When a user control/custom control is placed on a page, the text which is appended as prefix to the actual ID is retrieved and assigned to one of the JavaScript variables. And this variable is used whenever we need to perform validation on the user control/custom control. This will work but we have to make sure that the client file will not have another variable with the same name and that variable should not be used to hold the client ID for other user controls/custom controls placed on the same page. One more thing, wherever we need to retrieve the object on the client side, we have to append this variable in the getElementById method as mentioned below.
ASP.NET control on UserControl
ASP.NET

<asp:TextBox ID="Age" runat="server"></asp:TextBox>

Server side coding
C#

protected void Page_Load(object sender, EventArgs e) 
{ 
    Response.write( "<script language='Javascript'>var ClientID = '" + 
      this.Controls[0].ClientID.Replace(this.Controls[0].ID, "" ) + "';"); 
}

Client side coding
JavaScript

function checkNum() 
{ 
    return (! isNaN(document.getElementById( ClientID + "Age" ))); 
}

2. When the user control/custom control is placed on the page, a hidden control is placed on it and we set its value with inline coding. This will work but in spite of having a separate code-behind file, they have to do inline coding. The second thing, wherever we need to retrieve the control on the client side, first we have to retrieve the value of the hidden control and then we can get the control of our interest. Here too, we have to make sure that the hidden control's ID must be unique across the page.
ASP.NET control on UserControl
ASP.NET

<asp:TextBox ID="Age" runat="server"></asp:TextBox>
<input type="hidden" id="hidClient" value="<%= Age .ClientID.Replace(Age.ID, "" ) %> />

Client side coding
JavaScript

function checkNum() 
{ 
  //This hidden control is not a server control, so we can get this
  //control by passing it's id to the getElementById method 
  var ClientID = document.getElementById("hidClient").value; 
  return (! isNaN(document.getElementById( ClientID + "Age" ));
}

3. Another approach is to do inline coding wherever we need to retrieve an object on the client side. This is not a good approach at all as it involves a tedious job of making changes at many places in the code if the ID of the User Control is changed by someone in future or and it is not easy to maintain.
ASP.NET control on UserControl
ASP.NET

<asp:TextBox ID="Age" runat="server"></asp:TextBox>
<input type="hidden" id="hidClient" value="<%= Age .ClientID.Replace(Age.ID, "" ) %>" />

Client side coding
JavaScript

function checkNum() 
{ 
    return (! isNaN(document.getElementById("<%=UID.Age %>")); 
}

where UID is the ID of the user control where this control is plugged.

I am extending the first approach here and we make sure that everything will be in place and the developer can easily retrieve the object on the client side without doing anything extra.

There are two steps to get the objects on client side and it's very easy to do.

On the server side we need to instantiate an object of type IBM.DOTNET.Web.Controls.ClientDOM and pass the ID as the parameter in the constructor. If you give some value, say "TEST" to the ID, and a variable of this name already exists on the client side, a message will be shown: "This ID already exists, please provide unique ID".

using IBM.DOTNET.Web.Controls;
Controls.Add(new ClientDOM("UIID"));

Now wherever we need to retrieve the object on the client side, we can get it simply by calling the getElementById method of the UIID object instead of the Document object, as shown below.

UIID.getElementById("Age");

In the same way, if you are using an ASP:RadioButton control and have set the GroupName property, then you can retrieve this object on the client side by calling the getElementsByName method of the UIID object as shown below:

<asp:RadioButton GroupName="gender" ID="male" Text="Male" runat="server" />
<asp:RadioButton GroupName="gender" ID="female" Text="Female" runat="server" />

UIID.getElementsByName("gender");

If you would like to contact me, write to paresh.moradiya@gmail.com.