jQuery and OData - Perfect Together

4,848 views
4,667 views

Published on

You've created web sites and spruced them up with jQuery to improve your user experience. You've played around with WCF Data Services to create lists of data from your server. But what happens when you bring the two of them together. It's like peanut butter and jelly; peas and carrots; well, you get the idea. This talk will describe how to connect your jQuery-based web application with your OData data service. If time permits, we'll also look at binding your OData feed to interesting jQuery plug-ins like jqGrid.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,848
On SlideShare
0
From Embeds
0
Number of Embeds
1,477
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery and OData - Perfect Together

  1. 1. jQuery and ODataPerfect Together<br />David Hoerster<br />Co-Founder, BrainCredits.com<br />david@braincredits.com<br />
  2. 2. About Me<br />C# MVP (April 2011)<br />Co-Founder of BrainCredits (braincredits.com)<br />Senior Technical Director for Resources Global Professionals<br />President of Pittsburgh .NET Users Group<br />Organizer of recent Pittsburgh Code Camps<br />Twitter - @DavidHoerster<br />Blog – http://geekswithblogs.net/DavidHoerster<br />Email – david@braincredits.com<br />
  3. 3. Agenda<br />Quick overview of WCF Data Services and OData<br />Getting data from a WCF Data Service<br />Fiddler, LINQPad, web apps<br />Calling WCF Data Services and Custom Service Methods via jQuery<br />Using datajs as a client library<br />datajs as a caching client<br />JSONP<br />Optional: Other uses for your data context<br />
  4. 4. WCF Data Services – What?<br />Allows you to expose or consume data over HTTP using REST<br />Uses the Open Data Protocol (OData)<br />Data exposed as resources addressable as URIs<br />Data is an underlying model of some sort<br />Entity Data Model (easiest)<br />LINQ to SQL<br />Custom entity classes (roll your own provider)<br />
  5. 5. WCF Data Services – Why?<br />Consistency<br />Accepted format for data transport (OData)<br />Navigate relationships<br />Simple configuration in code<br />Growing support for OData format<br />
  6. 6. WCF Data Services – OData<br />OData can be exposed in one of two formats<br />Atom (XML)<br />JSON (text)<br />Data itself is exposed as one or more feeds<br />Individual items in a feed are entries<br />OData is published by Microsoft and is an open source specification<br />Allows other parties to create consumers and producers of OData feeds<br />
  7. 7. WCF Data Services<br />Demo – Getting Data from a WCF Data Service<br />
  8. 8. WCF Data Services<br />Getting data from a service – WRAP-UP<br />Understanding the URI’s<br />XML vs. JSON size<br />JSON structure<br />Using jQuery to iterate through results<br />Getting the next set of results<br />
  9. 9. WCF Data Services w/ Web Apps<br />You can create custom service operations<br />You can use GET or POSTs with custom service operations<br />Security still holds true<br />SetServiceOperationAccessRule<br />Custom Service Operations support returning<br />void<br />primitive<br />Entity<br />IEnumerable<br />IQueryable<br />
  10. 10. WCF Data Services w/ jQuery<br />DEMO – Custom service methods and performing updates<br />
  11. 11. Connecting WCF DS w/ jQuery<br />Simple web app – WRAP-UP<br />Custom service methods<br />Inserts, updates, deletes<br />Custom Operations honor OData keywords<br />
  12. 12. DataJS<br />Recently moved from Alpha to 1.0<br />Available via CodePlex<br />Also, NuGet package (search ‘datajs’)<br />Provides cross-browser support to connect to data sources<br />Currently just supports OData services<br />Provides helpers to caching data via remote services or local storage<br />Supports JSON and Atom formats<br />
  13. 13. DataJS w/ JSON<br />Reading data<br />OData.read(…)<br />“Data” returned is at that ‘d’ level<br />Doesn’t exist with datajs – needs to be handled with raw wcf data service calls<br />Writing data<br />OData.request(…)<br />Supports POST/PUT/MERGE/DELETE<br />Data variables don’t have to be pure JSON – datajs will format<br />Supports batching requests<br />
  14. 14. DataJS - Caching<br />DataJS provides a simple caching mechanism<br />createCache allows you to create named caches<br />You can read from them<br />You can clear them<br />More advanced functionality<br />See the Netflix example from datajs site<br />
  15. 15. JSONP<br />WCF Data Services don’t support JSONP by default<br />Need JSONPDefaultBehaviorAttribute<br />Need also to set specific parameters in request<br />$format<br />$callback<br />
  16. 16. Using WCF Data ServicesWith jqGrid<br />Probably easiest to set up either a WCF REST service or a MVC Action Method to retrieve the data.<br />WCF Data Service Custom Operations expect the string arguments to be surrounded by single quotes (‘).<br />jqGrid doesn’t send params like this.<br />Service Operations expect either<br />void, primitive, Entity, IEnumerable, IQueryable<br />jqGrid requires special props to be returned<br />row, total, etc.<br />
  17. 17. Resources<br />BrainCredits Link:http://www.braincredits.com/Lesson/16854<br />datajs site: http://datajs.codeplex.com/<br />JSONPSupportBehavior Attribute: http://go.microsoft.com/fwlink/?LinkId=208228<br />jqGrid site: http://www.trirand.com/blog/<br />OData site: www.odata.org<br />

×