Video: How Do I: Add ASP.NET AJAX Features to an Existing Web Application?

Presenter:Joe Stagner



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

In this video lets take an existing ASP net application and Ajax enable application by adding features from the Microsoft ASP net 2 0 extensions for Ajax to let slip an existing ASP net application that is pretty simple application bundle you follow the same format to Ajax enabled much any application soap here is a UI and let s just run this week and see what it is we re starting with similar click on the button that we retrieve the address record for this application and with its indicators here to show us exactly what s happening in terms of the reflect refresh the first is that this marquee scrolling across the bottom of the page and click on the button noticed the marquee jumps over till it s in the right inside the page and is because the entire pages being refreshed at that s a couple of the indicators we have here note that this timestamp is at 46 this timestamp is a 46

Minute 1

If I click on the button to see both the wonders of the base of the page as well as the ones inside the table that contains the data are getting updated at the same time so that s application now in Ajax enable this application in the first we need to do is read the conflicted change the configuration of this application to be Ajax aware that means modifying the web config file now I m obviously this is a really simple web config file are stripped of the comments in its its just was necessary for the application on now there are a collection of changes that need to be made to web config file in order to activate Microsoft is good at Ajax extensions to run the client proves the documentation to figure out which pieces you need to add a think he easiest way to do that is on the open up at us a separate instance of visual developer is a great website that was selected in ASP net Ajax enabled website template to generate a website just so I can steal stuff that

Minute 2

A web config file now I m not a copy of whole web config file and popped it into my existing application I could do that but a real production application is likely that you ve added areas in your configuration file so you want to just wipe out all of your web config file and start afresh what it is to add this was section of the time just emulate what you do in your real production application to first aid is a grab on this config sections element and does that guy is wired up things like the script resource handler the Jason serialization in the profile service of dedication service etc so it s glad that taken over and drop it into the configuration element of the web config file in the existing application or modifying so excellently to do is we need this control section this is what wires up the ASP tag prefix for all of

Minute 3

To live in me in the server side controls for the Microsoft Ajax extensions still ascribe that echoes insider pages section is good news for a lot of replace this compilation entry you re so let s go back into our generating file and where I grabbed the compilation section that HTB handler section and the HDP module section was coffee that and let s put that in your male couple things if the state does is and we are or adding an assembly reference to the system Web extensions that s the namespace of all the Ajax stuff here in the HTB handlers riding a couple for AAC files if the files are help are what contain the the client side stuff that my subindexes to use a client side so the server as to know how to handle as extensions so

Minute 4

All that code can get down to the client knows you were also removing the verve for as an X Files and that we re plugging it back in except for plugging it back in as an going against description or factory in that front is the standard ASP net Web service handling mechanism and we do that because Wilbert Colley lipservice from JavaScript knew what our server side runtime to do a couple things for us what we wanted to be able to generate a JavaScript called proxy to the Web servers that can be called asynchronously if it needs to do is if it needs to know how to answer JS extension calls so that it can generate the JavaScript to go down to the client to be used to call the service method in your Web services so that s important is while the first the HDV module adding is the this rep model module which will handle all of the

Minute 5

Them as Ajax scripting technology at last they really need is a to add the system Web extensions element and the system Web server element just grab those pop those in our with a config file just above the closing configuration tag and then say that Ballinger over an Ajax enabler application the facility was going out to the Ajax extensions to lock stab it was created by the MSA Jackson s dollar autographs for manager control and dropped out of my page now each ASP net page that s going to activate and use much of Ajax Boselli must have an instance of the script editor on the page and only one instance of the script and so that s that you knew is I can actually add some Ajax

Minute 6

Valid in this case will just simply add a partial page post that functionality so that we don t get a full page refresh when we fetch this address record from a grab an update that will control and then I m going to just grab the content I want to be dynamically updated and I m not drop it into the update panel s sorry having a little trouble grabbing the piece in any scenario okay so it s where application now and click of the button and note that as I click on the button at what s happening where getting a dynamic partial data update the marquee is not resetting the right side of a

Minute 7

And the the timestamp inside the update panel is getting updated but the one outside the up the one outside of the panels are getting updated and that s if it s that easy to get started adding Ajax style functionality to your existing ASP net application

Click here to go to original video page