jQuery and OData - Perfect Together

jQuery and ODataPerfect Together
David Hoerster
Co-Founder, BrainCredits.com
david@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
JSONP
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?
Consistency
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
SetServiceOperationAccessRule
Custom Service Operations support returning
void
primitive
Entity
IEnumerable
IQueryable

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
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

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
$format
$callback

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

jQuery and OData - Perfect Together

by David Hoerster on Aug 25, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 542

Statistics

jQuery and OData - Perfect Together — Presentation Transcript