ASP.NET + jQuery + Odata = Goodness

Stephen WaltherSuperexpert.com

Stephen.Walther@Superexpert.com

Agenda

• Overview of OData/WCF Data Services• Querying OData from jQuery• Creating/Editing OData from jQuery• Client/Server Validation• Useful OData plugins

The Open Data Protocol (OData)

Defined at Odata.org:

● Open Standard● REST = Representational State Transfer● Supports XML (Atom) and JSON ● XHR and JSONP

OData Data Sources

• Netflix• NuGet• Stack Overflow• SQL Azure• Azure Table Storage• SharePoint 2010• Windows Live

• SQL Server Reporting Services

• eBay

WCF Data Services

• Exposes data using the OData protocol

• WCF Data Services February 2011 CTP2● Works with Entity Framework 4.1 (Code First)

WCF Data Services

Exposes DBContext:

Querying OData

OData URIs have three parts:● Service Root● Resource Path● Query Options

Querying OData

Query Options:● $select● $filter● $top● $skip● $orderby● $inlinecount● $count

• $expand• $format• $links• $metadata• $value

Query OData (Operators)

Query OData (String Filters)

Query OData (Date Filters)

Query OData (Math Filters)

Query OData (Type Filters)

Query OData

__metadata:

Query OData with jQuery

Create New Entities

Edit Existing Entities

Validation

Client = Use jQuery ValidateUse for immediate user feedback

Server = Use Entity FrameworkUse for domain validation

Client ValidationUse jQuery Validate to create client validation rules

Server ValidationUse Data Annotation validators to validate properties:

Server ValidationUse the IValidatableObject interface for more complex validation:

Server ValidationHandle the Entity Framework DbEntityValidationException in your service class:

jQuery OData Plugin

• Created by Egil Hansen: ● https://github.com/egil/jquery.odata

• Updated fork at:● https://github.com/StephenWalther/jquery.odata

DataJS Plugin

• Created by Microsoft:● http://datajs.codeplex.com/

• Supports reading and updating data

• Supports HTML5 DOM Storage

Resources

● WCF Data Services March 2011 CTP2• http://

www.microsoft.com/downloads/en/details.aspx?FamilyID=60fb0117-8cea-4359-b392-6b04cdc821be

● Entity Framework 4.1 (Included with MVC3)• http://www.microsoft.com/downloads/en/details.aspx?FamilyID=2dc5ddac-5a96-48b

2-878d-b9f49d87569a● jQuery Templates

• Install-Package jQuery.Templates● jQuery UI (Included with MVC3)

• Install-Package jQuery.UI● jQuery Odata

• https://github.com/egil/jquery.odata/wiki• https://github.com/StephenWalther/jquery.odata

● DataJS• http://datajs.codeplex.com/

Download the Sample Code

Visit Stephen Walther’s blog to download the sample code for this talk:

● http://StephenWalther.com

Website: http://Superexpert.com Email: Stephen.Walther@superexpert.comPhone: 800 691 - 7140

Your Feedback is Important

Please fill out a session evaluation form.

Thank you!