Video: How Do I: Add AJAX Functionality to an Existing ASP.NET Page?

Presenter:Todd Miranda

In this video, Todd Miranda demonstrates how to add AJAX functionality to an existing ASP.NET page with minimal effort to increase performance and improve the overall user experience of your application.
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

Of links taught Miranda in this video to show you how to add Ajax functionality to existing ASP net page in Visual Studio 2000 I was began by creating a new web projects will create a Web project ASP net Web project and was put this in a folder will call it at the instrumentation or to create the Web project is well have won the words were to assume that once we create a web project that would be your starting point to be with at Ajax functionality to an existing website and began by creating this default website will so we ll go into the default ASP x since created for us and we ll just go right into the date of the first data is created for us here and was this


Minute 1

Are a calendar control Google hitting event ID and will collect calendar once to the original and will go it here we wanted to run at obviously server and will specify any of the other custom properties there and in right beneath our calendar control we want to have a label so let s put a label there and began will give it an ID of label one we also want this to run a server and that s good right now to specify the text of our label to be simply for now as a holding point will set a selected date here and will go in here eventually it will overwrite the selected date for calendar into our tour label might


Minute 2

So beneath VS we want to separate this with failure or far rule and put another idea of holding area and will have this time or at a text box of DN IDE will be a text box once will do a run at server right and Vilas also add a button so will do ASP button were given an ID of button once we honestly want us to run at the server will want the text of our button to simply be a date to Xbox aren t going to articles that so here is our default webpage so that let s just


Minute 3

Take a look at this and make sure that everything works fine yes one modify web config to enable debugging soldiers select okay they are what Visual Studio do its thing and I have script debugging turn off and my version of Internet Explorer so you can go into Internet Explorer and going to the options and go under advanced and you can change that and if the restart Internet Explorer or if you want to leave that off for no security reasons regular that he can lead author was studious to continue debugging for this example were to be debugging any JavaScript for a script so that will be for us so we ll start the start of the development Web server and you see that our webpage comes up and we got calendar here so we can select in the dates are calendar in which


Minute 4

For her text box and click are but he drifted so another webpage works so you want to hear what did you want to add some Ajax functionality so we have this webpage data productions for work and fun we want to increase the performance of our page by being able to do partial updates of partial page updates any page that we want to add Ajax functionality to have to have a script manager control on the page so any gas controls and if you re using ASP net they do require script manager control so will aspirate manager control and will have something called an update panel and will add the update panel which is what life to give us the capability to our partial page updates so with a split view is one of the nice features of Visual Studio to govern a split view gives his capability to view not only are


Minute 5

Food but our design view at the same time to see any changes that we make to the code and see how they affect the design view and bars for all right so there is our split view we can see there was virtually wanted it was at Oxford manager controls a little year to expand our toolbox were ago and here we look in the Ajax extensions are and were simply going to double click strip manager to add a default script manager to her page or so it do want to sync visa we can synchronize the views by clicking their annual CeBIT Arabs on view we get our script manager showing up and we ll just leave it the default for manager one that we also want to add and update panel to the weekend utilize some of the updates that it is a citrus updates from a deck so again will double click our update panel


Minute 6

Wrote a panel with a suite of the panel one but now we want to move our calendar and our label down and tour update panel in that way we can do partial paste updates with our calendar in our label still will do his will move our current label by dragging it right down here into the update panel and then will also come up here will grab calendar and will just move our calendar right down here door of a panel as well might salute our calendar of a panel at a well to do appear in what looked into her give and we can see that we done out in two years here I m actually going to come in here and at a label that someone give it a late label to we want it to run at server error in a default text


Minute 7

Were trivial to use this to demonstrate the difference between the HX post back and the regular post back okay so now that our calendar or label are in our update panel we will write some code behind to be would handle the changes to that sordid double click or calendar and they ll bring us to our calendar one selection changed event so would our selection changes we want to set the text of our label to the calendar one control selected date and will just specify this out as a too short date string and when the things going to do well in back here is whenever the page load a curse I ll don t go in for label to animals said its text property equal to the now


Minute 8

2 short times during this all right so no lets go into our default aspx page are you made a change and let s run this verification and yes we want to continue debugging okay so here s our webpage show up now on notice that if we get a time showed up across the top so every refresh the page title update and we can go your tour calendar now and we can select a date and noticed our label here is updated


Minute 9

With our selected they know a thing to note is while I m doing this number when you don t see little icon churning here and you also don t see much time changing at all with order cliffy of a text box will notice will get the little loading symbol our pages of full post back to get the flicker on the page as one of the differences between doing this partial page post back in a real post back was take this a step further and the scope back to her good on one finger news was changed this so we can see you a little more detail to a longtime strength and order ago to or BaseTX page and a double click art of a text box button which gives us our click event and our click of their organs specify what we want Xbox one doctor asked to


Minute 10

Also be equal to calendar one selected date got too short a string sort of a text box on button click on a label on the selection changed or counter again run this are browser gives one a continue debugging and you see their page reloads so every time we were to select the counter and a major label anytime we could give a text box archive of your changes and we had to date our text box soap node that whatever we were posting this data back to the server for counter assistant update control reason Ajax were not actually doing a full post that so our page load the self are so we ll update our tile winner which a state but we re getting the actual data


Minute 11

And we don t get this updated until we had to do a full post back which is going to happen when we click our button to a bitter text box so you see how easy it is to take an existing ASP net application with existing controls and existing functionality as commander Ed Warner more update panels and be able to add Ajax functionality to your page without really a whole lot of modifications

Click here to go to original video page