ASP.NET 4 Unleased - p 176 pdf

The ASP.NET AJAX Timer control enables you to refresh an UpdatePanel or the entire page on a timed basis.. If you don’t associate the Timer control with an UpdatePanel, the Timer posts t

Trang 1

NOTE

To learn more about caching, see Chapter 29, “Caching Application Pages and Data.”

When working with the UpdatePanel, you should never forget that the server-side page

undergoes its normal page execution life cycle whenever an asynchronous postback

occurs If you perform an expensive database lookup in your Page_Load() method, that

lookup occurs with each asynchronous call to your server

You can avoid performing unnecessary server-side work during an asynchronous postback

by taking advantage of the ScriptManager control’s IsInAsyncPostBack property You can

use this property to detect whether the page is executing in the context of a normal

postback or an asynchronous postback

The ASP.NET AJAX Timer control enables you to refresh an UpdatePanel (or the entire

page) on a timed basis The Timer control has one important property:

Interval—The amount of time, in milliseconds, between Tick events The default

value is 60,000 (1 minute)

The Timer control raises a Tick event every so many milliseconds, depending on the value

of its Interval property

If you don’t associate the Timer control with an UpdatePanel, the Timer posts the entire

page back to the server performing a normal postback For example, the page in Listing

38.22 posts the entire page back to the server every 2 seconds

LISTING 38.22 TimerPage.aspx

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

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

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

<title>Timer Page</title>

</head>

<body>

<div>

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

<asp:Timer ID=”Timer1” Interval=”2000” runat=”server” />

Trang 2

The time is <%= DateTime.Now.ToString(“T”) %>

</div>

</form>

</body>

</html>

A more typical use of the Timer control is to refresh an UpdatePanel control’s content on a

timed basis For example, the page in Listing 38.23 displays a random quotation every 2

seconds (see Figure 38.14)

FIGURE 38.14 Refreshing the control content using Timer control

LISTING 38.23 TimerQuote.aspx

<%@ Import Namespace=”System.Collections.Generic” %>

protected void Page_Load(object sender, EventArgs e)

{

List<string> quotes = new List<string>();

quotes.Add(“A fool and his money are soon parted”);

quotes.Add(“A penny saved is a penny earned”);

quotes.Add(“An apple a day keeps the doctor away”);

Random rnd = new Random();

lblQuote.Text = quotes[rnd.Next(quotes.Count)];

}

</script>

Trang 3

<title>Timer Quote</title>

</head>

<body>

<div>

Page Time: <%= DateTime.Now.ToString(“T”) %>

<legend>Quote</legend>

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

<asp:AsyncPostBackTrigger ControlID=”Timer1” EventName=”Tick” />

</Triggers>

<asp:Label ID=”lblQuote” runat=”server” />

</ContentTemplate>

</asp:UpdatePanel>

</fieldset>

</div>

</form>

</body>

</html>

The Timer control in Listing 38.23 is configured as a trigger for the UpdatePanel control

When the Timer raises its Tick event, the UpdatePanel control refreshes its content by

performing an asynchronous postback and grabbing a new quotation to display

The final example of the Timer control is contained in Listing 38.24 In this example, a

Timer control refreshes a discussion forum’s messages every 5 seconds If you leave your

browser window open, you see new messages as they are posted by other members of the

forum (see Figure 38.15)

Trang 4

LISTING 38.24 TimerMessages.aspx

<title>Timer Messages</title>

.message

{

margin-left: 20px;

font-style:italic;

}

</style>

</head>

<body>

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

FIGURE 38.15 Database messages being updated asynchronously

Trang 5

</Triggers>

Last Refresh <%= DateTime.Now.ToString(“T”) %>

<hr />

<asp:ListView

id=”lstMessages”

DataSourceID=”srcMessages”

Runat=”server”>

</div>

</LayoutTemplate>

<div>

Posted by <%# Eval(“PostedBy”) %>

<%# Eval(“Post”) %>

</div>

</ItemTemplate>

</asp:ListView>

</ContentTemplate>

</asp:UpdatePanel>

<asp:ObjectDataSource

id=”srcMessages”

TypeName=”Message”

SelectMethod=”Select”

Runat=”server” />

</form>

</body>

</html>

The page in Listing 38.24 contains a ListView that gets refreshed every 5 seconds Be

aware that every person who has this page open in a browser will cause a database call to

be made every 5 seconds This data is an excellent candidate for caching

The last control that we need to examine in this chapter is the UpdateProgress control

This control enables you to display a progress indicator while an UpdatePanel is updating

its content

Trang 6

During a normal postback, the browser displays its progress in downloading new content

by spinning an icon or displaying a progress bar During an asynchronous postback, on

the other hand, there is no visual indication of progress You can use the UpdateProgress

control to give the users some sense that something is happening during an

asynchro-nous postback

NOTE

In the next chapter, we examine an alternative method of displaying UpdatePanel

progress You learn how to use the UpdatePanelAnimation control to display an

ani-mation while an UpdatePanel’s content is refreshed

The page in Listing 38.25 illustrates how to use the UpdateProgress control If you click

the button, an animation spins while the asynchronous postback is performed (see

Figure 38.16)

FIGURE 38.16 Viewing a spinning asynchronous progress indicator

LISTING 38.25 ShowUpdateProgress.aspx

protected void btnSubmit_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(5000);

}

</script>

<title>Show UpdateProgress</title>

.progress

Trang 7

{

font-family:Arial;

position: absolute;

background-color:lightyellow;

border:solid 2px red;

padding:5px;

}

</style>

</head>

<body>

<div>

<%= DateTime.Now.ToString(“T”) %>

<asp:Button

id=”btnSubmit”

Text=”Submit”

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

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress

ID=”progress1”

AssociatedUpdatePanelID=”up1”

runat=”server”>

<asp:Image id=”imgProgress”

ImageUrl=”~/Images/Progress.gif”

Runat=”server” />

Retrieving content

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</div>

</form>

</body>

</html>

Trang 8

When you click the button in Listing 38.25, the response is delayed for 5 seconds so you

have a chance to see the progress indicator The delay simulates a network delay

NOTE

Several websites enable you to generate fancy animator progress indicator icons Here

is the address to one of my favorites:

http://www.ajaxload.info

The UpdateProgress control supports the following three properties:

AssociatedUpdatePanelID—The UpdateProgress control displays progress for this

UpdatePanel control

DisplayAfter—The amount of time, in milliseconds, before the UpdateProgress

control displays content The default is 500 milliseconds (half a second)

DynamicLayout—When this property is set to true (the default), the UpdateProgress

control is initially hidden with the Cascading Style Sheet (CSS) attribute

display:none When this property is set to false, the UpdateProgress control is

hidden with the CSS attribute visibility:hidden

Summary

In this chapter, you learned how to use the primary server-side ASP.NET AJAX control:

UpdatePanel The bulk of this chapter was devoted to discussing the different features of

this control You learned how to specify triggers for an UpdatePanel You also learned

about how the UpdatePanel control participates in a page’s server-side and client-side page

execution life cycle We also examined how you can handle errors gracefully when using

the UpdatePanel control

In the final parts of this chapter, you learned how to use two controls that support the

UpdatePanel control First, you learned how to use the Timer control to refresh an

UpdatePanel on a timed basis Second, you learned how to use the UpdateProgress

control to give the user something to watch during an UpdatePanel control’s

asynchro-nous postback

Trang 9

ptg

Trang 10

Using the ASP.NET AJAX

Control Toolkit

Using the ASP.NET AJAX Control Toolkit

Overview of the Toolkit Controls Using the AutoComplete Control

Using the DragPanel Control Using the FilteredTextBox Control

Using the MaskedEdit Control Using the Animation Control Using the

UpdatePanelAnimation Control

Summary

The ASP.NET AJAX Control Toolkit consists of more than

40 server-side Ajax controls that you can use in your

ASP.NET applications You can take advantage of the

controls to create website special effects such as animations,

rounded corners, and modal pop-ups You can also use the

controls for more serious applications such as

implement-ing auto-complete and masked edit text fields

The controls in the ASP.NET AJAX Control Toolkit are Ajax

controls in the broad sense of the word Ajax All the Toolkit

controls use client-side JavaScript However, most of the

controls do not perform asynchronous postbacks So, they

are Ajax controls in the sense that they take advantage of a

lot of JavaScript

Almost all the controls in the Toolkit are extender controls

The controls extend the functionality of existing ASP.NET

controls, such as the standard TextBox and Panel controls,

with new functionality Almost all the Toolkit controls have

a TargetControlID property that you use to point to a

control to extend

In the first part of this chapter, you learn how to install and

use the Toolkit controls in an ASP.NET application Next,

you are provided with a brief overview of each of the

controls Finally, we examine six of the controls in more

detail: AutoComplete, DragPanel, FilteredTextBox,

MaskedEdit, Animation, and UpdatePanelAnimation

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