ASP.NET jQuery Cookbook (Second Edition)

Chapter 2. Using jQuery Selectors with ASP.NET Controls

This chapter will introduce you to the various types of selectors that can be used to work with ASP.NET controls. We will cover the following recipes in this chapter:

Selecting a control using an ID and displaying its value
Selecting a control using the CSS class
Selecting a control using HTML tag
Selecting a control by its attribute
Selecting an element by its position in the DOM
Enabling/disabling controls on a web form
Using selectors in MVC applications

Note

The source code provided with the book has each recipe written as an independent project and named as Recipe1, Recipe2, Recipe3, and so on.

Selecting a control using ID and displaying its value

This recipe demonstrates how to access basic ASP.NET controls, such as CheckBoxList, TextBox, and RadioButtonList on a web form using jQuery's #identifier selector. The constructs used in this example are as follows:

Construct	Type	Description
`$(#identifier)`	jQuery selector	This selects an element based on its `ID`
`$(this)`	jQuery object	This refers to the current jQuery object
`:checked`	jQuery selector	This selects checked input elements
`.click()`	jQuery event binder	This binds a handler to the `click` event of an element
`.each()`	jQuery method	This iterates over the matched elements and executes a function for each element
`.find()`	jQuery method	This finds all elements that match the filter
`.html()`	jQuery method	This returns the HTML content of the first matched element or sets the HTML content of every matched element
`.is()`	jQuery method	This returns a Boolean value if the matched element satisfies...

Selecting a control using the CSS class

This recipe will demonstrate how to access ASP.NET controls, such as Image, Panel, and BulletedList based on the CSSClass assigned to them. The constructs used in this example are as follows:

Construct	Type	Description
`$(".class")`	jQuery selector	This matches all elements with the specified CSS class.
`.attr("name") OR` `.attr("name", "value")`	jQuery method	This returns a string with the required attribute value of the first matched element. It can also be used to set the attribute to the required value.
`.click()`	jQuery event binder	This binds a handler to the `click` event of an element.
`event.preventDefault()`	jQuery method	This prevents the default action of the event from being triggered.
`.hide()`	jQuery method	This hides the matched elements.
`.is()`	jQuery method	This returns a Boolean value if the matched element satisfies a given condition.
`.next()`	jQuery method	This gets...

Selecting a control using HTML tag

This recipe demonstrates how to access ASP.NET controls using the corresponding HTML tag generated at runtime. We will demonstrate how to use the GridView control, which generates the table HTML tag. Each row of the GridView renders the tr HTML tag. This example uses the following constructs:

Construct	Type	Description
`$("html_tag")`	jQuery selector	This selects all elements with the specified HTML tag
`$(this)`	jQuery object	This refers to the current jQuery object
`.addClass()`	jQuery method	This adds the specified CSS class to each matched element
`[attribute$="value"]`	jQuery selector	This selects an element with the specified attribute, ending with the string `"value"`
`:checkbox`	jQuery selector	This selects only checkbox elements from the matched elements
`.click()`	jQuery event binder	This binds a handler to the `click` event of an element
`.find()`	jQuery method	This finds all elements matching...

Selecting a control by its attribute

In this recipe, we will select ASP.NET controls based on a particular attribute they have. The demonstration uses the NavigateUrl property of ASP.NET Hyperlink controls, which is rendered as an href attribute of the anchor tag. The constructs used are summarized as follows:

Construct	Type	Description
`$("#identifier")`	jQuery selector	This selects an element based on its `ID`
`.addClass()`	jQuery selector	This adds the specified CSS class to each matched element
`[attribute*="value"]`	jQuery selector	This selects an element with the specified attribute containing the string `"value"`
`.click()`	jQuery event binder	This binds a handler to the `click` event of an element
`event.preventDefault()`	jQuery method	This prevents the default action of the event from being triggered
`.focus()`	jQuery event binder	This triggers the `focus` event of an element or binds an event handler to the `focus` JavaScript event
`...`

Selecting an element by its position in the DOM

This recipe demonstrates how to use an element's position with respect to its parent when you access it in the DOM tree. We will use the ASP.NET ListBox control for this purpose. The constructs used in this example are as follows:

Construct	Type	Description
`$("#id > *")`	jQuery selector	This selects all descendant elements of the control with the specified ID.
`$("#id :first-child")`	jQuery selector	This selects the first child element of the control with the specified ID.
`$("#id :last-child")`	jQuery selector	This selects the last child element of the control with the specified ID.
`$("#id :lt(i)")`	jQuery selector	This selects all child elements of the control with the specified ID that have an index less than `i`. Note that the index starts at zero.
`$("#id :gt(i)")`	jQuery selector	This selects all child elements of the control with the specified ID that have an...

Selecting a control using ID and displaying its value

Construct	Type	Description
`$(#identifier)`	jQuery selector	This selects an element based on its `ID`
`$(this)`	jQuery object	This refers to the current jQuery object
`:checked`	jQuery selector	This selects checked input elements
`.click()`	jQuery event binder	This binds a handler to the `click` event of an element
`.each()`	jQuery method	This iterates over the matched elements and executes a function for each element
`.find()`	jQuery method	This finds all elements that match the filter
`.html()`	jQuery method	This returns the HTML content of the first matched element or sets the HTML content of every matched element
`.is()`	jQuery method	This returns a Boolean value if the matched element satisfies...

Amazon Customer Mar 22, 2016

A very interesting cookbook that helps you put your ASP.NET knowledge and the power of jQuery into action.This book is up-to-date with the latest version of ASP.NET and jQuery. You will be able to progress smoothly from the basics to selectors, traversals, events, visual effects, Ajax, and plugins.Through the 60 recipes, you will be able to experiment with the power of jQuery in ASP.NET web forms and MVC applications.For every recipe, the author provides a list of jQuery features that will be covered in that recipe with their description!Another interesting feature about this book is the author's attention to details and full coverage. For instance, In chapter 7 that talks about Ajax, the author covers the web service examples using page methods, WCF, and Web API!! When necessary, the code is available in C# and VB.NET!

Amazon Verified review

Tom Aug 11, 2016

The data in this book is apparently meant to be formatted 2 columns with a code example in one column, and a description of what the example represents in the second column. Unfortunately, the way the information is displayed in the kindle is (top to bottom) all the information from the first column, then information in the second column further down the page, or in many cases on a second or third page. This makes the information cumbersome at best to read/ understand. Perhaps the book formats differently on a computer, but for a kindle/ tablet user I cannot recommend the digital purchase of this book

ASP.NET jQuery Cookbook (Second Edition): Over 60 recipes for writing client script in ASP.NET 4.6 applications using jQuery , Second Edition

What do you get with eBook?

ASP.NET jQuery Cookbook (Second Edition)

Chapter 2. Using jQuery Selectors with ASP.NET Controls

Note

Introduction

Selecting a control using ID and displaying its value

Selecting a control using the CSS class

Selecting a control using HTML tag

Selecting a control by its attribute

Selecting an element by its position in the DOM

Introduction

Selecting a control using ID and displaying its value

Page 1 of 9

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with eBook?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the authors

FAQs

ASP.NET jQuery Cookbook (Second Edition): Over 60 recipes for writing client script in ASP.NET 4.6 applications using jQuery , Second Edition

What do you get with eBook?

Contact Details

Billing Address

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with eBook?

Contact Details

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the authors

FAQs