Welcome to the Measurement Studio AJAX UpdatePanel vs Full Page Postback demo. You can use the following
links to view interactive Web pages where you can compare the AJAX updates with
full page postbacks.
Introduction to AJAX: The ASP.NET AJAX UpdatePanel is a server control that you can use to implement flicker-free and partial
page updates. You can configure other controls on the page to refresh the contents of the UpdatePanel control.
Partial page updates can potentially reduce the amount of data that is transferred between the client and
server and improve the performance of your Web application.
Overview: In the AJAX UpdatePanel
and Full Page Postback
Web pages, the complex graph displays the combined real and imaginary data. You can configure the Timer interval and set the state
to be either Enabled or Disabled. On every timer tick, the phase of the imaginary data is changed.
You can use the knobs at the bottom of the page to change the frequency of real and imaginary data.
Exercise: Open the AJAX UpdatePanel
and Full Page Postback
Web pages simultaneously in two browser windows and start the timer
to view the improvement in performance that results from using the ASP.NET AJAX UpdatePanel to restrict postbacks to a part of the page.
The performance difference is illustrated by the number of updates that can actually be made for each page, given the same update
request interval. Modify the interval to see how full page postbacks and AJAX updates perform at different update rates.
As you reduce the interval, the performance of full page postback degrades rapidly. To take advantage of the performance
improvements that the ASP.NET AJAX UpdatePanel provides, identify sections of a Web page that are independent
of each other and consider placing them inside UpdatePanel controls.
|
AJAX UpdatePanel
|
This Web page contains graphs and knobs which are placed inside UpdatePanel controls. The triggers for these update panels
have been set based on update dependencies. For example, if the frequency of the real data is changed, then only
the waveform graph displaying real data and the complex graph need to be updated. This is implemented by configuring
the knob below the real data graph as the trigger for the update panel that contains the real data graph. Similarly, the phase
of the imaginary data is updated on each timer tick, so the ASP.NET AJAX Timer is configured as a trigger for the update panels
containing the complex graph and the waveform graph displaying imaginary data.
|
Full Page Postback
|
This Web page has the ASP.NET AJAX Timer control that causes a full page postback at regular intervals. Unlike the AJAX UpdatePanel
Web page, all the controls are refreshed on every timer tick. This results in much more data being downloaded by the client
browser and slower performance.
|
Auto Refresh
|
This Web page uses the Measurement Studio AutoRefresh control to partially update a page at regular intervals. The functionality achieved by
AutoRefresh is similar to the functionality achieved by combining the ASP.NET AJAX UpdatePanel and Timer controls.
One of the primary benefits of using AutoRefresh is faster and smoother updates when compared to the ASP.NET AJAX
UpdatePanel and Timer combination. Refer to the AutoRefresh
example to see it in action.
|