Home > Blogs

USING CLIENTIDMODE TO NAME WEB SERVER CONTROLS

ASP.NET is great at server-side processing, but how can you refer to ASP.NET web server controls at the client? The answer is to use the new(ish) ClientIdMode property to fix the controls' names.

Posted by Andy Brown on 10 October 2011 | 2 comments

Use ClientIdMode to Refer to ASP.NET Controls as HTML

The Problem

Consider the following web server control in ASP.NET:

A typical ASP.NET textbox control

By default, this is how this renders as HTML:

How this textbox would render in HTML

The page on which the control sits uses a master page, and the cph stands for ContentPlaceHolder.

The question is: how could you refer to this textbox in client script, when you don't know how its name will be constructed?

The Answer

The answer is to use the web server control's ClientIdMode property:

The four possible values for this property

To see how this property works, the best two websites that I could find were these:

Website	Notes
Dan Maharry's blog	Once you can get over the black background and difficult-to-read font, this gives an excellent summary of the possible property values above.
Rick Strahl's blog	With a more orthodox appearance, this blog summarises the property values in slightly less detail.

Further Reading!

Typical times when you might want to reference the client id property of a control are:

when you want to set the DefaultButton property of a form;
when you want to apply the Focus method to a control to make it the active one;
when you want to use RegisterClientScriptBlock to attach client script to a form, which in turn should reference a particular control.

And since our youngest daughter has just come into the room I'm working in and started playing the piano, perhaps it's time to end there!

Comments on this blog

This blog has 2 comments:

Comment added by Carlos on 13 September 2012 at 21:15 GMT

I had a doubt when read those links. They say the behaviour is the same for Data-Bounds Controls. But in Dan's post he use ListView with clientIdMode static and the label inside with clientIdMode Predictable. and the results is

<table>

<tr><td><span id="ctrl0_lblItemName_11">Cat</span></td></tr>

<tr><td><span id="ctrl1_lblItemName_12">Dog</span></td></tr>

<tr><td><span id="ctrl2_lblItemName_13">Dragon</span></td></tr>

</table>

And in Rick's post he use a GridView with clientIdMode static and the label iside with clientIdMode Predictable: this results in:

<tr>

</tr>

<tr> <td> <span id="txtTitle_32">West Wind West Wind Web Toolkit</span> </td>

</table>

So my question is: Why this difference?

Thanks in advance.

Reply from Andy Brown (blog author)

A good question! I think you're always going to struggle to refer to controls by predictable id numbers within a gridview or listview, and I'm not even sure why you'd want to do so.

I gave 3 possible reasons why you might care about the client id of controls:

when you want to set the DefaultButton property of a form;

when you want to apply the Focus method to a control to make it the active one;

when you want to use RegisterClientScriptBlock to attach client script to a form, which in turn should reference a particular control.

None of these would apply to controls within a listview or gridview (or repeater or datalist for that matter).

Anybody else care to shed light on this?

Comment added by Carlos on 14 September 2012 at 21:23 GMT

Andy,

Thanks for your reply.

I found a sample that used the id for update informations from the database.

Its an Walkthrough named Making Data-Bound Controls Easier to Acess from javascript

http://msdn.microsoft.com/en-us/library/dd381611%28VS.100%29.aspxv

This could be an example?

If you set pretictable in the ListView or GridView and leave the controls inside with default clientIdMode they have the same result.

USING CLIENTIDMODE TO NAME WEB SERVER CONTROLS

Use ClientIdMode to Refer to ASP.NET Controls as HTML

The Problem

The Answer

Further Reading!

BLOGS BY TOPIC

BY AUTHOR

BY YEAR