Jan 08 2009 39

Alternate way to select ASP.NET server controls using jQuery

I guess that you know by now that if you use MasterPages in your applications client ID of controls will differ from "server" ID. That's because ASP.NET creates a new ID for controls on a page. So this is probably very familiar to you:


ctl00_cphContent_txtFirstName

You set the ID of the textbox to "txtFirstName" and ASP.NET adds "ctl00_cphContent_". Although there were some tries to prevent ASP.NET from generating unique ID's, I think it's better to use quick and "dirty" solutions :-)

So, how to select a server control using JS/jQuery? The usual way to select an element in JavaScript is to use server tags:


document.getElementById("<%=txtFirstName.ClientID %>");

You can use the same approach with jQuery:


$("#'<%=txtFirstName.ClientID %>'");

I always hated this. But, luckily, jQuery enables you to avoid server tags completely. Since we can search for element just by the part of the name, we can do the next:


$("[id$='_txtFirstName']");

This will find elements which id's ends with "_txtFirstName". But why the dash in the front of the name? This will ensure you selected the element by its full control ID, not just a part of it.

Pretty simple, isn't it? The only issue here would be if you have controls with the same name placed in different content pages.

So, what do you think? It this too dirty for you?

With support from

Written by Janko in Tutorials, tagged under asp.net, jquery

39 Comments - Show them and leave yours

Sergejus 08 Jan 2009 #

I've seen this technique variations several times and it's really nice (although I'm using it without underscore). On the other side, as mentioned here: http://www.componenthouse.com/article-19, there is quite a big performance hit.
One more thing to point out - I'd prefer to create separate method for this.

Jin 08 Jan 2009 #

Nice trick Janko. I wish Jquery existed years ago, it'd saved me tons of headache. I was never a fan of .NET's intrusive naming convention.

Sergejus 08 Jan 2009 #

Just to add actual extension code:

$.extend({
  clientID: function(id) {
    return $("[id$='" + id + "']");
  }
});

So, we can than just use it like: $.clientID('ddlProducts').val()

Richard 08 Jan 2009 #

Well its not as dirty as the other alternatives so i guess its the best so far..
Are there any performance differences between using $("[id$='txtFirstName']") and $("#txtFirstName") in JQuery?

Andrew Bullock 08 Jan 2009 #

Isn't that going to be slow, as it will have to scan every element examing the id attribute, rather than evaluating to a getElementById (or crossbrowser equivalent)? As you mention it also isnt necessarilly unique. Plus its weekly typed, whereas VS/R# will pickup invalid ClientID references.
Interesting idea, but not for me.

Davide Espertini 08 Jan 2009 #

WOW! Excellent advice. Thx for this!

Janko 08 Jan 2009 #

Sergejus: I just read this article you mentioned, it's quite good. Obviously there could be performance issues, but the test in the article was performed on 20,000 elements which is quite a lot. Even then response time is 1160 miliseconds which is fast enough for me. On the other hand such server tags won't work in external JS files. Anyway, I like the idea of extending $

Jin, I totally agree. The more I use jQuery the more I like it. I mean LOVE it.

Richard, Andrew: Sergejus gave very nice article about performance differences between different types of selectors. Fast enough for me, works fast on tens/several hundreds of elements.

Davide: Thanks!

Daniel 08 Jan 2009 #

How does this work if there are multiple nnn_txtFirstName controls on the page? For example, if you had multiple user controls that contained a txtFirstName control, it would render with names like ctl00_usercontrol1_txtFirstName and ctl00_usercontrol2_txtFirstName...

Janko 08 Jan 2009 #

Daniel: yes, I know what you mean, using repeater is a good example for this. It will select you all of the element that matches the condition. But you can narrow your search, for example, if you want the one that has focus, or the one that has .active css class. Speaking of such list of controls with the same name (like repeater), you'd probably iterate through such lists in order to do something with it, like populating fields or reading values for storing in database.

Jake Scott 09 Jan 2009 #

Nothing is too dirty when using web forms because you probably already covered in mud haha

Jon 09 Jan 2009 #

Hey dude I'm liking the extend idea a lot. If you have controls with the same name then you could change the context of the query to look within each table row for example. That would remove the problem...I think.

Guy 09 Jan 2009 #

Your comment form is impossible to use with google autofill enabled - try it.

anyway, i think it would be much safer to use <% txt.ClientID %> and its no more code than your alternative anyway...

Janko 09 Jan 2009 #

Jake:

Jon: Yes, that also could be done and will could resolve the issue.

Guy: Is google autofill something that comes with google toolbar? I don't use so I don't know about it. Anyway, if you are using external JS, <% something %> doesn't work. And the other thing is the issue Daniel mentioned - it would be much more easier to find an element within the repeater using this code.

Muhammad Mosa 09 Jan 2009 #

I didn't know that before using $("[id$='_txtFirstName']")!! You know this is very useful specially with SharePoint Pages that we edit with SharePoint Designer. By default SharePoint pages doesn't allow server scripts, I have to enable it manually through configurations. But using this simple Tip I will be able to access server side controls using jQuery.
I liked Sergejus tip too!
Regarding performance, I don't think it will have that much impact! if it works with SharePoint fine then it should work with everything else LOL

Janko 09 Jan 2009 #

Muhammad: I haven't worked with SharePoint so far but if it works fine, then hoooray!

Justin 09 Jan 2009 #

Great tip. I always hate using the ClientID method.

CSharpSean 09 Jan 2009 #

great article, Keep up the good work

Ben Amada 09 Jan 2009 #

If it's not an external script, I usually just use <%=txtFirstName.ClientID %>. It's not very pretty, but I'd rather take the performance gain with this rather than the scanning required for partial id matches. When using jQuery, I'll sometimes just give controls a unique CSS class, like "firstname", so I can avoid <%= ... => and just use $(".firstname").

Kris 12 Jan 2009 #

I just keep hoping Microsoft will give us an easy way of turning off id mangling on controls (though I doubt they will).

If I have one submit button, I don't need it to be renamed ctl00_cphContent_btnSubmit

Then we wouldn't have to deal with any of these issues for control names unless it's a control that could have naming conflicts (such as a button in a gridview). Most of the time for me though, it's not so turning off this renaming feature would be ideal and make my JavaScript much cleaner.

Jay 22 Jan 2009 #

We won't have to worry about client IDs being mangled starting with ASP.NET 4.0 - www.mostlylucid.net/.../...ds-and-asp.net-4.0.aspx

Janko 26 Jan 2009 #

Justin, CSharpSean: thanks!

Ben: Classes might not always be the solution.

Kris: There might be some move, according to the link Jay provided.

Jay: thanks for sharing this!

Andre 30 Jan 2009 #

Good advice, thanks a lot. Combining ASP.NET and an javascript-framework is sometimes really painfull...

Janko 05 Feb 2009 #

Andre: yes, it hope it might help in some cases

MIna 05 Feb 2009 #

thanks Janko for that piece of information , it really helped me

Neil 07 Feb 2009 #

This works awesome! I incorporated this with:

<script type="text/javascript">
Sys.Application.add_load(WireEvents);

function WireEvents() {
$("[id$='_txtFirstName']");
}
</script>

since jquery won't get called during postbacks

Neil 07 Feb 2009 #

@ben - thats not a bad idea

Jonathan 13 Feb 2009 #

You can also use the following to locate asp.net controls such as buttons...etc.

$("[id$=whatever]")... this will locate a control on the page whose id is 'whatever'.

Michael 17 Feb 2009 #

Does this jquery select method work at all in IE? I just implemented it and it works in Firefox but not in IE, in fact I don't even get errors.

Janko 17 Feb 2009 #

Michael: it should work in any browser that supports jQuery. What happens when you run the page?

Victor Boba 01 Mar 2009 #

Thanks for the great tip. I've just learned about jQuery. Yes I know, it's a little later than most. I've been in the world of Winforms for the last 4 years with little web development. I love jQuery.

Jek559 06 Apr 2009 #

This is INCREDIBLE!
It even can pickup all the TextBoxes within the ASP.NET Gridview

Malte Hansen 20 Apr 2009 #

"if it works with SharePoint fine then it should work with everything else LOL Smile"
Amen to that

Ashraf Ganie 21 Apr 2009 #

Can any body help me out here.....

When i am using this code it is throwing object required error..

function SetControlState(ControlName)
{
var ctl = $("[id$='_"+ ControlName +"']");
ctl.style.display="none";
}

Any thing wrong in code.
Thanks

tigerP 10 May 2009 #

Ashraf Ganie meybe you should write like is
function SetControlState(ControlName)
{
var ctl = $("[id$='_"+"\""+ ControlName +"\""+"']");
ctl.style.display="none";
}

Paolo 17 Nov 2009 #

Janko - nice article and GREAT site. Your jquery examples are insane.

Just one quick question - why did you say to Ben that classes might not work everytime??

To handle .NET control / client Id's, I code my inputs as follows:
<asp:TextBox ID="username" CssClass="idUsername usernameFormatting" runat="server" />

For server side coding, I use the ID.
For client side coding and jquery, I use the "idUsername" class
And for formatting you can use anything else, such as "usernameFormatting"

But I always make sure idUsername is unique. And if there are multiple instances of an element, you just append the instance iteration after, like idUsername_1, idUsername_2 etc.

This way I can now also seperate all my JS into seperate files and include them in the header as opposed to having to include it inline.

Why though do you say this may not work all the time??

Thanks
Keep up the great site!

Janko 17 Nov 2009 #

Paolo: Thanks for the comment! What I wanted to say is that classes shouldn't be a replacement for id's like in his example, thus classes might not be the solution for finding a particular element.

Madhavan 12 Jan 2010 #

Great! it saves my tiime

Sathyan 09 Feb 2010 #

Janko, thank you very much for the tip.

Orson 17 Feb 2010 #

@Janko: Great post.

@Neil: Could you provide me with some resource in which i could read up on "Sys.Application.add_load()" function. Please. I would also be grateful if you could be kind enough to provide a definition as to what this function is meant for.

2 Trackback(s) (show)

Comments are closed