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).

Barium

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

Lectra

If you're using WebForms to begin with, odds are you don't really care too much about things like performance anyway. – Zelikow

Answer 2

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

Lehman

that's if the javascript is inline in my .aspx page, but mine will be a seperate .js file that' won't get parsed. – Barium

how about var controlId = "<%= myControl.ClientID %>" then? – Mulloy

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.

Salaried

Answer 4

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).

Introject

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.

Uel

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; } }
}

Rivulet

Answer 7

Try $get('myId'). I think this is the way to select an element in non HTML docs.

Unanimity