Webforms and jQuery, how to match the ID's?

Question

I want to use jQuery with asp.net webfoms. Do I need to get a special toolkit so the .net controls spit out friendly Control ID's?

Reason being, I don't want to write javascript referencing my html ID's like control_123_asdfcontrol_234.

Has this been addressed in version 3.5? (I remember reading you have to get some special dll that makes ID's friendly).

Answer 1

The easiest way I've found is just to match on the end of the mangled ID for most controls. The exceptions that Know of are radiobutton lists and checkbox lists - you have to be a little trickier with them.

But if you have this in your .aspx page:

<asp:TextBox ID="txtExample" runat="server" />

Then your jQuery can easily find that control, even if it's mangled by the master page rendering, like this:

$("[id$=txtExample]")

The $= operator matches the end of the string and the name mangling is always on the front. Once you've done that, you can get the actual mangled ID like this:

$("[id$=txtExample]").attr("id")

and then parse that anyway you see fit.

EDIT: This is an easy way, but it may be more of a performance hit than just giving each control a class the same as its old ID.

See this article that Jeff posted a link to on another jQuery optimization question:

jQuery: Performance Analysis of Selectors

Answer 2

You can use myControlId = "<%= myControl.ClientID %>"; to output the (non-friendly) id used to reference it in Javascript.

Answer 3

There are a lot of ways to select elements with jQuery. You could do careful Tag/ClassName selection for one.
I don't know of any way to mess around with the id's themselves until ASP.NET 4.0. Of course you could always give the ASP.NET MVC Framework a try.