jQuery and OData - Perfect Together

Uploaded 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'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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. jQuery and ODataPerfect Together
    David Hoerster
    Co-Founder, 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
    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?
    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
    Custom Service Operations support returning
  • 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
    “Data” returned is at that ‘d’ level
    Doesn’t exist with datajs – needs to be handled with raw wcf data service calls
    Writing data
    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
  • 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