What's the best way to deal with ASP.NET's ClientID

Realto619 picture Realto619 · Sep 27, 2012 · Viewed 7k times · Source

I'm trying to find the best way to deal with the way that ASP.NET prepends a value to any element that is created with runat="server", without having to resort to using <%= id.ClientID %>. I came up with the following solution earlier today, but I'm sure that there are more elegant solutions:

    $(document).ready(function() {
        var dotNetPrefix = $("[id$='prepended_ID_value']").attr('id');
        if (dotNetPrefix !== undefined) {
            dotNetPrefix = dotNetPrefix.replace('prepended_ID_value', '');
            dotNetPrefixID = '#' + dotNetPrefix;
            console.log('dotNetPrefix = ' + dotNetPrefix);
            testDotNet('prepended_ID_value');
        } else {
            console.log('Hidden Field is Missing! => <asp:HiddenField runat="server" ID="prepended_ID_value" Value="dotNet_ID_Prefix" />');
        }

    });

    function testDotNet(getID) {
        var test_dotNetPrefixID = $(dotNetPrefixID + getID).val();
        console.log('$(\'' + dotNetPrefixID + getID + '\').val() = ' + test_dotNetPrefixID);
    }

One problem with this method is that it requires that I place the following hidden field in every page:

<asp:HiddenField runat="server" ID="prepended_ID_value" Value="dotNet_ID_Prefix" />

...and that makes it kinda klunky (or adds to the existing klunkiness factor).

My ultimate goal is to make it so that I no longer have to use <%= id.ClientID %> (or anything that requires server side code) so that all of my JS can be called as an include instead of having to embed it in my ASPX pages. Oh, my second ultimate goal is that it's as simple as possible and doesn't require a lot of setup time from project to project.

I created a JSFiddle with an example http://jsfiddle.net/Realto619/8ZZYt/2/

Answer

McGarnagle picture McGarnagle · Sep 27, 2012

Why not just use ClientIDMode=Static? Set it in the Web.config so that your client IDs will be as-written throughout the site.