Your SlideShare is downloading. ×
0
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Asp.Net and Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Asp.Net and Ajax

480

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×