Download presentation
Presentation is loading. Please wait.
1
Jim Fawcett CSE686 – Internet Programming Summer 2008
Asp.Net and Ajax Jim Fawcett CSE686 – Internet Programming Summer 2008
2
References Foundations of Atlas, Laurence Moroney, Apess, 2006
Atlas at Last, MSDN Ajax Enhancements with Microsoft Atlas ASP.net Atlas (includes download link) Atlas Docs (includes tutorials)
3
What is Ajax? An acronym that stands for Asynchronous Javascript and XML A technology that supports updating a page with small amounts of information without a postback Makes the page appear to be responsive to user inputs.
4
Ajax Mechanisms Ajax like operations have been supported since IE 5.5:
Uses var xmlHttp = window.XMLHttpRequest(), created and invoked from Javascript on the client, usually at form load. <body onload=“createXMLHttpRequest()>..</body> You define a Javascript function, Update(), that is attached to a control event that will use the xmlHttp object to send a string request to the server via xmlHttp.send(): xmlHttp.open(“GET”,url,true); onkeyup=Update(); The url defines an Aspx file that will handle the request, passing a query string: url=“myWebForm.aspx?” + stringToParse” In that function you attach a callback function like this: xmlHttp.onreadystatechange=doTheUpdate; The callback has a string argument supplied by the server side resource.
5
Client Callbacks All of the Ajax mechanism, described in the previous slide is papered over when you use Client Callback: string callbackref = Page.ClientScript.GetCallbackEventReference( this, "document.getElementById(\"CallbackResult\").innerText", "CallbackResultProcessor", "null" ); <asp:CheckBox ID="TriggerCallback" runat="server“ Text="Trigger Callback" /> TriggerCallback.Attributes["onClick"] = callbackref; <script language="javascript"> function CallbackResultProcessor(result,context) { var label = document.getElementById("CallbackResult"); if(label.innerHTML == "Waiting for Callback") label.innerHTML = "<h2>" + result + "</h2>"; else label.innerHTML = "Waiting for Callback"; } </script>
6
Result However you effect Ajax, the results are:
Send string from client via a Javascript call Process string on server in a defined aspx resource Send string back to client via a Javascript callback Javascript manipulates document to display the result Get responsive update of rendered web page without a postback! Fast, and no flashing as page is redrawn, since only the area of update is redrawn.
7
What is Asp.Net Ajax? A largely Javascript library that supports Ajax.
.Net Ajax provides: An XML-based declarative markup Ajax Javascript library that provides client-side functionality A webservice bridge that supports client use of web services, via a Javascript proxy You can expose methods on the aspx page as web services that your client can then consume This extends the event-based model by adding non-event invocations, e.g., no postback and more flexible invokes Update panels, defined server-side that enable the Ajax asynchronous communication with the server Supports a client-side databinding model, again, via Ajax Data is still coming from server, but control is populated with Ajax
8
.Net Ajax (DNA) Component Model
DNA enhances the Javascript object model with client-side syntax: Programmatic creation of objects var myTextBox = new Web.UI.TextBox(document.getElement(‘TextBox1’)); Declarative creation using DNA script <script type=‘text/xml-script> <page xmlns := …> <components> <script:label targetElement=“MyLabel”/> // manipulation of label </script:label> </components> </page> </script>
9
DNA Behaviors The DNA library provides a number of predefined behaviours: Click Mouse hover Pop up on hover Drag and drop
10
UI Glitz The UIGlitz Library provides: Opacity control
Layout behaviors Fade animations Other animations
11
Other DNA Stuff DNA library also provides: Databinding Text validation
Timer control Gadget control
12
End of Presentation Summary Looks interesting
Another model to absorb – sigh! Supports many browser models Responsive applications that begin to look more like WinForms
13
Enhancing Control Updates
You can wrap existing server controls with UpdatePanel controls These become panes on the page that update asynchronously
Similar presentations
