• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery and OData - Perfect Together

jQuery and OData - Perfect Together



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.



Total Views
Views on SlideShare
Embed Views



2 Embeds 1,344

http://geekswithblogs.net 1343
http://webcache.googleusercontent.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    jQuery and OData - Perfect Together jQuery and OData - Perfect Together Presentation Transcript

    • jQuery and ODataPerfect Together
      David Hoerster
      Co-Founder, BrainCredits.com
    • 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
    • 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
    • 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)
    • WCF Data Services – Why?
      Accepted format for data transport (OData)
      Navigate relationships
      Simple configuration in code
      Growing support for OData format
    • 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
    • WCF Data Services
      Demo – Getting Data from a WCF Data Service
    • 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
    • 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
    • WCF Data Services w/ jQuery
      DEMO – Custom service methods and performing updates
    • Connecting WCF DS w/ jQuery
      Simple web app – WRAP-UP
      Custom service methods
      Inserts, updates, deletes
      Custom Operations honor OData keywords
    • 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
    • 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
    • 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
    • JSONP
      WCF Data Services don’t support JSONP by default
      Need JSONPDefaultBehaviorAttribute
      Need also to set specific parameters in request
    • 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.
    • 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