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

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/

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

If you are using .Net framework 4.0 or higher ,Use the ClientIDMode property of the Control

You may use Static as the ClientIDModeEnumeration

The ClientID value is set to the value of the ID property. If the
control is a naming container, the control is used as the top of the
hierarchy of naming containers for any controls that it contains.

Method 3

You can use the jQuery ends with selector:

$('input[id$="myServerId"]')

But remember, that kind of selector is a lot slower than selecting directly with the id with <%= id.ClientID %>.

http://jsperf.com/id-vs-ends-with

Method 4

The right answer is as follow

var txt1 = $('#<%= txt1.ClientID %>');
$(txt1).click(function () {
    alert('hi');
});

her I create a new variable on the javascript which is reference to the control based on its rendered client ID

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0