jQuery and ODataPerfect Together

David HoersterCo-Founder, BrainCredits.comdavid@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 ServicesDemo – 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/ jQueryDEMO – 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