clientid-of-control-in-asp-net-4-0

ClientID of Control in ASP.NET 4.0

2011-06-30

The ClientID of Control is the ID that client script can access a server control. As a .NET programmer, you should know how difficult if you want to load your server side control using Java scripts in Client. Because you don’t know control’s ID until runtime. Normally we just could put our Javascript in code behind code.

About how to put Javascript in code behind, you can read an article from Microsoft official site: using RegisterStartupScript and RegisterClientScriptBlock and other related information.

Before ASP.NET 4.0, if we put a button control into a web page:

<p>
      <asp:Button ID="Button1" runat="server" Text="Button" />
</p

The rendering output HTML page will be:

<p>
    <input type="submit" name="ctl00$MainContent$Button1" value="Button" id="ctl00_MainContent_Button1" />
</p>

You can see the id of the button is a long string "ctl00_MainContent_Button1", this id is the ClientID which shown in client page.

In ASP.NET 4.0, There is a new control property named CliendIDMode which "Gets or sets the algorithm that is used to generate the value of the ClientID property".

There are four algorithms as the following:

(from MSDN)

AutoID: The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control. In data-binding scenarios where multiple instances of a control are rendered, an incrementing value is inserted in front of the control’s ID value. Each segment is separated by an underscore character (_). This algorithm was used in versions of ASP.NET earlier than ASP.NET 4.

Static: The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.

Predictable: This algorithm is used for controls that are in data-bound controls. The ClientID value is generated by concatenating the ClientID value of the parent naming container with the ID value of the control. If the control is a data-bound control that generates multiple rows, the value of the data field specified in the ClientIDRowSuffix property is added at the end. For the GridView control, multiple data fields can be specified. If the ClientIDRowSuffix property is blank, a sequential number is added at the end instead of a data-field value. This number begins at zero and is incremented by 1 for each row. Each segment is separated by an underscore character (_).

Inherit: The control inherits the ClientIDMode setting of its parent control.

The default value of ClientIDMode for a page is Predictable. The default value of ClientIDMode for a control is Inherit. Because the default for controls is Inherit, the default generation mode is Predictable.

So In ASP.NET 4.0, if we do not set any ClientIDMode or if ClientIDMode = Inherit, The button will be rendered like following code by default value Inherit:

<p>
   <input type="submit" name="ctl00$MainContent$Button1" value="Button" id="MainContent_Button1" />
</p>

If ClientIDMode = AutoID:

<p>
  <input type="submit" name="ctl00$MainContent$Button1" value="Button" id="ctl00_MainContent_Button1" />
</p>

If ClientIDMode = Static:

<p>
  <input type="submit" name="ctl00$MainContent$Button1" value="Button" id="Button1" />
</p>

Normally, **ClientIDMode = **Predictable used for those data display controls such as ListView, Repeater…: We will give more samples later, or you can read the samples from ScottGu’s blog.