|
Accessing the control’s id at runtime, when the page being used is the master page, has been a persistent issue, especially when we are trying to access the control’s id(Client Id) using Javascript. When we are adding the content to our aspx page, it resembles : At runtime time or after Page Render the textbox will render as Common Approach which we all are following to get the Control’s id (Client Id of the control) on Javascript function When we trying to access the control’s id in our javascript function, We are following two approaches. 1. Calling javascript from the server side and passing control’s client id as parameter Both of the approaches are not good practice if you will consider the performance and standard of your application but we dont have any other way.So we have one property named as ClientIDMode on DotNet Framework 4.0.By using this property, the user can decide what should be the control id at runtime or after the page renders. There are four types of ClientIDMode 1. AutoID 2. Static 3. Predictable 4. Inherit Note: Given below are few examples for each type of ClientIDMode which shows how to access the Control’s id (Client id) through Javascript function and how the Control renders for each type. |
|
1. AutoID This is the existing behavior as in ASP.NET 1.x-3.x. |
function ClientIdExample() {
var id = document.getElementById('');
alert(id);
}
window.onload = ClientIdExample
After Page Renders
2. Static
This option forces the control’s ClientID to use its ID value directly.This is most commonly used but the major drawback is with same control with multiple instances(like multiple instances of a usercontrol).If there are several instances of the same naming container so client ID naming conflict.
function ClientIdExample() {
var id = document.getElementById('txtMinfire');
alert(id);
}
window.onload = ClientIdExample
After Renders
3.Inherit
By default all the control’s ClientIDMode is Inherit,it only places the inherited control id for each controls within the masterpage
function ClientIdExample() {
var id = document.getElementById('MainContent_txtMinfire'); // ContentPlaceHolderID_IDOfTheControl
alert(id);
}
window.onload = ClientIdExample
After Page Renders
4. Predictable
Predictable is the important mode of the Client ID Mode and it is mainly used for controls that are in data-bound controls.We can generate the ClientID value by concatenating the ClientID value of the parent naming container with the ID value of the current control.ClientIDRowSuffix is a property of the control which can be added at the end of a databound control that generates the multiple rows.Best example is the GridView Control where multiple data fileds can be specified and if the ClientIDRowSuffix property is blank then it will automatically add a sequential number at the end of the databound control id.This number begins at zero and is incremented by 1 for each row and each segment is separated by an underscore character (_).
Given below examples demonstrate how the databound control id renders in both the case(without ClientIDRowSuffix and with ClientIDRowSuffix )
Note: ClientIDRowSuffix is blank by default in the above gridview declaration and just follow the given below syntax for adding the ClientIDRowSuffix in the gridview declaration
Output without ClientIDRowSuffix
……… ………
| ID | Name | Company Name |
|---|---|---|
| 001 | Srikanta | Mindfire |
| 007 | Kaushik | Mindfire |
Output with ClientIDRowSuffix
……
| ID | Name | Company Name |
|---|---|---|
| 001 | Srikanta | Mindfire |
| 007 | Kaushik | Mindfire |
You can set ClientIDMode property in 3 ways
1.Application Level2.Page Level
3.Control Level
Setting ClientIDMode at Application Level
You need to set it at System.Web section of Web.config
Setting ClientIDMode at Page Level
Setting ClientIDMode at Control Level
Each and every server control in ASP.NET 4.0 has this property and the default value is inherit.
Hope you find this helpful.Happy Coding !!!