beginning jquery 2 for asp.net developers

Joshi

Shelve in

.NET

User level:

Beginning–Intermediate

www.apress.com

SOURCE CODE ONLINE

BOOKS FOR PROFESSIONALS BY PROFESSIONALS®

Beginning jQuery 2

for ASP.NET Developers

By combining jQuery with ASP.NET you get the best of both worlds: the client-side interactivity

and responsiveness of JavaScript with the robustness and extensibility of Microsoft’s web stack.

Beginning jQuery 2 for ASP.NET Developers shows you how.

To begin with, you’ll find out how jQuery hooks up with your ASP.NET controls, and simplifies

event handling by keeping it in the browser. Then you’ll learn to handle dynamic content by

interacting with the DOM. Effects and animations are one of the most popular uses of the jQuery

library, so we cover that next—showing you how to get a sleek modern look and feel to your site

using some of the vast library of JavaScript that’s already out there waiting to be used.

Ajax is one of the areas where jQuery really shines, so you’ll find out how to make Ajax calls to

web services and APIs, to get data onto a page without waiting for slow ASP.NET postbacks every

time. And no book on jQuery would be complete without a first look at jQuery Mobile, to get you

started building sites that work on all the major mobile platforms.

What You’ll Learn:

• How to select DOM elements using powerful jQuery selectors

• Use jQuery with ASP.NET server controls, ASP.NET MVC form fields and other DOM elements

• Manipulate and traverse the DOM tree and add jQuery effects to ASP.NET web pages

• Learn to make Ajax calls and pass JSON data to Web Services, Page Methods, WCF services,

controller action methods, HTTP handlers and Web APIs

• Understand code reuse by creating and using jQuery plugins

• Get introduced to jQuery UI and jQuery mobile and use them in ASP.NET Web Forms and MVC

applications

9 781430 263043

ISBN 978-1-4302-6304-3

54499

www.it-ebooks.info

For your convenience Apress has placed some of the front

matter material after the index. Please use the Bookmarks

and Contents at a Glance links to access them.

www.it-ebooks.info

Contents at a Glance

About the Author �� xv

About the Technical Reviewer �� xvii

Acknowledgments�� xix

Introduction�� xxi

■Chapter 1: The JavaScript You Need to Know ��1

■Chapter 2: A First Look at jQuery ��33

■Chapter 3: ASP.NET Controls and jQuery Selectors��63

■Chapter 4: Event Handling ��103

■Chapter 5: DOM Manipulation and Dynamic Content��135

■Chapter 6: Traversal and Other Useful Methods ��157

■Chapter 7: Effects and Animations ��179

■Chapter 8: Ajax Techniques ��193

■Chapter 9: Creating and Using Plugins��231

■Chapter 10: jQuery UI and jQuery Mobile ��255

■Chapter 11: Useful jQuery Recipes for ASP.NET Applications ��281

■Appendix: Learning Resources��301

Index��303

www.it-ebooks.info

xxi

Introduction

Welcome to the exciting world of jQuery! If you’re an ASP.NET developer looking to turbocharge your ASP.NET

applications with jQuery, you picked the right book. Modern web applications leverage browsers’ resources through

client-side scripting. Although JavaScript is a de facto standard as far as client-side scripting is concerned, there are

several libraries built on top of JavaScript that help developers accomplish their job quickly and easily. jQuery is one

of the most popular JavaScript libraries available today. If you want to develop Ajax-driven, dynamic, and

cross-browser web applications using ASP.NET, understanding jQuery is an invaluable skill.

While using jQuery in ASP.NET Web Forms and ASP.NET MVC projects, you need to combine the power of

jQuery with server controls, controllers, services, and APIs. It is crucial to understand how jQuery can be used

effectively in combination with ASP.NET features and technologies.

To that end, this book teaches you how to harness the power of the jQuery library in your ASP.NET Web Forms

and MVC applications. It helps you understand the foundations of jQuery from the perspective of an ASP.NET

developer in a clear, step-by-step way, so that you can quickly ensure you have this invaluable skill under your belt.

Who This Book Is For

This book is for ASP.NET web developers who want to tap the power of jQuery in their existing or new web

applications. This book doesn’t teach you ASP.NET features. I assume that you’re already comfortable working with

ASP.NET and doing web application development in general.

All the code samples discussed in this book use C# as the server-side programming language, so you should

also know C#. Although no prior knowledge of jQuery is expected, I assume that you’re familiar with the basics of

JavaScript.

The examples illustrated throughout the book use SQL Server and Entity Framework. Although you need not

have a detailed understanding of these technologies, you should at least be familiar with them.

The book uses Visual Studio as the development tool. You should know how to work with Visual Studio to

perform basic tasks such as creating projects and debugging code.

Software Required

To work through the examples in this book, you need the following software:

• Visual Studio 2013

• SQL Server 2012

• jQuery, jQuery UI, and jQuery Mobile library files

• Web browsers: Internet Explorer 9+, Firefox, Chrome, Opera, and Safari

Although I used Visual Studio Ultimate 2013 to develop the book’s examples, most of the examples can also be

developed using Visual Studio Express 2013 for Web.

www.it-ebooks.info

■ Introduction

xxii

All the data-driven examples were developed using SQL Server 2012 Express Edition. I use the Northwind sample

database in many examples, and I suggest you install it. You can download the Northwind database and its script from

the MSDN downloads web site.

I used jQuery 2.0.3 to write the examples presented in this book. You should consider downloading the latest

versions of jQuery, jQuery UI, and jQuery Mobile from their official web sites.

It’s always a good idea to test the client scripts you write in all the major browsers. So you might consider

installing the latest versions of Internet Explorer, Firefox, Chrome, Opera, and Safari.

How This Book Is Structured

This book is organized into 11 chapters and one appendix. Here’s a quick overview:

• Chapter 1 gives you a quick recap of JavaScript programming. You can brush up on your

JavaScript skills before taking on jQuery.

• Chapter 2 gives you a peek into jQuery. You learn the basics, such as downloading and

installing jQuery on your machine. You also develop a simple application in ASP.NET Web

Forms and MVC.

• Chapter 3 gives you a detailed understanding of jQuery selectors. You learn to match DOM

elements using powerful and flexible selectors. This chapter also details techniques to deal

with server controls while selecting them in the jQuery code.

• Chapter 4 teaches you one of the most commonly used features: event handling. It covers

commonly used events such as window, keyboard, and mouse events. Some advanced concepts

relating to event handling, such as passing custom data to the event handler, are also covered.

• Chapter 5 is about DOM manipulation using jQuery. Topics covered include applying CSS

styles, working with attributes, and manipulating DOM elements.

• Chapter 6 covers DOM navigation and filtering techniques, including tree traversal, iterating,

searching, working with custom data attributes, and more.

• Chapter 7 teaches you how to apply jQuery effects and animations to Web Form controls

and page elements. You learn to apply fancy effects such as fade-in, fade-out, slide-up and

slide-down. You also learn to apply custom animation effects to page elements.

• Chapter 8 covers an important topic: Ajax techniques offered by jQuery. This chapter discusses

how ASMX web services, WCF services, MVC action methods, and the Web API can be called

from the jQuery code. It also discusses the JSON format and its use in Ajax communication.

• Chapter 9 discusses plugins—a technique to extend the jQuery core. You can develop plugins

to enhance and extend the core functionality offered by jQuery. The chapter discusses the

steps involved in building a plugin and gives you some recommendations to be followed

during the process.

• Chapter 10 gives you an overview of jQuery UI and jQuery Mobile. jQuery UI provides various

widgets that you can add to ASP.NET web applications to provide professional user interface

elements such as dialogs, menus, accordions, and sliders. jQuery Mobile helps you develop

web applications targeted at mobile devices.

• Chapter 11 presents a few recipes that you will find useful in real-world applications. The

recipes covered include implementing Ajax-based paging, client-side sorting, file upload,

autocomplete text box, and cascading drop-down lists.

• The Appendix lists some jQuery learning resources.

www.it-ebooks.info

■ Introduction

xxiii

Downloading the Source Code

The complete source code for the book is available for download at the book’s companion web site. Visit

http://www.apress.com and go to the book’s information page at http://www.apress.com/9781430263043. You can

then download the source code from the Source Code/Downloads section.

Contacting the Author

You can reach me via my web site: http://www.binaryintellect.net. You can also follow me on popular

social-networking web sites such as Facebook and Twitter (visit my web site for details).

www.it-ebooks.info

Chapter 1

The JavaScript You Need to Know

JavaScript is a programming language that adds interactivity and dynamic content to otherwise static HTML pages.

Behind most fancy frills such as mouseover effects, animations, drop-down menus, and form validations, you will

usually find JavaScript being used in some way or another. jQuery is a JavaScript library that simplifies your client-side

programming tasks and uses the same programming constructs as JavaScript for variables, branching, and looping.

While writing jQuery code, you often need to use these JavaScript programming constructs. Therefore, before you

delve into jQuery programming, you must refresh your JavaScript skills. This chapter is intended to give you a quick

overview of commonly used JavaScript features so that you can use the knowledge gained in this chapter in the

remainder of the book. If you are already familiar with JavaScript, you can skip this chapter, or glance over its content

and jump to the next chapter.

Specifically, you will learn how to do the following:

• Understand basic programming constructs used in JavaScript for branching and looping

• Work with JavaScript variables and data types

• Use built-in string, number, and date functions

• Create and use your own functions

■ Note Although this chapter is intended to give you an overview of the JavaScript language, it does not

cover all JavaScript features. For more information on JavaScript programming, see

https://developer.mozilla.org/en-US/docs/Web/JavaScript.

Your First JavaScript Program

In this section, you will develop a simple ASP.NET Web Form that makes use of JavaScript to seek a confirmation

from the end user. Although the application is not very sophisticated, it does throw light on some basics of JavaScript.

Figure 1-1 shows the Web Form you will develop.

www.it-ebooks.info

Chapter 1 ■ The JavaScript You Need to Know

As shown in Figure 1-1, the Web Form consists of a couple of Label controls, a TextBox, and a Button server

control. Once you enter a name and hit the Submit button, a confirmation dialog is shown that seeks your consent to

submit the form. Depending on your choice, either the form submission is canceled or the form is submitted to the

server. Upon postback, the entered name is displayed in a Label control.

To begin developing this application, create a new ASP.NET Web Application based on the Empty project template using

Visual Studio (see Figure 1-2).

Figure 1-1. Your first JavaScript program

Figure 1-2. Creating a new ASP.NET Empty Web Application using Visual Studio

www.it-ebooks.info

Chapter 1 ■ The JavaScript You Need to Know

Add a new Web Form to the project and name it FirstJS.aspx. Design the Web Form as shown in Figure 1-1 by

dragging and dropping the respective server controls from the toolbox. The HTML and server control markup of the

Web Form is shown in Listing 1-1.

Listing 1-1. Markup of FirstJS.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FirstJS.aspx.cs" Inherits="Chapter_01.

FirstJS" %>

...

<body>

<h1>First JavaScript Program</h1>

<asp:Label ID="Label1" runat="server" Text="Enter your name :"></asp:Label>

<br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br />

<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />

<asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>

</form>

</body>

</html>

The markup contains two Label controls: one that acts as the prompt for the name text box, and the other that is

placed below the Submit button. The server-side click event handler of Button1 simply outputs the name entered by

the user in Label2. Listing 1-2 shows this event handler.

Listing 1-2. Submit Button Server-Side Click Event Handler

protected void Button1_Click(object sender, EventArgs e)

{

Label2.Text = "Hello " + TextBox1.Text;

}

So far, the application doesn’t use any JavaScript. In the next step, you add some JavaScript code that is invoked

when the user clicks the Submit button. To do so, modify the markup of the Submit button as shown here:

<asp:Button ID="Button1" runat="server" Text="Submit" OnClientClick="return confirmName();" ... />

You can add the OnClientClick attribute in two ways: you can either switch to the source view of Visual Studio

IDE and key in the markup shown in bold letters, or set the OnClientClick property of Button1 in the Properties

window. The OnClientClick property is used to specify the client-side (JavaScript) code that is to be executed when

the button is clicked. In this case, you set the OnClientClick property to return confirmName(). confirmName() is a

custom JavaScript function that you will write next.

Go into the <head> section of the Web Form and add a <script> block, as shown in Listing 1-3.

www.it-ebooks.info

Chapter 1 ■ The JavaScript You Need to Know

Listing 1-3. confirmName() Function

function confirmName() {

var textbox = document.getElementById("TextBox1");

var flag = window.confirm("You entered : " + textbox.value + "\n\nDo you wish to continue?");

if (flag) {

return true;

}

else {

return false;

}

</script>

The <script> block shown in Listing 1-3 contains a custom JavaScript function named confirmName(). The

confirmName() function is intended to seek confirmation from the end user and accordingly cancel or continue with

the form submission. First, it grabs a reference to the text box using the getElementById() method of the document

object. The document object represents the current web page loaded in the browser window. The getElementById()

method accepts an ID of an HTML element and returns a Document Object Model (DOM) object representing the

element. The return object is stored in a JavaScript variable named textbox. Notice the use of the var keyword to

declare a variable.

■ Note The Document Object Model, or DOM, is a tree structure of the entire HTML page loaded in the browser

window. Each HTML element from the page has a corresponding object in the DOM tree that can be used to manipulate

the underlying HTML element.

The next line declares a JavaScript variable named flag to store the return value of a built-in function:

window.confirm(). The confirm() function belongs to the window object and allows you to display a dialog to the user

with a developer-defined message. The dialog has OK and Cancel buttons. If the user selects OK, confirm() returns

a Boolean value of true; otherwise, it returns false. The window object represents the container of the document being

displayed (the browser window or a tab in which the page is loaded).

In this example, you display the name entered by the user. Notice the use of the escape sequence \n\n in the

message string to add new lines in the message. The value property of the text box DOM element returns the text

entered in the text box. An if-else block checks the flag variable. If flag is true, the if block returns true; otherwise,

the else block returns false. Depending on the value returned by the confirmName() function, the form is submitted

(true) or the form submission is canceled (false).

■ Note Although confirm() is a method of the window object, in most of the browsers you can simply call it as if it

were a stand-alone function. So, window.confirm() and confirm() mean the same thing in your JavaScript code.

Refer to Figure 1-1 again. Can you see the timestamp printed in the footer of the Web Form? That’s the job of

another <script> block that you place just above the </body> (the end body tag). Listing 1-4 shows this <script> block.

www.it-ebooks.info

Chapter 1 ■ The JavaScript You Need to Know

Listing 1-4. Outputting the Timestamp in the Page Footer

...

</form>

document.write("<hr />");

document.write("Page rendered on " + new Date().toString());

</script>

</body>

This time, you use another method of the document object: write(). The write() method accepts a string

and writes it in the document at the place where the call to write() is placed. In this case, the first call to write()

outputs a horizontal rule; the second call outputs the timestamp. Notice how the timestamp is obtained: you use the

JavaScript Date object and invoke its toString() method to get a string representation of the current date and time.

This completes your code. Run the Web Form in the browser, enter a name in the text box, and click the Submit

button. Figure 1-3 shows a sample run of the Web Form.

Figure 1-3. Sample run of the Web Form

Notice that the name entered by the user is displayed, followed by new lines and then the message seeking

confirmation.

Basic Programming Constructs

Like most other programming languages such as C# and Visual Basic, JavaScript has its own language constructs.

These constructs form the building blocks for writing simple to complex programs. By using these constructs, you

accomplish programming tasks such as conditional execution of your code and looping. This section discusses some

constructs you will use every day while working with JavaScript.

www.it-ebooks.info

Chapter 1 ■ The JavaScript You Need to Know

Statements

A JavaScript program consists of one or more statements. Simply put, a statement is an instruction to the JavaScript

engine to do something. Every statement ends with a semicolon (;). For example, here are a couple of statements:

document.write("Hello World!");

var textbox = document.getElementById("TextBox1");

The first statement uses the write() method of the document object to output a string: Hello World! The second

statement declares a variable named textbox and stores a reference to the TextBox1 DOM element in it.

Comments

Comments are used to add explanatory text to your program. As a good developer, you should place comments in

your code so that you and fellow developers can understand the code at some later stage. JavaScript has two types

of comments: single line comments and block comments. The syntax for both of them is exactly the same as C#

commenting syntax. The following example makes it clear:

// this is a single line comment

This is a block comment

That can span multiple lines

Keep in mind that JavaScript code gets downloaded from the web server to the client browser. Every line

of comment that you add to the code also adds to the overall network bandwidth, so you should use ASP.NET’s

“minification” feature to strip away comments to make the resulting code compact and tidy. Of course, during

development you can place comments as required to ease the overall debugging experience and apply minification to

the release version of the JavaScript code.

■ Note Minification of JavaScript involves many steps, including removal of white spaces, new line characters,

comments, and so on. Of course, the minification process preserves the original functionality of the code.

Built-in Functions

Earlier in this chapter, you created a function called confirmName(). This was a developer defined function. JavaScript

also has several built-in functions that you can use in your code. Just like any .NET Framework method, a JavaScript

function encapsulates certain functionality so you need not rewrite it. For example, the confirmName() function that

you created earlier uses a built-in function, confirm(), which displays a developer defined message to the end user

and seeks confirmation in the form of OK and Cancel. Two more JavaScript functions that you will find yourself using

often are alert() and prompt().

Let’s modify the confirmName() function to use these two functions. Listing 1-5 shows the modified

confirmName() function that makes use of alert() and prompt().

www.it-ebooks.info

Chapter 1 ■ The JavaScript You Need to Know

Listing 1-5. Using alert() and prompt()

function confirmName() {

var textbox = document.getElementById("TextBox1");

alert("You will now be asked to enter your name.");

var enteredName = prompt("Please enter your name below:", "name goes here...");

var flag = confirm("You entered : " + enteredName + "\n\nDo you wish to continue?");

if (flag) {

textbox.value = enteredName;

return true;

}

else {

return false;

}

Notice the lines marked in bold. The first line uses alert() to display a message box to the user with a specified

text. The alert dialog has an OK button. The second line uses the prompt() function to prompt the user to enter a

name. The prompt() function displays a dialog with a text box and has OK and Cancel buttons. The two parameters

supplied to prompt() are the prompt text and a default value for the text box. Figure 1-4 shows how these two dialogs

are displayed in Chrome.

Figure 1-4. The alert() and prompt() functions displayed in Chrome

Notice that the prompt dialog displays a default value in the text box. Once the user clicks OK, the prompt()

function returns the entered value (or the default value if the user didn’t make any changes). If the user clicks Cancel,

prompt() returns null. In the previous example, after the user clicks the OK button of the prompt dialog, you seek a

confirmation from the user about the form submission. If a user wants to submit the form, you assign the enteredName to

the text box’s value property. This way, the server-side code still finds the value entered by the user in the prompt dialog.

www.it-ebooks.info

Chapter 1 ■ The JavaScript You Need to Know

■ Tip JavaScript contains many built-in objects and functions. This section merely touches on a few of them. As you

continue through the book, you will come across other built-in functions that will be discussed.

Data Types

Unlike .NET languages such as C# and Visual Basic, JavaScript doesn’t offer a plethora of data types. Broadly speaking,

data involved in JavaScript can be of the string, number, Boolean, and object data types.

String

The string data type is used often in JavaScript programs. JavaScript strings are enclosed in either double quotes (“...”)

or single quotes ('...'). This is unlike C#, in which strings are always enclosed in double quotes, and a character is

enclosed in single quotes. A string enclosed in quotes can include quotes as part of the string data. However, you need

to use the escape character (\) to embed quotes into a string. The following are a few examples of JavaScript strings:

"Hello World!"

'Hello Universe!'

"Hello 'Tom'"

'Hello "Jerry"'

"Hello \"Tom & Jerry\""

The first two examples are quite straightforward. The third string embeds single quotes inside a double quote,

and the third string embeds double quotes inside single quotes. Although this process doesn’t create any problem for

the code, if you want to embed double quotes in a string that uses double quotes as the enclosure, you need to escape

the embedded double-quote characters (as shown in the last example). The same principle applies to single-quote

characters embedded in a string enclosed by single quotes.

Number

Just like C#, you can use numbers in JavaScript. Unlike C#, in which there are different data types such as int, float,

decimal, and double to represent a number, JavaScript treats all types of numeric values as numbers. A number can be

an integer or a floating point number, and it can be positive or negative. Unlike strings, numbers don’t use enclosures.

Following are a few examples of JavaScript numbers:

100

1.23

-200

Boolean

Boolean data types can hold one of the two values: true or false. Commonly Boolean values are used while

conditionally checking something. They are also used as flags to indicate some state within a program. JavaScript

Boolean values are quite similar to the C# bool data type.

www.it-ebooks.info

Chapter 1 ■ The JavaScript You Need to Know

Object

In addition to the string, number, and Boolean data types, JavaScript code often uses objects. An object can be built-in

or developer defined. For example, while working with dates and times, you use the JavaScript Date object. While

making Ajax calls to the server you often send and receive data as a custom object. These are developer defined

objects and are often referred to as JavaScript Object Literals or plain objects.

Variables

In .NET languages such as C#, you normally declare a variable of a specific data type to store some value. For example,

a variable of type int is declared in C# as follows:

int a = 100;

Unlike C#, JavaScript doesn’t allow you to declare a variable with a specific data type; it has the keyword var for

declaring any type of variable. Depending on whether you store a string, a number, or a Boolean value in the variable,

it is treated as a string, a number, or a Boolean. Consider the following variables:

var name = "Tom";

var age = 25;

var flag = true;

In the preceding example, name is a string variable, age is a numeric variable, and flag is a Boolean variable. It is

not necessary to assign a value to a variable at the time of declaring it. If no value is assigned to a variable, it is treated

as undefined. Have a look at the following code fragment:

var myvariable;

alert(typeof myvariable);

myvariable = "Tom";

alert(typeof myvariable);

myvariable = 100;

alert(typeof myvariable);

The first line of the code block declares a variable named myvariable. It then uses alert() and the typeof

operator to display the type of the variable. Because myvariable is not yet assigned, the first alert() displays

‘undefined’. Then the code assigns a string "Tom" to myvariable, and the second alert() displays the type of

myvariable as ‘string’. Then a value of 100 is assigned to myvariable, and the third alert() displays the type of

myvariable as ‘number’. Notice that the same variable is treated first as a string and then as a number, depending on

the value it holds.

■ Caution Although you can store different types of data in the same variable (string and number, for example),

you should avoid doing so because it makes your code hard to understand and can introduce errors that are difficult

to trace.

Thư viện tri thức trực tuyến

beginning jquery 2 for asp.net developers

Nội dung xem thử

Mô tả chi tiết

Tài liệu tương tự (6)

wiley beginning javascript and css development with jquery (2009)

Tài liệu Beginning jQuery pdf

Tài liệu Beginning JavaScript and CSS Development with jQuery ppt

Beginning programming with java for dummies

Beginning employment law

Beginning ajax with ASP.NET