Video: How Do I: Choose Between Methods of AJAX Page Updates?

Presenter:Joe Stagner

In this video Joe Stagner compares the two primary methods of performing AJAX-style page updates in an ASP.NET application. The first method is to use an UpdatePanel, where no additional code needs to be written on either the client side or the server side. The benefit of using the UpdatePanel is that everything works automatically. The penalty is that at the client it requires a lot of data to be included in the AJAX request and response, and at the server it requires a full page lifecycle to be executed. The second method is to use network callbacks, where additional code needs to be written on both the client side and the server side. The benefit of using network callbacks is that at the client it requires very little data to be included in the AJAX request and response, and at the server it requires only the called service method to be executed. The penality is the time and effort it takes to write the necessary code.Joe concludes the video by discussing what you should consider when choosing between the two primary methods of AJAX-style page updates.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

This video will be comparing the two primary methods of doing a textile page updates in your ASP net application to do this all use the demo applications from two previous Ottawa videos first video number one how I get started with ASP net Ajax which uses the update panel as the method of page update and then secondarily will compare that to the demo code from video number five how I make a client side network callbacks with ASP net Ajax so fossils look at the update panel mechanism now that the demo code loaded here in visual Web developer to see it which is at present interface we have an update panel is a gifted talent as HTML XML one portion of which is this is to label control of a button about is the click event handler that is at an all op soldiers to

Minute 1

Post back to the server but it doesn t actually do anything at self effect of the label controls overpaid or updated by logic in the page load event with this implies is that when we re doing this sort of a post that the entire page lifecycle executes back on the server as we ll see though is that the truth about but there s some additional considerations that might not be immediately apparent to us for using the update panel because it s so easy to use and in fact is the benefit of the update panel the the update panel is is a very clever implication by the if you edit a text feature team to make it very easy to do a textile program without having to write lots of client side code but as always that simplicity comes with a certain price so a version of the application running here on my local Web server and a

Minute 2

Wiki HUD penis being passed back and forth between the client and the server one note about fiddler is that fiddler does not intercept and proxy calls to local hosts so on I m just accessing my local IIS server using my machine name as the server name as opposed to local host so let s far of filler and I m going to refresh the page to see the entire page load in fiddler brings you see that for different request portions here now let s go back in the page and click the button which will cause the update to remember what does happen we did a full page post back because it s a button click event of an is similar to any sort of event that would cause the HD of the up a panel to be updated than that of the server because we see that our daytime that updated label number two we know that in

Minute 3

Should to put the post back to the server the full page lifecycle executed because of the button click event of that causes these updates but after the page load if we had out here to fiddler because you have this additional request here and if we look at the request and the response that took place will see here that is a fear today the has passed back and forth between servers so the requests contained C C 796 bytes notice here that if you stay an event validation information BACK AND FORTH or in this case passed to the server here is the response

Minute 4

On breaking space here is the span that is the client side representation of label too long with the embedded style and that here s the here s the date time and here we have again all of the view state and all of the event validation information so what we re seeing here and that s right 785 bytes returned from the server so a senior at all if you say only that validation information passes from the client to the server the full page lifecycle executed on the server and then the HTML markup for the update panel gets sent back to the client along with again all the updated view state and event validation information itself is a fair bit of it is that s passing back and forth your so now let s look at the other method and then we ll talk a little bit about what you might choose one versus the other so let s have a look

Minute 5

At the mechanism for manually doing a textile page updates by calling service methods and what we ve got here is very simple user interface s got a we have a text box melodies at the something in a text box and click of a button that button click event is actually a client side JavaScript event so will need to do here is or need to manually call from JavaScript code a service method back on the server and then we need to handle all the possible asynchronous returns so there s this JavaScript client side programming here is also additional server side programming is required since we took all of this simple service may we specify that we have this service reference to choose at the endpoint simple service but as a max and then we re calling your simple service and then this method say hello but we have to do

Minute 6

Right in our Web service code so here we define a Web service and a decorated with class with the attribute script service and then here s the logic taking of a parameter building the response and return it so is a fair bit of extra programming is required to use this mechanism we have to create this separate service mechanism with my client side JavaScript code to make the call and handle the citrus results so certain of after work but let s run this in the nose stop and restart fiddlers we can have a fresh user interface or so don t go back here with refresh the page and you can see a similar program to be a that the full page for a full page creation as we would expect to have this would have the previous demo is one additional call he

Minute 7

As his initial call to simple service because reading to our that happens at startup for the page now let s go in and execute this those who over the fiddler look at that calls the first thing it ll notice is that only 13 points in the request notice here here s the request and here s a response so nothing bought the data that is needed by the request them and nothing but the the text that is the response that s necessary to process on the server now the implication here of course is that our logic is responsible for our knowing what the service method is to require and sending it the appropriate data and then programmatically dealing with the data that is sent into it in return so when you re using the update panel everything is automatic for inches

Minute 8

To get it down the page for some controls in the in the update panel you can configure how you want update panel s behavior to happen so whether you want to it to happen implicitly whatever of event fires a cause of page post after whether you are specifically identify is that triggers in your client side code seat of control over how the update panel works in cover that in other how to live videos of a fight of it all happens for you automatically whereas I m using network callbacks you really significantly decrease the amount traffic that transpires back and forth across the server that the penalty for that improved performances have to write more code and you re responsible for creating the request element in the appropriate format that s required by the service method and you re responsible for manually processing the data that s returned from that service method in your JavaScript code

Minute 9

So that the return message is getting get this string of text and then back on the server but on our case just for the purposes of demo evidently think of the complex and just use it as an alert but or getting back is that taxed so for a use is for partial page update you have to use JavaScript code to take that result set and put it in whatever HTML or JavaScript element on a page is appropriate so it s the the trade off is performance so this isn t to say that the update use of the of the panel is inappropriate in lots of different scenarios so don t want the obvious scenarios is when you re using something like any a data grid and them while you can program against the client side representation of a data grid it s a complex to do that and if I could take some figuring out on your own so if what you want to do is have a gay grid that

Minute 10

Paintable honestly can page through your 40 records at a time for example and doesn t see you want to see you what the update as you move from one page of records and asked to be seamless Ajax style updates to the user s makes perfect sense to put the grid in EM way in update panel also when you have a whole collection of a whole collection of s controls that are all related in some fashion so when when one is going to be updated their order to be updated public access for all those to be in an update panel says are a significant amount of the vehicle the view state representation for the user interface changes because of the dependencies there so really the decision as to whether Nazis of the panel versus whether to use a manual HSL programming and service the calls really depends on the problem in trying to solve how much

Minute 11

Work you re willing to do for the performance trade off and whether that performance differentiation is really necessary to do hopefully this gives you enough information to understand the difference between out what happens on the covers when using one mechanism versus another avenue can apply this information to the specifics era of your application to make the best possible choice

Click here to go to original video page