JayData.org

By completing this tutorial you will be able to consume an OData service from JavaScript with the elegance and simplicity of the JavaScript Language Query, without ever writing down an $.ajax statement or manually building OData query strings or payloads.

Notes:

• This howto is built with the Northwind sample database, wrapped in an EntityFramework 4.0 EDMX and published with a WCF Data Service. You can grab this example project from CodePlex.
• This walkthrough intentionally lacks the use of any kind of view or template engines to keep the material focused on its main topic: accessing and manipulating data with JayData.

Why use JayData?

With JayData you can work with online data in JavaScript on a way that was previously only possible for .NET and Silverlight developers. Instead of approaching the OData (or other storage) endpoint from a protocol level with handcrafted query strings and HTTP requests fired off from the middle of an event handler, JayData provides a typed abstraction layer: the EntityContext with typed EntitySets and Entities, and the native syntax of JavaScript for querying and modifying data.

 

Before we begin, see it in action below:

One possible way

The JayData way JavaScript Language Query (JSLQ)

 

Get ALL Categories!

$.ajax({ url: '/northwind.svc'+ '/Categories', dataType: 'JSON', success: function (result) {   var data;   if ((typeof result === 'object')            && (('d' in result)            && ('results' in result.d))) {     data = result.d.results;   } else {    data = result.d || result;    }     if (Array.isArray(data)) {     for (var i = 0; i < data.length; i++) {       var item = data[i]; $('#queryResult')            .append('<li>'             + item["Category_Name"]             + '</li>');     }    } else {      $('#queryResult').append(data);   } }}); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 $.ajax({    url: '/northwind.svc'+ '/Categories',    dataType: 'JSON',    success: function (result) {    var data;    if ((typeof result === 'object')            && (('d' in result)            && ('results' in result.d))) {     data = result.d.results;    } else {    data = result.d || result;    }      if (Array.isArray(data)) {     for (var i = 0; i < data.length; i++) {       var item = data[i]; $('#queryResult')            .append('<li>'             + item["Category_Name"]             + '</li>');     }    } else {      $('#queryResult').append(data);    } }});

northwindContext .Categories .forEach(function (category) { $('#categories').append('<li>' + category.Category_Name + '</li>'); }); 1 2 3 4 5 northwindContext     .Categories     .forEach(function (category) {         $('#categories').append('<li>' +         category.Category_Name + '</li>'); });

 

Get ONLY the product names from the list of products that are either Beverages (Category_Id = 1) or contain tofu in the product name regardless of the case,

sorted by the product name.

var queryString = ("/Northwind.svc/Products?" + "$filter=((Category/Category_ID eq 1)or" + "substringof('tofu',tolower" +"(Product_Name)))&" + "$orderby=Category/Category_Name&" + "$select=Product_Name"); $.ajax({ url: queryString, dataType: 'JSON', success: function (result) { var data; if ((typeof result === 'object') && (('d' in result) && ('results' in result.d))) { data = result.d.results; } else { data = result.d || result; } if (Array.isArray(data)) { for (var i = 0; i < data.length; i++) { var item = data[i][“Product_Name”]; ... } } else { $('#products').append(data); } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 var queryString = ("/Northwind.svc/Products?"     + "$filter=((Category/Category_ID eq 1)or"     + "substringof('tofu',tolower"     +"(Product_Name)))&"     + "$orderby=Category/Category_Name&"     + "$select=Product_Name");   $.ajax({     url: queryString,     dataType: 'JSON',     success: function (result) {         var data;                  if ((typeof result === 'object')    && (('d' in result)     && ('results' in result.d))) {             data = result.d.results;         } else {             data = result.d || result;         }                  if (Array.isArray(data)) {          for (var i = 0; i < data.length; i++) {              var item = data[i][“Product_Name”];              ...           }  } else {    $('#products').append(data);   }     } });

northwindContext .Products .filter(function (product) { return product.Category.Category_ID == 1 || product.Product_Name .toLowerCase().contains('tofu') }) .orderBy(“it.Category.Category_Name”) .map(function(p) { return p.Product_Name } ) .forEach(function (productName) { ... } ); 1 2 3 4 5 6 7 8 9 northwindContext   .Products   .filter(function (product) { return       product.Category.Category_ID == 1 ||       product.Product_Name         .toLowerCase().contains('tofu') })   .orderBy(“it.Category.Category_Name”)   .map(function(p) { return p.Product_Name } )   .forEach(function (productName) { ... } );

A typed OData context provides intellisense on the Entity and EntitySet level.

You can generate such a context with the JaySvcUtil.exe, we will talk this about later.

CategoryId? CategoryID? or Category_ID?

Intellisense list of entity fields comes in handy in a number of times.

The fluent API provides for simple, readable code

…that is easy to maintain even in the long run

How to setup the Northwind OData demo environemnt?

The Northwind OData demo environment can be downloaded from here or from this link at CodePlex.

1) Open Visual Studio 2010 and create a new Empty Web Application, name it NorthwindDemo.

2) Add ASP.NET folder App_Data

3) Drag the Northwind.sdf sample database from

C:\Program Files (x86)\Microsoft SQL Server Compact Edition\v4.0\Samples into the App_Data folder.

4) Add a new ADO.NET Entity Data Model and name it Northwind

 5) Choose Generate from database

6) Accept the default selection of the data connection

If you can not see Northwind.sdf like in the picture then make sure you have SQL Server CE 4.0 support installed. Also you might need to open the Northwind.sdf database with a double click to have it appear in the list.

7) Include all the tables and press Finish to get an EDMX (that is not so nicely arranged then mine)

 

8) Add a new WCF Data Service and name it Northwind.svc

9) Open the Northwind.svc file and edit its contents following the comments in the code:

10) Right click on the Northwind.svc and select “View in Browser”. Congratulation, you have and operational OData service.

Getting JayData and preparing our HTML5 application

1) Open Tools > Library Package Manager > Package Manager Console, and type

2) Install-Package JayData

 

3) The  package contains the JayData JavaScript library (and its dependencies) and the JaySvcUtil.exe command line tool.

 

4) Use the JaySvcUtil to generate Northwind.js from the service metadata uri: /Northwind.svc/$metadata

The syntax for JaysvcUtil is blogged about here.

Northwind.js is generated in you web project folder. You may have to switch “show all files” in the solution tree to be able to access Northwind.js from Visual Studio.

For those with deep passion in their heart toward JavaScript, here is what gets generated. Others may freely skip.

5) Include Northwind.js in your project and place into the Scripts folder

6) Add an empty html page and name it index.html

Make sure that the doctype is HTML5 that is: <!DOCTYPE html>

7) Place JayData.js and its dependencies in the index.html file

UPDATE:

As of JayData 1.1 and above you need to also include jaydataproviders/odataprovider.js in your page for the following examples to work without modification.

How to create a simple product creator application?

List categories

List products for a category

Extended the script block with the following lines. Notice the match in the jQuery delegate for the category class (class=category).

Create a new product from code

To invoke this function place a button somewhere in the html.

and that’s all folks…