Problem: The control's client side ID is regenerated at runtime,basically it inherits outer controls id from parent control or place holders and generates a unique id.Therefore we use ClientID property that ensure that each element is uniquely identified.

Example:

<script type="text/javascript">
function DoSomething() 
{
   alert('<%= Control.ClientID %>');
}
</script>

   But the problem with this was that if you move the control or make the control as a user control, ClientID property you get at client side keeps changing.

As a solution:     Now we have a new property on every control called ClientIDMode on DotNet Framework 4.0 that is used to select the behavior of the client side ID.

Following are the modes supported by ClientIDMode :

1. Static: This makes the client side ID static,i.e whatever the value is used for the ID property of the control same is used for the client side ID. This separates the server side and client side ids.

Example:

<asp:TextBox ID="txtEcho2" runat="server" ClientIDMode="Static" /> 

2. Legacy: This is the default mode, i.e if ClientIDMode is not set. It behaves in the same way as they did in version 2.0,3.0 and 3.5 of the framework.

3. Inherit: By default all the control's ClientIDMode is Inherit, we donot have to set this for every control as this is the default behavior for every control. It only looks to the controls parent to get its value for ClientIDMode.

4. Predictable: This mode is used incase of Data-Bound controls, where we have different controls inside a control. Using this mode we can generate the ClientID by concatinating the ClientID of the naming container with the ID of the current control.    There is one more property ClientIDRowSuffix of the control, which can be added at the end of the ID of the data-bound control.Grid View is an good example to understand this.

<asp:GridView ID="gvMindfire" runat="server" AutoGenerateColumns="false" ClientIDMode="Predictable" ClientIDRowSuffix="ID" > 

Note:-> In the GridView if this ClientIDRowSuffix property is blank then it will automatically add a sequential number at the end of the databound control id.

How to set ClientIDMode at following levels:

1. At Application Level: Set this in Web.Config file.

<system.web> 
<pages clientIDMode="Static"> 
</pages>  
</system.web>

2. At Page Level:

<%@ Page Language="C#" ClientIDMode ="Inherit"  AutoEventWireup="true" CodeBehind="Example.aspx.cs"  Inherits="Example" %>

3.Control Level

<asp:TestBox id="txtExample" runat="server" ClientIDMode ="Static"> </asp:TextBox>