ASP.NET Futures (July 2007): CSS Selectors and Creating Multiple Components with ASP.NET AJAX
This section provides information about the following features:
- Using CSS Selectors. New methods enable you to query the DOM to obtain a list
of elements that reference a specific CSS class name or selector.
- Creating multiple components. A new method enables you to create multiple components
of a given type for an array of DOM elements.
ASP.NET Futures (July 2007) Release The following changes and additions have been introduced:
- The
getElementListBySelectors has been renamed selectAllElements. This change follows
changes proposed by the W3C.
- The
getElementListByClassName method has been renamed getElementsByClassName. This change
makes the method consistent with the previous change.
- The
selectElement method has been added. This method is also in line with W3C recommendations.
If you want to apply multiple actions or behaviors to a set of DOM elements in a
page, you normally must select each element and then associate an ASP.NET AJAX component
with it by using its constructor or the $create method. For example,
you might want to associate Highlight and Expand behaviors with text boxes in a page
by using a function such as $create(Custom.HighlightExpandBehavior, null, null, null, $get('AddressTb')).
You can use CSS classes or selectors to select from a set of DOM elements. You can also use
the createMultiple method to associate a behavior or control with elements
that have been selected by using CSS syntax.
Note The CSS class name refers to the name associated with a CSS rule. In CSS, pattern matching
rules define which style rules to apply to DOM elements. The selectors are the patterns. The ASP.NET
Futures (July 2007) release supports only a limited range of the CSS pattern matching rules or selectors. In
particular, it supports only CSS 1.0 rules, which are based on id, class, and tag name.
The following examples illustrate the methods described in this section.
CSS selection methods
CSS Selection Methods
|
Top |
The selectAllElements and getElementsByClassName methods enable
you to select multiple DOM elements based on CSS selectors or on CSS class names. The following example shows how to use the methods.
<script language="JavaScript">
function pageLoad() {
// Select all elements from the root with a CSS class of 'textInput'.
var elements = Sys.UI.DomElement.getElementsByClassName('textInput');
...
// Select all span elements based on the selector
var elements2 = Sys.UI.DomElement.selectAllElements('span');
}
</script>
Usage
You can also use the selectElement method to get a reference to an element that matches a given
CSS selector. The following sample shows this.
<script language="JavaScript">
function pageLoad() {
// Select the first DOM element that matches the selector 'span'.
var element = Sys.UI.DomElement.selectElement('span');
..
}
</script>
Usage
Creating Multiple Components
|
Top |
The existing Sys.Component.createComponent method (aliased as $create)
enables you to create a client component and attach it to a DOM element; set its
properties, events, and references; and automatically have it initialized and registered
with the Sys.Application instance. However, the $create
method can perform this task for only one DOM element at a time.
The Sys.Component.createMultiple method can associate a component
with multiple DOM elements. For example, you can use this method to attach the same
behavior to a set of text box controls. The method takes an array that contains
the list of DOM elements to associate the component with. (You can obtain the array
of DOM elements using the CSS selector methods described earlier.)
<script language="JavaScript">
function pageLoad() {
var elements = Sys.UI.DomElement.getElementsByClassName('textInput');
// Create a number of custom required field behaviors against the DOM elements
if (elements)
Sys.Component.createMultiple(elements, Custom.RequiredFieldBehavior,
{name:'requiredFieldBehavior'}, {}, {});
}
</script>
Usage
Create multiple components
|