Using Javascript (DOM) with ASP.NET

Question

I have an asp.net page with several list boxes.

I would like to include some javascript on the page that allows a user to drag individual list elements from one box to another.

On a normal web page, the script to do this is reasonably simple, however, with the element IDs generated by ASP.NET, I don't know what identifiers to have my script look up?

Any thoughts on how to do something like this?

Answer 1

Check out the ClientId property of the Control class.

Note: The ASP.NET ListBox control inherits from Control.

Update

In reponse to the comments below, I can think of two ways to access the individual li elements of an unordered / ordered list generated by the ListBox control.

• Create a custom Control that inherits from the ListBox control and renders out an id attribute for each li element.
• Use the getElementsByTagName method in JavaScript. MSDN even has an example that uses the getElementsByTagName method to get the children of an unordered list and displays an alert indicating the number of children and the value of the first child element. If the MSDN documentation isn't your thing, you can check out the MDC documentation as well.

Answer 2

Add a identifying CSS class to your elements and use those. i.e. jQuery has a superb support for that so you can grab all elements and loop through them to do whatever you want.

Answer 3

You could either use the ClientId property as stated by paper1337

var element = document.getElementById('<%= MyDropDownList.ClientID %>');

or you could implement a AJAX Behavior using AjaxControlToolkit.

Code:

[assembly: WebResource("MyJS.js", "text/javascript")]

[ClientScriptResource("MyBehavior", "MyJS.js")]
public sealed class MyExtender : BehaviorBase {
    // can be empty
}

Markup:

<asp:DropDownList runat="server" ID="DDL" />
<my:MyExtender runat="server" TargetControl="DDL" />

MyJS.js (See AjaxControlToolkit samples for details):

...

var element = this.get_element();
...