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.

1. jQuery and ODataPerfect Together David Hoerster Co-Founder, BrainCredits.com david@braincredits.com

2. About Me C# MVP (April 2011) Co-Founder of BrainCredits (braincredits.com) Senior Technical Director for Resources Global Professionals President of Pittsburgh .NET Users Group Organizer of recent Pittsburgh Code Camps Twitter - @DavidHoerster Blog – http://geekswithblogs.net/DavidHoerster Email – david@braincredits.com

3. Agenda Quick overview of WCF Data Services and OData Getting data from a WCF Data Service Fiddler, LINQPad, web apps Calling WCF Data Services and Custom Service Methods via jQuery Using datajs as a client library datajs as a caching client JSONP Optional: Other uses for your data context

4. WCF Data Services – What? Allows you to expose or consume data over HTTP using REST Uses the Open Data Protocol (OData) Data exposed as resources addressable as URIs Data is an underlying model of some sort Entity Data Model (easiest) LINQ to SQL Custom entity classes (roll your own provider)

5. WCF Data Services – Why? Consistency Accepted format for data transport (OData) Navigate relationships Simple configuration in code Growing support for OData format

6. WCF Data Services – OData OData can be exposed in one of two formats Atom (XML) JSON (text) Data itself is exposed as one or more feeds Individual items in a feed are entries OData is published by Microsoft and is an open source specification Allows other parties to create consumers and producers of OData feeds

7. WCF Data Services Demo – Getting Data from a WCF Data Service

8. WCF Data Services Getting data from a service – WRAP-UP Understanding the URI’s XML vs. JSON size JSON structure Using jQuery to iterate through results Getting the next set of results

9. WCF Data Services w/ Web Apps You can create custom service operations You can use GET or POSTs with custom service operations Security still holds true SetServiceOperationAccessRule Custom Service Operations support returning void primitive Entity IEnumerable IQueryable

10. WCF Data Services w/ jQuery DEMO – Custom service methods and performing updates

11. Connecting WCF DS w/ jQuery Simple web app – WRAP-UP Custom service methods Inserts, updates, deletes Custom Operations honor OData keywords

12. DataJS Recently moved from Alpha to 1.0 Available via CodePlex Also, NuGet package (search ‘datajs’) Provides cross-browser support to connect to data sources Currently just supports OData services Provides helpers to caching data via remote services or local storage Supports JSON and Atom formats

13. DataJS w/ JSON Reading data OData.read(…) “Data” returned is at that ‘d’ level Doesn’t exist with datajs – needs to be handled with raw wcf data service calls Writing data OData.request(…) Supports POST/PUT/MERGE/DELETE Data variables don’t have to be pure JSON – datajs will format Supports batching requests

14. DataJS - Caching DataJS provides a simple caching mechanism createCache allows you to create named caches You can read from them You can clear them More advanced functionality See the Netflix example from datajs site

15. JSONP WCF Data Services don’t support JSONP by default Need JSONPDefaultBehaviorAttribute Need also to set specific parameters in request $format $callback

16. Using WCF Data ServicesWith jqGrid Probably easiest to set up either a WCF REST service or a MVC Action Method to retrieve the data. WCF Data Service Custom Operations expect the string arguments to be surrounded by single quotes (‘). jqGrid doesn’t send params like this. Service Operations expect either void, primitive, Entity, IEnumerable, IQueryable jqGrid requires special props to be returned row, total, etc.

17. Resources BrainCredits Link:http://www.braincredits.com/Lesson/16854 datajs site: http://datajs.codeplex.com/ JSONPSupportBehavior Attribute: http://go.microsoft.com/fwlink/?LinkId=208228 jqGrid site: http://www.trirand.com/blog/ OData site: www.odata.org