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

Question

Hi,

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

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

Answer 2

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.

Answer 3

Although I haven't heard of that new "special dll" you talk about one simple way would be to use

var myControlId;

In your separate js-file and then assign the client id to that var in the aspx/ascx.

I too hate server ID:s... ASP.NET MVC is the solution to all the things that annoys me with asp.net webforms (Viewstate... etc etc).

Answer 4

I covered all the current methods in a recent blog post

It has not been fixed for ASP.NET 3.5 but is planned for ASP.NET 4.0

Answer 5

You can attach a unique attribute to your controls (I'm not sure if you can do this without extending the base web controls; a quick search revealed only this) and then use the "element[attribute:value]" selector.

Answer 6

You can also override UniqueName and / or ClientID properties of the controls in an extending class and return the actual ID.

MyTextBox : Web.UI.TextBox
{
    // This modifies the generated 'name' attribute
    override UniqueID { get { return ID; } }

    // This modifies the generated 'id' attribute
    override ClientID { get{ return ID; } }
}

Answer 7

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 8

If ID is not must try to access elements via class, because it never changes in rendering.