WCF & JQuery

3,110 views

Published on

Slide deck that is part of my WCF JQuery presentation.

Published in: Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,110
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
65
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WCF & JQuery

  1. 1. WCF & JQuerY<br />Chris Love<br />Tellago Inc.<br />http://ProfessionalASPNET.com<br />http://Twitter.com/ChrisLove<br />
  2. 2. Books<br />
  3. 3. References<br />Rick Strahl – Smart Dude<br />http://west-wind.com<br />Don Demsak (DonXML) – Wise Guy<br />http://donxml.com<br />John Resig – The JQuery Creator (pay homage here)<br />
  4. 4. Touching on WCF<br />All About the Messages<br />Can be Rather Complicated<br />Configuration<br />Attributes<br />Debugging<br />Making Things Easier<br />Astoria<br />oData<br />
  5. 5. WCF Components<br />Contracts<br />Data & Models<br />Factories<br />Endpoints<br />The Attributes…<br />
  6. 6. Jquery AJAX Features<br />Very Flexible<br />Global Event Handlers<br />Graceful Event Handling<br />All the Super Goodness Baked into JQuery!!!<br />
  7. 7. JSON<br />The Data Format<br />LCD Simple (And that’s the way I like it!)<br />WCF Just Handles it for Us!<br />JSON2 from Crockford<br />http://JSON.org<br />
  8. 8. JqueryTemplating<br />Cloning<br />varnewEl = $(&quot;#ContactRowTemplate&quot;).clone() .attr(&quot;id&quot;,item.ContactId) .fadeIn(&quot;slow&quot;);<br />jTemplates<br />Python-Like Syntax<br />MicroTemplating<br />$(&quot;#tblContactListtbody&quot;).empty()<br /> .html($(&quot;#ContactRowTemplate&quot;)<br /> .parseTemplate({ contacts: response.Contacts}));<br />http://ejohn.org/blog/javascript-micro-templating/<br />http://www.west-wind.com/Weblog/posts/509108.aspx<br />
  9. 9. JqueryTemplating<br />&lt;script id=&quot;ContactRowTemplate&quot; type=&quot;text/html&quot;&gt;<br /> &lt;# for(vari=0; i &lt; contacts.length; i++) <br /> { <br />var contact = contacts[i]; <br /> #&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;<br /> &lt;#=contact.FirstName#&gt; &lt;#=contact.LastName#&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;<br /> &lt;#=contact.City#&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;<br /> &lt;#=contact.State#&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;&lt;imgsrc=&quot;images/edit.gif&quot; onclick=&quot;GetContactInfo(&lt;#=contact.ContactId#&gt;);&quot; /&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;# } #&gt;<br /> &lt;/script&gt;<br />
  10. 10. Jquery Global AJAX Stuff<br />Jquery.ajax<br />.ajaxComplete()<br />.ajaxError()<br />.ajaxSend()<br />.ajaxStart()<br />.ajaxSuccess()<br />$(document).ready(function() {<br />ajaxLog.ajaxStart(function(evt, request, settings) {<br />vardt = new Date();<br /> $(this).append(&quot;&lt;br/&gt;&lt;hr/&gt;Starting request... &quot; + dt.toLocaleString());<br /> });<br />});<br />
  11. 11. Debugging Tools<br />Visual Studio<br />Fiddler<br />IE 8 or FireFox w/Firebug<br />Learn Common Errors/Exceptions<br />Use Try Catch<br />Don’t Make JavaScript Typos<br />

×