ClientID Mode in ASP.NET 4.0

Tweet

In ASP.NET 4.0 it is now possible to set the name of your controls ClientID attribute, thanks to the ClientIDMode property. This has been a long standing issue for developers, especially when you use master pages in ASP.NET 2.0 or 3.5. If you add a web content page to a master page and add a Label control to it, you'll end up with this:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
    <asp:Label ID="Label1" runat="server" Text="Some text..." />
</asp:Content>

When you debug your code, the Label control, named Label1, will be rendered as the following in the browser:

<span id="ctl00_ContentPlaceHolder1_Label1">Some text..</span>

This was a hassle especially if you're using JavaScript and it increases the page weight. By setting the ClientIDMode property in ASP.NET 4.0, you can now control the ClientID. The example below sets the ClientIDMode to static:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
    <asp:Label ID="Label1" runat="server" Text="Some text..."
    ClientIDMode="Static"/>
</asp:Content>

Now with the ClientIDMode set to static, the Label will be rendered as the following:

<span id="Label1">Some text...</span>  

Other possible values for the ClientIDMode are:

• Legacy – This is equivalent to the ClientID property behavior for earlier versions of ASP.NET. This is also the default if no ClientIDMode property is set in the current control’s hierarchy.
• Predictable – This option is primarily for use in data controls that use repeating templates. It uses ID attributes of the parent control's naming containers, but generated IDs do not have names that contain strings like "ctlxxx". Only a user-defined ID will be included in the resulting control ID. This setting works in conjunction with the RowClientIdSuffix property of the parent control to allow you to define values that create unique IDs for each instance of the control. A typical example is to use the primary key of a data record as part of the client ID.
• Inherit – This setting is the default behavior for controls; it specifies that a control's ID generation is the same as its parent. Explicitly setting ClientIDMode to Inherit specifies that this and any child controls whose ClientIDMode property is either not set or is set to Inherit will take the ClientIDMode value of any parent control. This includes the settings made for the page and in the configuration file.

This is a feature I am looking forward to using.

Tweet

About The Author

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET and regular presenter at conferences and user groups throughout Australia. Being an ASP.NET Insider, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with JavaScript. He also blogs regularly at DotNetCurry.com. Follow him on twitter @malcolmsheridan