Tag Archives: codeproject

ByTrent Jones

ASP.NET 4.0 and Control IDs

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.  Using

Choosing Legacy will continue to issue an ID in the same manner they were generated in 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 is using 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.

ByTrent Jones

JQuery.UI Dialog with ASP.NET empty post values

Ran into an issue using a jQuery.UI.Dialog control on an asp.net web form today.  When defining a dialog jQuery.UI takes the dialog and appends it right before the closing </body> tag.  This is outside of the <form> tag causing any values you wanted from the form to be empty in your code-behind.

Here is the fix that worked for me:

$('#dialog').parent().appendTo('/html/body/form[0]');


This works great and the dialog now displays as expected, capturing the results in the code behind except for I originally wanted the dialog wrapped in a UpdatePanel. In order to fix this issue, I created an empty div and appended the dialog content there:

$('#dialog').parent().appendTo('#dialog_target');


Not the results i expected. When the content refreshes the dialog is messed up. The answer was to move the content panel inside of the dialog with the user control doing all the work!!!

<div id="dialog" class="ui-widget-content ui-corner-all" title="Add New Client"></div>