1 / 13

Asp.Net and Ajax

Asp.Net and Ajax. Jim Fawcett CSE686 – Internet Programming Summer 2008. References. Foundations of Atlas, Laurence Moroney, Apess, 2006 Atlas at Last, MSDN http://msdn.microsoft.com/msdnmag/issues/06/07/AtlasAtLast/default.aspx

damali
Download Presentation

Asp.Net and Ajax

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Asp.Net and Ajax Jim Fawcett CSE686 – Internet Programming Summer 2008

  2. References • Foundations of Atlas, Laurence Moroney, Apess, 2006 • Atlas at Last, MSDN http://msdn.microsoft.com/msdnmag/issues/06/07/AtlasAtLast/default.aspx • Ajax Enhancements with Microsoft Atlas http://msdn.microsoft.com/asp.net/default.aspx?pull=/library/en-us/dnaspp/html/membershipeditoratlas.asp • ASP.net Atlas (includes download link)http://atlas.asp.net/Default.aspx?tabid=47 • Atlas Docs (includes tutorials)http://atlas.asp.net/docs/Default.aspx

  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:CheckBoxID="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 objectsvar 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

More Related