ASP.NET 4 Unleased - p 180 pot

To learn more about the properties that you can use with each of these different types of animations, refer to the Animation Reference included with the ASP.NET AJAX Control Toolkit Samp

Trang 1

Discrete Animation—Plays an animation by setting a property of the target

element to a sequence of values

Interpolated Animation—Plays an animation by changing a property gradually

between a range of values represented by startValue and endValue

Color Animation—Plays an animation by changing a property gradually between a

range of values represented by a start color and an end color

Length Animation—Plays an animation by changing a property gradually between

a range of values representing a start and end unit of length

Move Animation—Plays an animation by moving an element (either relatively or

absolutely) across the page

Resize Animation—Plays an animation by resizing an element by changing the

element’s width and height

Scale Animation—Plays an animation by resizing an element by using a scale

factor

Enable Action—An action that disables or enables an element on the page (such as

a Button control)

Hide Action—An action that hides an element by setting display:none

Style Action—An action that applies a style attribute to an element.

Opacity Action—An action that modified the transparency of an element.

Script Action—An action that executes a JavaScript script.

To learn more about the properties that you can use with each of these different types of

animations, refer to the Animation Reference included with the ASP.NET AJAX Control

Toolkit SampleWebSite website

The final Toolkit control that we need to discuss in this chapter is the

UpdatePanelAnimation extender control This control can play an animation both when

an UpdatePanel is initiating an asynchronous postback and when postback results are

returned from the web server

Performing some type of animation while an UpdatePanel is performing an asynchronous

postback provides the user with a way to know that your web application hasn’t frozen

The animation indicates that some work is being done in the background

Trang 2

NOTE

In the previous chapter, we discussed the UpdateProgress control, which enables you

to display a busy wait indicator while an UpdatePanel performs an asynchronous

post-back In my opinion, playing an animation seems like a less intrusive method of

indicat-ing UpdatePanel control progress

The page in Listing 39.10 demonstrates how you can use the UpdatePanelAnimation

control to create a yellow fade effect while an UpdatePanel is performing an update

LISTING 39.10 ShowUpdatePanelAnimation.aspx

<%@ Page Language=”C#” %>

<%@ Register TagPrefix=”ajax” Namespace=”AjaxControlToolkit”

Assembly=”AjaxControlToolkit” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

protected void btnSubmit_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(2000);

lblSelectedColor.Text = txtFavoriteColor.Text;

}

</script>

<title>Show UpdatePanel Animation</title>

</head>

<body>

<div>

<asp:ScriptManager ID=”ScriptManager1” runat=”server” />

<% First Update Panel %>

<asp:UpdatePanel ID=”up1” runat=”server”>

<asp:Label

id=”lblFavoriteColor”

Text=”Enter Your Favorite Color:”

Runat=”server” />

<asp:TextBox

Trang 3

id=”txtFavoriteColor”

<asp:Button

id=”btnSubmit”

Text=”Submit”

Runat=”server” OnClick=”btnSubmit_Click” />

</ContentTemplate>

</asp:UpdatePanel>

<ajax:UpdatePanelAnimationExtender

id=”upae1”

TargetControlID=”up1”

runat=”server”>

<Color

Duration=”0.5”

Fps=”20”

Property=”style”

PropertyKey=”backgroundColor”

StartValue=”#FFFFFF”

EndValue=”#FFFF90” />

</OnUpdating>

<Color

Duration=”1”

Fps=”20”

StartValue=”#FFFF90”

EndValue=”#FFFFFF” />

</OnUpdated>

</Animations>

</ajax:UpdatePanelAnimationExtender>

<% Second Update Panel %>

<asp:UpdatePanel ID=”up2” runat=”server”>

You selected:

<asp:Label

id=”lblSelectedColor”

Trang 4

</ContentTemplate>

</asp:UpdatePanel>

<ajax:UpdatePanelAnimationExtender

id=”UpdatePanelAnimationExtender1”

TargetControlID=”up2”

runat=”server”>

<Color

Duration=”0.5”

Fps=”20”

StartValue=”#FFFFFF”

EndValue=”#FFFF90” />

</OnUpdating>

<Color

Duration=”3”

Fps=”20”

StartValue=”#FFFF90”

EndValue=”#FFFFFF” />

</OnUpdated>

</Animations>

</ajax:UpdatePanelAnimationExtender>

</div>

</form>

</body>

</html>

The page in Listing 39.10 contains two UpdatePanel controls The first UpdatePanel

control contains a form that asks you to enter your favorite color When you submit the

form, the color that you entered appears in a Label control that is contained in the second

UpdatePanel control

The yellow fade effect is applied to both UpdatePanel controls When you submit the

form, the background colors of both UpdatePanel controls fade to yellow Then, gradually,

the background colors fade back to white

There are two good reasons to use a yellow fade effect in the page in Listing 39.10 First,

this animation effect is used with the first UpdatePanel to show that work is being done

Trang 5

During an asynchronous postback, a user cannot look at the browser progress bar to detect

progress You need to provide the user with some indication of work

The second UpdatePanelAnimation control applies a yellow fade effect to the UpdatePanel

that displays the value that the user entered into the form The other reason to use a

yellow fade effect is to highlight the areas of a page that have been updated Because Ajax

enables you to quietly update different regions of a page, you need some way of drawing a

user’s attention to the areas that have been updated The UpdatePanelAnimation control

provides you with an easy way to grab the user’s attention and focus it on areas of the

page that have been changed

NOTE

The yellow fade effect was invented and popularized by Matthew Linderman at

37sig-nals You can read the original description of this technique at the following address:

http://www.37signals.com/svn/archives/000558.php

Summary

This chapter provided you with an overview of the ASP.NET AJAX Control Toolkit In the

first part of this chapter, you were provided with a brief overview of each of the controls

currently contained in the Toolkit Next, we focused on six of the controls: AutoComplete,

DragPanel, FilteredTextBox, MaskedEdit, Animation, and UpdatePanelAnimation

You learned how to use the AutoComplete control to display auto-complete suggestions

while a user is entering text into a TextBox You learned how to expose the suggestions

from a web method contained in a page and a web method contained in a separate web

service You also learned how to associate a primary key value with each suggestion

Next, we examined the DragPanel control You learned how to use the DragPanel control

to create a pop-up, draggable virtual window

We then looked at two controls that can be used to restrict user input into a TextBox You

learned how to use the FilteredTextBox control to allow only certain characters to be

entered in a TextBox You also learned how to use the MaskedEdit control to provide a

user interface that indicates the type of content a TextBox accepts

Finally, we explored the topic of animation You were provided with an overview of the

rich, declarative animation framework included with the ASP.NET AJAX Control Toolkit

You also learned how to play an animation while an UpdatePanel control performs an

asynchronous postback

Trang 6

Client-Side Ajax with

jQuery

What Is jQuery?

Calling Web Services from the Client

Summary

In this chapter, you learn how to build “pure” Ajax

appli-cations that execute on the browser instead of the server In

previous versions of ASP.NET, the primary method of

writing client-side code was to use the Microsoft AJAX

library This library provided extensions to JavaScript to

make it resemble NET languages such as C# and VB.NET

The corporate vice president of NET Platform, Scott

Guthrie, announced in March 2010, that it was taking a

different approach to client-side development A JavaScript

library called jQuery is now the recommended method to

build client-side functionality In ASP.NET 4, you can still

use the Microsoft AJAX library to develop client-side

appli-cations, but it is now part of the Ajax Toolkit instead of

built into ASP.NET Framework

In the first part of this chapter, you learn about the jQuery

library and how it works You dive into two core features of

jQuery: events and selectors You also build your first

appli-cation that executes completely on the client-side

Next, we get to the heart of client-side Ajax You learn how

to perform Ajax calls from the browser to the server You

learn how to call both web methods exposed by an ASP.NET

web service and web methods exposed by an ASP.NET page

What Is jQuery?

jQuery is an extremely fast, lightweight JavaScript library

that simplifies many aspects of client-side web

develop-ment You can use jQuery for almost any client-side

functionality that you can think of—event handling,

animations, drag-and-drop functionality, asynchronous

Trang 7

web service calls, and much more Furthermore, jQuery supports a robust plug-in model

that enables developers to write their own extensions to implement whatever

functional-ity they want There are already hundreds of powerful jQuery plug-ins available

jQuery is CSS3-compliant and works on almost all browsers—Internet Explorer 6.0+,

FireFox 2+, Safari 3.0+, Opera 9.0, and Google Chrome This means that you can write one

set of code and not have to worry about handling the specifics of different browser

imple-mentations; each line of jQuery works exactly the same on all browsers

The jQuery library is used on an incredible number of popular websites Google, Dell,

Bank of America, Digg.com, Netflix, WordPress, and even the White House are some

examples of websites that rely on jQuery for client-side functionality

Using the jQuery Library

The supporting code for jQuery, is contained in a single JavaScript file named

jquery-<version>.js At the time this book was written, the latest jQuery version is 1.4.1, so the

filename is jquery-1.4.1.js This file is included automatically in the Scripts folder when

you create a website project using the ASP.NET Website template in Visual Studio 2010

You’ll also see two other files in the Scripts directory—jquery-<version>.min.js and

jquery-<version>-vsdoc.js (see Figure 40.1)

FIGURE 40.1 The jQuery library files within an ASP.NET project

The “min” file is a “minified” version of the jQuery library It can be compared to the two

different versions of NET builds: Debug and Release The Debug contains more

informa-tion so that you can track down errors but is ultimately slower Similarly, the minified

version of jQuery is a lot faster but is unreadable for debugging purposes The minified

version of jQuery is only 24KB, whereas the development version is 155KB—more than six

times the size For production applications, you should use the minified version of jQuery

For all the following examples, we use the larger, slower developer version of jQuery so

that you can debug the applications

NOTE

The Microsoft AJAX libraries also have separate development and minified versions

The minified version is 83KB—more than three times the size of the minified version

of jQuery!

Trang 8

The vsdoc file provides jQuery IntelliSense within Visual Studio Visual Web Developer

attempts to provide all jQuery methods and objects in the pop-up window as you write

your JavaScript This is quite an accomplishment considering that jQuery (and JavaScript,

in general) is dynamic, and a variable might change its data type at any time at runtime

It is easy to add jQuery to any web page You need to add only one line of HTML:

Simply add this to your page, and you have the full jQuery library available to you

You don’t need to explicitly add a reference to the vsdoc file—as long as the filename

matches the jQuery filename up to the -vsdoc.js, the IntelliSense file will be interpreted

automatically (see Figure 40.2)

Creating a jQuery File

Before we do anything else, we need to discuss how you create an external JavaScript file

and reference it in a Web Form page Although you can add JavaScript directly to a page

by wrapping it in <script> tags, it is better to separate your client-side logic into its own

file You create a JavaScript file by selecting Website, Add New Item and selecting the

Jscript File option (see Figure 40.3)

FIGURE 40.2 Adding jQuery to a page and jQuery IntelliSense

Trang 9

ptg For example, the file in Listing 40.1 contains a single JavaScript function called

sayMessage() that displays a JavaScript alert with a message

LISTING 40.1 myScript.js

/// <reference path=”/Scripts/jquery-1.4.1.js”/>

function sayMessage() {

alert(“Hello World!”);

}

$(document).ready(function () {

sayMessage();

});

By default, Visual Studio will put this file in the root of your website To keep things

orga-nized, you should move this file in the “scripts” folder of your project

You should notice two special things about this file First, at the bottom of the file is a call

to a jQuery method: $(document).ready() The significance of this method is explained

in the next section

Second, you notice a comment at the top of the file that references the jQuery library

This reference gives you full jQuery Intellisense in your JavaScript file, even though the

jQuery library isn’t explicitly referenced in your actual JavaScript code

FIGURE 40.3 Creating a script file with Visual Web Developer

Trang 10

After you create an external JavaScript file, you can use it in an ASP.NET AJAX-enabled

page by creating a script reference The page in Listing 40.2 illustrates how you add a

script reference to the myLibrary.js library

LISTING 40.2 HelloJquery.aspx

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

You can see that all we’re doing is adding another script reference to our new myScript.js

file Other than that, we’re not adding any additional code to the page From this simple

six-line script and the reference to it, we’re already adding client-side functionality to our

page

The $ Method and $(document).ready()

The heart of jQuery lies is a single method called jQuery() To make things easier for

developers, the same method can be called by using the $ character The dollar-sign is a

valid character in JavaScript, so it alone can be used as a method name

The $() method is used to select objects in your web page In general, it is similar to the

JavaScript method getElementById, except it’s much more flexible We cover selectors in

detail in the next section, but for now, understand that the $() method is used in every

jQuery method

The $(document).ready() call that we used in the previous example is your first example

of a jQuery event jQuery events are similar to ASP.NET events because they fire at certain

Định dạng
Số trang	10
Dung lượng	904,26 KB