03.11.2016 Views

Beginning ASP.NET 4.5 in CSharp and VB Opsylum

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

358 x CHAPTER 10 <strong>ASP</strong>.<strong>NET</strong> AJAX<br />

Provid<strong>in</strong>g Feedback to Users<br />

Despite the visual problems that postbacks usually cause, they have one big advantage: the user<br />

can see someth<strong>in</strong>g is happen<strong>in</strong>g. The UpdatePanel makes this a little more difficult. Users have no<br />

visual cue that someth<strong>in</strong>g is happen<strong>in</strong>g until it has happened. To tell your users to hold on for a few<br />

seconds while their request is be<strong>in</strong>g processed, you can use the UpdateProgress control.<br />

The UpdateProgress Control<br />

You connect the UpdateProgress control to an UpdatePanel us<strong>in</strong>g the AssociatedUpdatePanelID<br />

property. Its contents, def<strong>in</strong>ed <strong>in</strong> the element, are then displayed whenever<br />

the associated UpdatePanel is busy refresh<strong>in</strong>g. You usually put text such as “Please wait” or an<br />

animated image <strong>in</strong> this template to let the user know someth<strong>in</strong>g is happen<strong>in</strong>g, although any other<br />

markup is acceptable as well.<br />

In addition to the AssociatedUpdatePanelID <strong>and</strong> properties, the<br />

UpdateProgress control features the follow<strong>in</strong>g properties you typically use.<br />

PROPERTY<br />

DisplayAfter<br />

DynamicLayout<br />

DESCRIPTION<br />

Determ<strong>in</strong>es the time <strong>in</strong> milliseconds that the control waits before it displays<br />

its contents. This is useful when the refresh period is so short that<br />

a notification message would be overkill. The default is 500 milliseconds,<br />

which is half a second.<br />

Determ<strong>in</strong>es whether the control takes up screen real estate when hidden.<br />

This maps directly to the CSS display: none; (when this sett<strong>in</strong>g is<br />

True/true) or visibility: hidden; (when it’s False/false).<br />

In the follow<strong>in</strong>g exercise, you see how to comb<strong>in</strong>e the UpdatePanel, the ScriptManager, <strong>and</strong> the<br />

UpdateProgress controls to make the contact form user control flicker-free.<br />

TRY IT OUT<br />

Flicker-free Pages—Putt<strong>in</strong>g It All Together<br />

In this exercise, you modify the user control ContactForm.ascx that you created earlier, wrapp<strong>in</strong>g the<br />

entire control <strong>in</strong> an UpdatePanel so the page doesn’t perform a full postback when you enter a message<br />

<strong>and</strong> click the Send button. To help users underst<strong>and</strong> that the page is busy when the message is be<strong>in</strong>g<br />

sent, you add an UpdateProgress panel to the control. Inside this control you place an animated GIF<br />

image that is available <strong>in</strong> the code download for this book. Alternatively, you can go to www.ajaxload.<br />

<strong>in</strong>fo <strong>and</strong> create your own animated image.<br />

1. Open the ContactForm.ascx user control from the Controls folder <strong>in</strong> Markup View <strong>and</strong> wrap<br />

the entire element <strong>and</strong> the Label at the bottom of the control <strong>in</strong> an UpdatePanel with a<br />

. You can do this by typ<strong>in</strong>g the code directly <strong>in</strong> Markup View, by us<strong>in</strong>g a code<br />

snippet, or by dragg<strong>in</strong>g the control from the Toolbox. Make sure the ID of the UpdatePanel is set<br />

to UpdatePanel1. You should end up with the follow<strong>in</strong>g code:<br />

<br />

<br />

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!