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

问题

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

回答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

回答2:

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

回答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.

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

回答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.

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

回答7:

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

来源：https://stackoverflow.com/questions/261845/webforms-and-jquery-how-to-match-the-ids

标签

ASP.NET

jquery

web-controls