13

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

Biri
  • 7,101
  • 7
  • 38
  • 52
Blankman
  • 259,732
  • 324
  • 769
  • 1,199

7 Answers7

16

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

CMPalmer
  • 8,571
  • 5
  • 40
  • 49
  • 3
    If you're using WebForms to begin with, odds are you don't really care too much about things like performance anyway. – nathanchere Feb 14 '14 at 03:05
10

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

kͩeͣmͮpͥ ͩ
  • 7,783
  • 26
  • 40
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.

Jeff Sheldon
  • 2,074
  • 1
  • 14
  • 23
1

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

ullmark
  • 2,469
  • 1
  • 19
  • 28
0

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.

0

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; } }
}
Serhat Ozgel
  • 23,496
  • 29
  • 102
  • 138
0

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

Pang
  • 9,564
  • 146
  • 81
  • 122
Naresh Kumar
  • 1
  • 1