03.11.2016 Views

Beginning ASP.NET 4.5 in CSharp and VB Opsylum

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

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

added by click<strong>in</strong>g the button are not a part of the HTML source because they have been added<br />

dynamically by the <strong>ASP</strong>.<strong>NET</strong> AJAX Framework to the browser’s <strong>in</strong>ternal HTML.<br />

How It Works<br />

By wrapp<strong>in</strong>g the content <strong>in</strong> an UpdatePanel you def<strong>in</strong>e a region <strong>in</strong> your page that you want to refresh<br />

without affect<strong>in</strong>g the entire page. In the example, the Button control <strong>in</strong>side the UpdatePanel caused a<br />

postback <strong>and</strong> thus a refresh of just the region <strong>in</strong> which the control is def<strong>in</strong>ed. Rather than replac<strong>in</strong>g the<br />

entire page, only the part of the page that is wrapped <strong>in</strong> the UpdatePanel is refreshed, caus<strong>in</strong>g a flickerfree<br />

reload of the page.<br />

If you analyze the data that gets sent from the server to the browser (us<strong>in</strong>g a network analysis tool like<br />

Fiddler, which you can download from www.fiddler2.com/fiddler2/), you would see that only a limited<br />

amount of data gets sent to the client. Rather than the full page (weigh<strong>in</strong>g around 12KB), only the<br />

follow<strong>in</strong>g data is sent:<br />

1|#||4|232|updatePanel|cpMa<strong>in</strong>Content_ctl00|<br />

4/9/2012 11:56:09 AM<br />

<br />

|0|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||0|hiddenField|__<br />

LASTFOCUS||1624|hiddenField|__VIEWSTATE|1Atsytn51usXShfT92FZnRfhkyw76l6TfovQaG<br />

...<br />

Demo|184|scriptBlock|ScriptPath|/ScriptResource.axd?d=zvkqIRNUspAvS1yKeFhMb_LRgBPQ<br />

LrZDpLmd71civkClsZ5csFf1SkTk1NurvxrEjhFFVa7dJqUQpcX9l3wMJNiJeY5DJdOF5sqxTU0JGDbsEuI_njxenny6ggiBtc<br />

4vOKR16h2V2npds3RA8dURw2&t=57d51992|<br />

Note that I cut out a big piece of content <strong>in</strong>clud<strong>in</strong>g much of the View State of the page from the middle<br />

(represented by the three dots) to save some space <strong>in</strong> this book. If you look at this response, you’ll<br />

recognize the HTML for the updated Label <strong>and</strong> the Button; the two controls that have been def<strong>in</strong>ed<br />

with<strong>in</strong> the of the UpdatePanel control. The rema<strong>in</strong><strong>in</strong>g text is used by the <strong>ASP</strong><br />

.<strong>NET</strong> AJAX Framework to ma<strong>in</strong>ta<strong>in</strong> page state (us<strong>in</strong>g the __VIEWSTATE field) <strong>and</strong> to underst<strong>and</strong><br />

where to place the response <strong>in</strong> the page. Even though a lot of data still gets sent down the wire, it’s<br />

far less than the orig<strong>in</strong>al full page of around 12KB. This results <strong>in</strong> a faster response <strong>and</strong> a better user<br />

experience.<br />

When you looked at the source of the page <strong>in</strong> the browser <strong>in</strong> step 10 you may have noticed that the page<br />

still conta<strong>in</strong>ed the orig<strong>in</strong>al source, not the updated source modified by the <strong>ASP</strong>.<strong>NET</strong> AJAX Framework.<br />

This sometimes makes it difficult to build, test, <strong>and</strong> debug Ajax applications because you cannot<br />

really see what data gets sent to the browser. Fortunately, many tools are available that help with<br />

this. Besides the aforementioned Fiddler tool, you’re advised to take a look at the Microsoft Internet<br />

Explorer Developer Toolbar. It ships with Internet Explorer 8 <strong>and</strong> later <strong>and</strong> is accessible through the<br />

Tools Í Developer Tools menu option.<br />

Another great tool for debugg<strong>in</strong>g is Firebug, which <strong>in</strong>tegrates nicely with the Firefox browser. You can<br />

get the tool at http://getfirebug.com. Google’s Chrome has a similar tool that you can open by<br />

click<strong>in</strong>g the Wrench icon <strong>and</strong> then choos<strong>in</strong>g Tools Í Developer tools.

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

Saved successfully!

Ooh no, something went wrong!