Using jQuery Selectors with ASP.NET Controls

 In this article by Sonal Aneel Allana, author of the book ASP.NET jQuery Cookbook-Second Edition, we will introduce the various types of selectors that can be used to work with ASP.NET controls.

(For more resources related to this topic, see here.)

A web page is composed of a variety of HTML elements, such as form, div, span, paragraph, hyperlink, table, input, select, and so on. When writing a client script, you almost always need to manipulate these elements. In JavaScript, it is possible to access these elements using their unique id with the help of the document.getElementById() statement.

However, in real world applications, there might be a need to retrieve elements based on attributes other than their ID and some applications might require retrieval and manipulation of more than one element. This is made possible by the use of selectors in jQuery.

A selector is a jQuery construct that retrieves elements on a page based on a specified condition. It can be used to return single or multiple elements. Using jQuery selectors, it is possible to match elements using their id, css class, tag name, and position in the Document Object Model (DOM) or other attributes.

When an ASP.NET page is viewed in the browser, the controls are rendered as HTML elements. This makes it possible to select ASP.NET controls using the standard jQuery selectors. The following table summarizes the mapping of some common ASP.NET controls to their rendered HTML equivalent.

ASP.NET control

Rendered HTML element

Rendered HTML Tag

BulletedList

ul, li

<ul><li></li>

<li></li></ul>

Button

input

<input type= "submit"/>

CheckBox

input

<input type= "checkbox"/>

CheckBoxList

input

<input type= "checkbox" name="CheckBoxList1"/>

<input type= "checkbox" name="CheckBoxList1"/>

DropDownList

select, option

<select><option></option>

<option></option></select>

Hyperlink

a

<a>

Image

img

<img>

ImageButton

input

<input type= "image"/>

Label

span

<span>

LinkButton

a

<a>

ListBox

select, option

<select><option></option>

<option></option></select>

Panel

div

<div>

RadioButton

input

<input type= "radio"/>

RadioButtonList

input

<input type= "radio" name="RadioButtonList1"/>

<input type= "radio" name="RadioButtonList1"/>

TextBox

input

<input type="text">

GridView

table

<table>

The standard jQuery selectors can also be used with ASP.NET MVC since MVC applications use raw HTML markup or built-in extension methods of the HTML class to render content.

The jQuery selectors can be broadly classified into the following types:

  • Basic Selectors: These selectors are similar to CSS selectors that are used in style sheets to apply styles to selected elements. The basic selectors can be used to retrieve elements based on the HTML tag, CSS class, element ID, or a combination of all these. The examples of some basic selectors are listed in the following section:

    Example

    Description

    $("*")

    Selects all elements on the page.

    $("div")

    Selects all <div> elements on the page.

    $(".highlight")

    Selects all elements on the page with CSS class highlight.

    $("#footer")

    Selects an element with id = footer.

    $("div, p, .highlight, #footer")

    Selects all <div> and <p> elements, all elements with CSS class highlight and the element with id = footer.

  • Hierarchy Selectors: These selectors are also similar to CSS selectors and are used for the purpose of selecting child elements in the DOM tree. Some examples of hierarchy selectors are listed, as follows:

Example

Description

$("div p")

Selects all <p> elements inside <div> elements.

$("#footer p")

Selects all <p> elements that are descendants of the element with id = footer.

$("div >  p")

Selects all <p> elements that are immediate children of <div> elements.

$("div ~  p")

Selects all <p> elements following a <div> element that have the same parent as the <div> element.

$("div +  p")

Selects all <p> elements that are immediately preceded by <div> elements.

  • Attribute Selectors: These selectors retrieve elements based on the attributes they have. Some attribute selectors are listed, as follows:

Example

Description

$("a[href]")

Selects all <a> elements that have href attribute.

$("a[href= 'http://www.google.com']")

Selects all <a> elements whose href is exactly equal to 'http://www.google.com'.

$("a[href*= 'google.com']")

Selects all <a> elements whose href contains 'google.com'.

$("a[href^= 'https']")

Selects all <a> elements whose href starts with 'https'.

$("a[href$= '.org']")

Selects all <a> elements whose href ends with '.org'.

$("a[hreflang|= 'en']")

Selects all <a> elements whose hreflang is equal to 'en' or starts with 'en-'.

  • Form Selectors: These selectors are used to work with various forms of elements, such as input, checkbox, radio, and so on. Some form selectors are listed in the next section:

Example

Description

$(":button"), $(":submit"), $(":reset"), $(":text"), $(":radio"), $(":checkbox"), $(":password"), $(":image"), $(":file")

Selects the input element of the specific type.

$(":input")

Selects all form elements.

$(":checked")

Selects all checked checkboxes and radio buttons.

$(":selected")

Returns all selected <option> elements.

$(":enabled")

Returns all enabled form elements.

$(":disabled")

Returns all disabled form elements.

  • Position Filters: These selectors retrieve elements based on their position in a collection. A few examples of position selectors are listed, as follows:

Example

Description

$(".highlight :first")

Selects the first element with the CSS class highlight.

$(".highlight :last")

Selects the last element with the CSS class highlight.

$(".highlight :odd")

Selects the odd elements from all the elements with CSS class highlight, when the index is zero based.

$(".highlight :even")

Selects the even elements from all the elements with CSS class highlight when the index is zero based.

$(".highlight :eq(3)")

Selects the element with index = 3 from all the elements with CSS class highlight, when the index is zero based.

$(".highlight :lt(3)")

Selects elements with index < 3 from all the elements with CSS class highlight, when the index is zero based.

$(".highlight :gt(3)")

Selects elements with index > 3 from all the elements with CSS class highlight when the index is zero based.

Find out more about the different type of jQuery selectors from http://api.jquery.com/category/selectors.

The anonymous functions are often used when writing a jQuery code. An anonymous function is a function without a named identifier. It is usually used as an argument for other functions.

Let's say, we have a function named onDocumentReady(). This function is passed as an argument to the $(document).ready() function as follows:

function onDocumentReady(){…}
 
$(document).ready(onDocumentReady);

Instead of working this way, an anonymous function can be directly passed as an argument to $(document).ready(), as follows:

$(document).ready(function(){ …} );

However, do note that the anonymous functions are not accessible once they have been created.

Summary

In this article we have seen what are the different kinds of jQuery selectors are used with the ASP.Net controls while creating a web page. 

Resources for Article:


Further resources on this subject:


You've been reading an excerpt of:

ASP.NET jQuery Cookbook - Second Edition

Explore Title