Click here to Skip to main content
Click here to Skip to main content

Tagged as

ASP.NET 4.0 and Control IDs

, 7 Oct 2009
Rate this:
Please Sign up or sign in to vote.
In .NET 4.0, there is a new option when adding controls to a page or user control: ClientIDMode. This property offers you four choices: Legacy, Static, Predictable, Inherit...

In .NET 4.0, there is a new option when adding controls to a page or user control: ClientIDMode. This property offers you four choices: Legacy, Static, Predictable, Inherit. Previously it was almost impossible to find the id of a control in a normal matter such as jQuery.

Choosing Legacy will continue to issue an ID in the same manner they were generated in the previous version of ASP.NET, by concatenating the ID values of each parent naming container with the ID of the control. Setting the property to Static will use the exact value of the ID property of the server control. Predictable is used for controls that are data-bound controls such as repeater and also makes use of a ClientIDRowSuffix property. Using Inherit makes the control ID property use the setting of its parent control.

In the example below, two lists are created inside the ContentPlaceHolder of a page using the same DataSource. The first uses the default and the second uses the new property with Static set as the value.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:XmlDataSource ID="LinkData" runat="server" XPath="Colors/Color">
        <Data>
            <Colors>
                <Color Name="Red"/>
                <Color Name="Blue"/>
                <Color Name="Yellow"/>
                <Color Name="Green" />
            </Colors>
        </Data>
    </asp:XmlDataSource>
    <asp:BulletedList ID="uxList" DataSourceID="LinkData" 
	runat="server" DataTextField="Name" />
    <asp:BulletedList ID="uxListStatic" ClientIDMode="Static" 
	DataSourceID="LinkData" runat="server" DataTextField="Name" />

    <script type="text/javascript">
        $(function() {
            $("#uxList").append("<li>Red</li>");
            $("#uxListStatic").append("<li>Brown</li>");
        });
    </script>
</asp:Content>

Here is the output of the page in HTML:

<div>
    <ul id="ctl00_ContentPlaceHolder1_uxList">
        <li>Red</li><li>Blue</li><li>Yellow</li><li>Green</li>
    </ul>
    <ul id="uxListStatic">
        <li>Red</li><li>Blue</li><li>Yellow</li><li>Green</li>
    </ul>

    <script type="text/javascript">
    $(function() {
        $("#uxListStatic").append("<li>Brown</li>");
    });
    </script>
</div>

And the corresponding view in the browser:

•    Red
•    Blue
•    Yellow
•    Green

•    Red
•    Blue
•    Yellow
•    Green
•    Brown

Because of the generated tag on the first list, jQuery can’t find the control to append to.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

trottin
Software Developer (Senior)
United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 7 Oct 2009
Article Copyright 2009 by trottin
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid