Gil Fink's Blog : OData

VSLive Chicago Sessions Slide Decks and Demos

Gil Fink — Wed, 15 May 2013 23:13:15 GMT

VSLive Chicago Sessions Slide Decks and Demos

Just finished delivering three sessions in VSLive Chicago. It was nice meeting all the attendees and talking about technologies that I like like HTML5, OData and Entity Framework. Here is a list of the sessions that I delivered:

You can find the slide decks and demos in this link.

Why My WCF Data Service isn’t Returning JSON Format?

Gil Fink — Mon, 28 Jan 2013 07:51:37 GMT

Why My WCF Data Service isn’t Returning JSON Format?

Lately, I had the need to use WCF Data Services in a project. It has been a while since I used and wrote about WCF Data Services and a lot was changed in the framework. The scenario I needed to implement was calling a data service using jQuery. So I wrote the relevant service and used the code I wrote a few years ago and nothing happened… I got a HTTP error – HTTP Error 415 Unsupported media type. Since I know that WCF Data Services support JSON format, I’ve scratch my head and started to investigate what happened.

OData V3 Protocol and JSON

OData V3 protocol, which is implemented in WCF Data Services 5.0, includes a more efficient format for JSON serialization. In order to get the new response format you must explicitly request application/json;odata=verbose or set the MaxDataServiceVersion header to 2.0 (which is the previous protocol version). If you won’t do so you will get the HTTP error 415 result that I got.

So if you have the following WCF Data Service:

     public class MyDataService : DataService<EFModel> {

       public static void InitializeService(DataServiceConfiguration config)  {

         config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);

         config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V3;

       }

    }

In order to consume it using jQuery you will need to write the following ajax call:

    $.ajax("MyDataService.svc/Entities", {

        dataType: "json", 

        beforeSend: function (xhr) {

            xhr.setRequestHeader("Accept", "application/json;odata=verbose");

            xhr.setRequestHeader("MaxDataServiceVersion", "3.0");

        },

        success: function (data) {

           // do something with the data you got

        },

        error: function (err) {

            console.log(err);

        }

    });

In regular XmlHttpRequest requests, you will need to set the request headers like in the beforeSend function implementation in the previous code sample.

Summary

OData V3 protocol changed the way data is JSON serialized. In order to keep backward compatibility with the previous protocol versions, in V3 you need to explicitly set the request headers if you want to get JSON responses from your service. Another option is to appoint the previous protocol version (2.0) in the service configuration.

New Speaking Engagement – VSLive Chicago

Gil Fink — Thu, 24 Jan 2013 06:47:39 GMT

New Speaking Engagement – VSLive Chicago

Lately, I have been chosen to speak at VSLive Chicago conference. The conference will take place in May 13-16 at Hilton Chicago, USA. This is going to be the second time that I’m speaking in VSLive conferences and I’m very excited. In the conference I’ll have three sessions:

Working with Client-Side HTML5 Storage Technologies
HTML is the markup language that every web developer uses in order to structure and present content in the Internet. HTML5 is the standard that is being shaped and developed currently. It extends and improves the last HTML4 standard and takes it to the next level with support for multimedia, communication, semantics and more. In this session we will deep dive into the new storage options that HTML5 brings and how to use them. The session will discuss Web Storage, IndexedDB and AppCache APIs.
OData - Oh Yeah
Open Data Protocol (OData) is a protocol for exposing and consuming data on the web. The OData ecosystem is a growing community of data producers and consumers using the Open Data Protocol to exchange data. This session will explain what the Open Data Protocol (OData) is and how to create OData feeds using WCF Data Services.
Not Just a Designer: Code First and Entity Framework
Entity Framework 4 brought many new opportunities for building complex data driven applications. Code First is an Entity Framework capability that provides a code-centric experience for interacting with models and databases. This session will cover several Entity Framework features such as Code First, DbContext API and Migrations.

See you there!

WCF Data Services Processing Pipeline

Gil Fink — Mon, 02 May 2011 14:56:10 GMT

WCF Data Services Processing Pipeline

First I must confess. Even tough I like OData and WCF Data Services, in the last couple of months I didn’t have the chance to work or use them. This is why when .NET 4 was shipped I haven’t noticed a new and interesting extension point in the framework – the processing pipeline. In the last MIX11 I got a little introduction to that extension point in Mike Flasko’s session. In this post I’ll explain what is the WCF Data Services' server side processing pipeline.

WCF Data Services Processing Pipeline

In the past I wrote about the Interceptions mechanism that is built inside WCF Data Services. One of the advantages of using that mechanism is the ability to wire up business logic such as custom validations, access policy logic or whatever you like to insert in the queries/change sets pipeline. The problem starts when you need a generic behavior for all the entity sets interceptions. In the first release of WCF Data Services there were no extension points to use that will help implement generic things. But now, in .NET4, you can use the processing pipeline in order to do that. The new DataServiceProcessingPipeline is a class that is being used as a property of the DataService class (which every data service inherits from). It exposes four events that you can hook to:

ProcessingRequest – The event occurs before a request to the data service is processed.
ProcessingChangeset – The event occurs before a change set request to the data service is processed.
ProcessedRequest – The event occurs after a request to the data service has been processed.
ProcessedChangeset – The event occurs after a change set request to the data service has been processed.

These events enables the developer to write code that is performed during the process of WCF Data Services pipeline before and after things happen.

Using WCF Data Services Processing Pipeline

Here is a simple example of how to use the processing pipeline events to write to the output window that the events were called:

       public class SchoolDataService : DataService<SchoolEntities>

      {

        public SchoolDataService()

        {

          ProcessingPipeline.ProcessedChangeset += new EventHandler<EventArgs>(ProcessingPipeline_ProcessedChangeset);

          ProcessingPipeline.ProcessedRequest += new EventHandler<DataServiceProcessingPipelineEventArgs>(ProcessingPipeline_ProcessedRequest);

          ProcessingPipeline.ProcessingChangeset += new EventHandler<EventArgs>(ProcessingPipeline_ProcessingChangeset);

          ProcessingPipeline.ProcessingRequest += new EventHandler<DataServiceProcessingPipelineEventArgs>(ProcessingPipeline_ProcessingRequest);

        }

        void ProcessingPipeline_ProcessingRequest(object sender, DataServiceProcessingPipelineEventArgs e)

        {

          Debug.Write("Processing Request was called");

        }

        void ProcessingPipeline_ProcessingChangeset(object sender, EventArgs e)

        {

          Debug.Write("Processing Change Set was called");

        }

        void ProcessingPipeline_ProcessedRequest(object sender, DataServiceProcessingPipelineEventArgs e)

        {

          Debug.Write("Processed Request was called");

        }

        void ProcessingPipeline_ProcessedChangeset(object sender, EventArgs e)

        {

          Debug.Write("Processed Change Set was called");

        }

        public static void InitializeService(DataServiceConfiguration config)

        {                

          config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);      

          config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;      

        }

      }

As you can see in the service constructor I wire up all the events. This is simple sample but as I wrote you can put in the event handlers logic that perform generic behaviors such as security policies, validations and etc.

Summary

In .NET 4 there is a new feature inside WCF Data Services that enables to wire up events into the service’s processing pipeline. This is very helpful in scenarios such as business logic that you want to impose on the service execution behavior.

Making a JSONP Call to a WCF Data Service using datajs

Gil Fink — Sun, 24 Apr 2011 20:33:53 GMT

Making a JSONP Call to a WCF Data Service using datajs

During MIX11 I attended a very interesting session about datajs which was presented by Asad Khan and Marcelo Lopez Ruiz. As I promised in my previous post, in this post I’ll show you how to make a JSONP call to a WCF Data Service using datajs library.

A Little About datajs

datajs is a very promising JavaScript library which is currently being built by Microsoft as an open source in CodePlex. The library as described in its CodePlex site is “a new cross-browser JavaScript library that enables data-centric web applications by leveraging modern protocols such as JSON and OData and HTML5-enabled browser features. It's designed to be small, fast and easy to use”. Some of it current features are the ability to communicate with OData services and APIs to work with local data through browser features such as Web Storage (and in the future IndexedDB). For further reading about datajs go to the its documentation or download the library and play with it (there is also a NuGet package for it).

Making JSONP Call using datajs

Here is the implementation of the same JSONP call functionality from the previous post but using datajs:

<head




&l


















&l

1px solid;padding-top:4px;">

<!DOCTYPE html>

<html> id="Head1" runat="server"> <title>JSONP Call using datajs</title> <script src="Scripts/datajs-0.0.3.min.js" type="text/javascript"></script> </head> t;body> <form id="form1" runat="server"> <output id="result"> </output> </form> <script type="text/javascript"> OData.defaultHttpClient.enableJsonpCallback = true; OData.read("http://localhost:23330/SchoolDataService.svc/Courses", function (data, request) { var output = document.getElementById('result'); for (var i = 0; i < data.results.length; i++) { var div = document.createElement('div'); div.innerHTML = data.results[i].Title; output.appendChild(div); } }); </script> t;/body> </html>

A few things to notice in the example:

I add the script to datajs which exists in my web application project under the Scripts directory.
You need to enable JSONP through the OData.defaultHttpClient.enableJsonpCallback which is disabled by default.
Use the OData.Read function to make the call to the service (no need to add the format or callback query parameters like I did in the previous post since they are added automatically).

Pay attention that in a real world application you would probably like to disable JsonpCallback after you make the call.

Summary

datajs is still in Alpha version and it is only in its starting point. It tries to provide a common solution around the data problem in the client side development. I expect it to grow and to supply more capabilities in the future. In this post I showed how to use it in order to make a JSONP call to a JSONP enabled WCF Data Service.

Combining WCF Data Services, JSONP and jQuery

Gil Fink — Sun, 24 Apr 2011 18:14:09 GMT

Combining WCF Data Services, JSONP and jQuery

During Mike Flasko’s session at MIX11, he showed how to create a JSONP aware WCF Data Service with a JSONPSupportBehavior attribute that is available for download from MSDN code gallery (and is supposed to be a part of Microsoft.Data.Services.Extensions namespace). In this post I’ll show a simple example that uses the attribute and jQuery in order to make a JSONP cross domain call for a WCF Data Service.

Setting up the Environment

First I started by creating two different ASP.NET web applications. The first application includes the calling page and the second includes the WCF Data Service. Then, I created in the second web application an Entity Framework model and the WCF Data Service from that model. I also added the JSONPSupportBehavior.cs class that exists in the link I supplied earlier. The class includes the implementation of JSONPSupportBehavior which implements the WCF IDispatchMessageInspector interface. Also it includes the JSONPSupportBehaviorAttribute which I use in my code. The code is simple and looks like:

       [JSONPSupportBehavior] 

      public class SchoolDataService : DataService<SchoolEntities>

      {

        // This method is called only once to initialize service-wide policies.

        public static void InitializeService(DataServiceConfiguration config)

        {      

          config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);      

          config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;

        }

      }

Making the JSONP Call

In the second web application I’ve created a web form that will hold the JSONP call example. Here is the code that makes the call:

      <!DOCTYPE html>

      <html>

      <head runat="server">

          <title>JSONP Call</title>

          <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script>

      </head>

      <body>

          <form id="form1" runat="server">

          <output id="result">

          </output>

          </form>

          <script type="text/javascript">

              $.getJSON('http://localhost:23330/SchoolDataService.svc/Courses?$format=json&$callback=?', 

              function (response) { 

                  $.each(response.d, function (index, value) {

                      var div = document.createElement('div');

                      div.innerHTML = value.Title;

                      $('#result').append(div);

                  })

              });        

          </script>

      </body>

      </html>

Lets explore the web form code:
At first I use Microsoft CDN in order to retrieve the jQuery library. Then, I’ve created a HTML5 output element in order to append to it the output of the call. In the main script I use jQuery’s getJSON function which is calling the WCF Data Service. Pay attention that in order to get a JSON response from the WCF Data Service you need to use the $format=json query string parameter. After I retrieve the data I iterate and create a div element for each course title that was retrieved. This is done in the success function that I wired in the getJSON function call. Here is the output of running the code:

Summary

In the post I supplied a simple example of making a JSONP call to a WCF Data Service using jQuery. This sort of solution can help you to consume WCF Data Services that exists in other domains from your client side. In a follow up post I’ll show the same example using the new datajs library.

Configuring WCF Data Services using Lambda Expressions

Gil Fink — Thu, 21 Apr 2011 15:13:00 GMT

Configuring WCF Data Services using Lambda Expressions

One of the things that I avoid when I’m writing code is the use “magic strings”. Hardcoded strings are a code smell and should be rarely used. When using WCF Data Service configuration object you’ll have to pass the entity set’s string name to the configuration methods which as I wrote I would like to avoid. This is why in today’s post I’m going to extend the DataServiceConfiguration object to support lambda expressions instead of string parameters.

Data Service Configuration Extensions

I’ve created a simple static class that includes two new extension methods: SetEntitySetAccessRule<DataSource> and SetEntitySetPageSize<DataSource>. Both of the methods extends the DataServiceConfiguration object and add the functionality of receiving a lambda expression that will hold the entity set name. Here is the class implementation:

public static class DataServiceConfigurationExtensions{  public static void SetEntitySetAccessRule<DataSource>(this DataServiceConfiguration config,    Expression<Func<DataSource, object>> expression,    EntitySetRights rights)    where DataSource : class  {          string entitySetName = GetEntitySetName(expression);    config.SetEntitySetAccessRule(entitySetName, rights);  }   public static void SetEntitySetPageSize<DataSource>(this DataServiceConfiguration config,    Expression<Func<DataSource, object>> expression,    int pageSize)    where DataSource : class  {    string entitySetName = GetEntitySetName(expression);    config.SetEntitySetPageSize(entitySetName, pageSize);  }   private static string GetEntitySetName<DataSource>(Expression<Func<DataSource, object>> expression)  {    MemberExpression memberExpression = expression.Body as MemberExpression;    if (memberExpression == null)    {      throw new ArgumentException("Must be a member expression");    }    return memberExpression.Member.Name;  }}

And here is how you’ll use this implementation while configuring your data service:

public class SchoolDataService : DataService<SchoolEntities>{       public static void InitializeService(DataServiceConfiguration config)  {    config.SetEntitySetAccessRule<SchoolEntities>(c => c.Courses, EntitySetRights.All);    config.SetEntitySetPageSize<SchoolEntities>(c => c.Courses, 10);        config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;  }}

Now, if a name of an entity set will change you’ll get compilation error instead of runtime error. Also this way is less error prone and it is more clean. Since the InitializeService method is being called only once then the impact on performance is negligible.

Summary

Using “magic strings” is a bad habit. In this post I showed a simple solution for using lambda extensions instead of strings while configuring a WCF Data Service.

MIX11 Third Day Sessions Summary

Gil Fink — Fri, 15 Apr 2011 00:22:50 GMT

MIX11 Third Day Sessions Summary

Here is a summary of the sessions I attended in the third day of MIX11:

The Future of HTML5

In the session Giorgio Sardo talked about

What is HTML5? – HTML’s new specifications which are getting specified by W3C, IETF and ECMA in working groups for each specification out of ~100 specifications.
Microsoft thinks that HTML5 is ready to go to Last Call phase in May 2011 – meaning it will need to go to RC and then recommendation afterward.
Microsoft approach for HTML5 – releasing every 8-12 weeks new previews for IE in order to get feedback from developers (IE9 had 8 previews). Microsoft invest a lot in interoperability in order that all the browsers will work in the same way. Microsoft innovate with emerging standards by putting new implementations of standards in the HTML5 labs site as experiments.
HTML5 labs – You can find there experiment prototype implementation for WebSockets, IndexedDB, FileAPI and Media Capture API and to test it yourself and of course deliver feedback to Microsoft about the prototypes. Microsoft suggested new specifications to W3C like tracking protection, speech API and more.
HMTL6 – Microsoft vision about HTML next version – introduction of interoperability process, future proof innovation, background compatibility and modularization specifications and focus efforts.
Things that Giorgio expects in the future – better integration of SVG + HTML + CSS, DRM video, Full Screen APIs, better device support and accessibility.

OData Roadmap

Pablo Castro talked about what to expect of vNext of Open Data Protocol. Pablo introduced OData and then deep dive into the features to expect in vNext:

Functionality -

Better queries – new “any” and “all” filter operators, conditions on collections of related entities and nested queries.
Better inheritance support – allow navigation properties in subtypes and unlocking full use of inheritance in models.
Geospatial support.

Efficiency -

Refreshing data – using a new link in the protocol which the rel attribute’s value is http://odata.org/delta to indicate what is the refresh policy or in JSON “__delta” property in the JSON object. OData Paging feature and deltas will work together.

Extensibility

For metadata, query language, wire formats and more. This will be achieved by using Shared Vocabularies.

In a few months the new features that were discussed in the session will be released. The implementation in .NET should be expected around Q1 of 2012.

WCF Web APIs

In the session Glenn Block talked about the rational for building the WCF web API framework. Then Glenn drilled down into the framework. He showed how standards play well with Web API implementation with an example using of HTML5 WebSockets. Then he built a web site using the Web API.

For further information about WCF Web APIs go to WCF community site.

Data in HTML5 World

The session started by presenting classic web applications (using Ajax and server platforms). The session discussed how to create data centric web application. Asad Khan and Marcelo Lopez Ruiz presented datajs which is a cross browser JavaScript library which is focusing on data and all the data implementation in HTML5 such as Local Storage. It also support full write-back to servers, batching, pre-fetching, metadata, cache configuration, eviction policy, works over Web Storage today and in the future with IndexedDB. In old browsers you will also get the same experience since the library has a fallback implementation.

You can use NuGet in order to grab datajs and to explore it or get it from here.

My SDP Lecturer Interview

Gil Fink — Sun, 27 Feb 2011 21:40:48 GMT

My SDP Lecturer Interview

Last week Sela conducted a live broadcast with trailers to the sessions that will be presented on stage in the SDP conference. The broadcast was recorded if you want to see me “making a fool” of myself in the live broadcast you can watch the recording of my interview here (in Hebrew).
I’m reminding that I’m going to have two sessions:

Creating OData Services with WCF Data Services
Data is a first-class element of every application. The Open Data Protocol (OData) applies web technologies such as HTTP, AtomPub and JSON to enable a wide range of data sources to be exposed over HTTP in a simple, secure and interoperable way. This session will cover explain what is the Open Data Protocol and how to create OData feeds using WCF Data Services.

Not Just a Designer: Code First and Entity Framework
Entity Framework 4 brings many new opportunities for building complex data driven applications. Code First is a new EF capability that provides a code-centric experience for interacting with models and databases. The session will cover several new and future EF features such as Code First, and provide an overview for what to expect from EF in the future.

Also, I’m attending a tutorial day with Ido Flatow and Erez Harari about Entity Framework in Depth and a MVP Panel which is an ask the experts session.

Hope to see you at the conference!

OData Session Slide Deck and Demos

Gil Fink — Mon, 02 Aug 2010 12:20:10 GMT

OData Session Slide Deck and Demos

Yesterday’s evening I delivered an OData session at the Israeli Web Developer
Community (WDC) user group at Microsoft Ra’anana. The session included the
following agenda:

The OData need.
What is OData?
Creating and consuming OData feeds.

I want to thank all the attendees who came to the session. I really enjoyed to deliver the content about OData and the audience was very cooperative with a lot of good questions that helped to highlight many crucial OData subjects. At the end of the session I gave a WebsiteSpark gift card that I got in MIX2010 conference (hopefully that the code in the card still work four months after the event).

As I promised, I uploaded the session slide deck and demos to my Skydrive account and you can download it from here. Pay attention that in the demos main directory there is a backup file for the demo database.

Enjoy!

OData Session is Occurring Today

Gil Fink — Sun, 01 Aug 2010 12:50:08 GMT

OData Session is Occurring Today

Today at 17:30 I’m delivering an OData session at Microsoft
office in Ra’anana. Come and hear about the Open Data
Protocol, a new protocol for exposing and consuming data on the
web. The OData ecosystem is a growing community of data producers and
consumers using the Open Data Protocol to exchange data.
The Open Data Protocol breaks down data silos and increases the shared
value of data and its associated business logic through the Web by enabling the exposure of any data source as a Web-friendly data feed. The easiest way to become an OData producer in the .Net world is by using WCF Data Services. In the session I’ll talk about what is OData, how to use WCF Data Services to expose OData feeds and how to consume OData feeds in lots of ways and examples. You still can register to the event from here.

See you there.

OData Session is Coming

Gil Fink — Wed, 14 Jul 2010 22:11:34 GMT

OData Session is Coming

At last my OData
session details were
published today.
The OData ecosystem
is a growing community
of data producers and
consumers using the
Open Data Protocol to
exchange data.
The Open Data Protocol
breaks down data silos and increases the shared value of data and its
associated business logic through the Web by enabling the exposure
of any data source as a Web-friendly data feed. The easiest way to
become an OData producer in the .Net world is by using
WCF Data Services. In the session I’ll talk about things like what is OData,
how to use WCF Data Services to expose OData feeds and how to consume
OData feeds.
If you find this subject interesting you can register the event here.

See you there.

OData Explorer

Gil Fink — Tue, 06 Jul 2010 15:46:55 GMT

OData Explorer

One nice tool to use with OData is the
OData Explorer. The OData Explorer
is a tool that helps to explore OData feeds
in a visual way and not by exploring the
Atom/JSON responses. You can download
the tool from here. Another way to use the
tool is by going to the following link:
http://Silverlight.net/ODataExplorer.

OData Explorer Requirements

The tool is a Silverlight 4 project.
In order to use it you’ll have to answer these requirements:

Visual Studio 2010
Silverlight 4 Developer runtime
Silverlight 4 SDK
Silverlight 4 tools for Visual Studio
Latest Silverlight Toolkit release for Silverlight 4

or of course use it on-line in the link I provided previously.

Using the Tool

When the tool start you’ll get to the Add New OData Workspace view:

Here you can address your feed or address public OData feeds.
After choosing the workspace you’ll get into the tool:

Now you can go over the collections (entity sets) and get their information
in grid representation (which can be edited if the service is updatable):

or in row data (Atom/JSON):

You can type your own queries in the upper text box or you can
use the Build Query view to create a query:

Summary

The OData Explorer is very useful tool when you want to
understand and look at OData feeds without understanding the
protocol. It comes with very nice features and can be very handy
in presenting your feeds.

Loading WCF Data Services Ajax Script Library

Gil Fink — Mon, 05 Jul 2010 12:05:00 GMT

Loading WCF Data Services Ajax Script Library

Since I’ve given sessions
about WCF Data Services in
the past (when they were
called ADO.NET Data Services)
I wanted to reuse some of the Ajax
examples I showed for my coming OData
session. One of the things that have
been changed lately were the scripts to use
when you want to make Ajax calls to your Data Service.
So I downloaded the new scripts and saw that the names
of the objects to use have been changed a little but their functionality
remained the same. Moreover we have a new feature which helps
to figure what to load and how. In this post I’ll explain how to load
the WCF Data Services scripts automatically or manually.

The New Sheriff – Script Loader

One thing to understand about the new Ajax script libraries is
that the libraries ware split into many files in order to enable the
loading of the relevant libraries that you need whenever you need them.
Also, there is a new Script Loader object which help you to load the scripts
and their dependencies automatically. So I went to the documentation
to understand how to use the new OpenDataServiceProxy object (in the past
it was called DataServiceProxy). In order to use it you need to reference the
start.debug.js (or start.js in production):

<script type="text/javascript" src="/Content/Scripts/start.debug.js"></script> 

(where /Content/Scripts is the location of all the Ajax script library files)

Also, you need to use the following statement in order to load the
relevant scripts from your server:

Sys.require([Sys.components.dataContext, Sys.components.openDataContext]);

The Sys.require statement is used to configure the Script Loader to load
the libraries of the data context and the open data context which
include all the functionality to consume WCF Data Services from Javascript.
The Script Loader will check if the libraries exists in the server in the same
directory that start.debug.js exists and then load all the components for us.
It can cause some problems if when you use relative paths so pay attention
to that. Also, using the ScriptManager we can enable a search in Microsoft
Content Delivery Network (CDN) instead of loading the files from our server.
A master page that include an OpenDataServiceProxy object can look like:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="AjaxClient.master.cs"    Inherits="DataServiceAjaxClient.Master.AjaxClient" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>        <script src="/Content/Scripts/Start.debug.js" type="text/javascript"></script></head><body>    <form id="form1" runat="server">    <div>        <script type="text/javascript">            var proxy;            Sys.require([Sys.components.dataContext, Sys.components.openDataContext]);            Sys.onReady(function () {                proxy = new Sys.Data.OpenDataServiceProxy("/Services/SchoolService.svc");            });        </script>        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        </asp:ContentPlaceHolder>    </div>    </form></body></html>

Pay attention to the Sys.onReady function which will be called after all the
scripts were loaded.

How to Load the Scripts Manually

In order to manually load the relevant Javascript files we first have to
figure the script files dependencies. The dependencies of files are shown
here:

So you can use the ScriptManager to load the scripts like in the
following example (the order of the ScriptReferences is very important!):

<asp:ScriptManager ID="ScriptManager1" runat="server" AjaxFrameworkMode="Explicit">    <Scripts>        <asp:ScriptReference Path="~/Content/Scripts/Start.debug.js" />        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxCore.debug.js" />        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxComponentModel.debug.js" />        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxSerialization.debug.js" />                    <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxNetwork.debug.js" />        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxWebServices.debug.js" />                                <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxDataContext.debug.js" />        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxOpenData.debug.js" />    </Scripts></asp:ScriptManager>

Pay attention for the AjaxFrameworkMode attribute that is set to Explicit.
With this attribute you control which are the relevant scripts to load and the
ScriptManager only load the MicrosoftAjax.js file.

Summary

In order to use the new Ajax library you have the new Script Loader to
help you with loading the relevant scripts. If you don’t want to use the
Script Loader you should understand the dependencies of the script
libraries files and to load them according to these dependencies.

Calling a WCF Data Service From jQuery

Gil Fink — Sun, 04 Jul 2010 12:15:00 GMT

Calling a WCF Data Service From jQuery

I’m working on a lecture
about OData which I’ll
will present next month
(stay tuned for more
details in the near future).
One of the things that
I want to show is how easy
and simple it is to consume a WCF Data Service (OData feed)
with the jQuery library. In the post I’ll show you exactly how
to do that.

jQuery’s getJSON Method

When you want to load JSON data from the server using a GET HTTP
request in jQuery you will probably use the getJSON method. That
method gets as input the server URL, a map of key-value pairs which
holds parameters to the server and a callback function to use when
the response arrives back to the client and returns the server response
in JSON format.
This method is the best candidate for consuming WCF Data Services
endpoints. If I want to use the getJSON method I’ll do something
like the example provided in the getJSON documentation:

$.getJSON('ajax/test.json', function(data) {  $('.result').html('<p>' + data.foo + '</p>'    + '<p>' + data.baz[1] + '</p>');});

How to Consume WCF Data Service with jQuery getJSON Method

When we understand that WCF Data Service is just an HTTP
endpoint which returns JSON answer if addressed with
JSON request the road is very clear. If I want to consume the
service all I need to do is to create the relevant URI with the
WCF Data Service URI conventions and that is it.
The following code is an example for that:

$.getJSON("/Services/SchoolService.svc/Courses", null,    function (data) {        var sb = new Sys.StringBuilder();        sb.append("<div>");                                        $.each(data.d, function (i, item) {            CreateDivForOneCourse(sb, item)        });        sb.append("</div>");        $('#divResults').html(sb.toString());    });

What this code is doing is going to a WCF Data Service endpoint
that is called SchoolService.svc and retrieve the courses entity set
it holds. I don’t pass any parameters to the request so the key-value
pair is null. In the callback function I create a StringBuilder object and
append to it the response by iterating the data and creating a div
for every course. In the end I put the result as html in a div which has
an id of divResults.

The All Example Page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConsumeDataServicejQuery.aspx.cs"    Inherits="DataServiceAjaxClient.ConsumeDataService.ConsumeDataServicejQuery" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="../Content/Scripts/jquery-1.4.1.js" type="text/javascript"></script>    <script src="../Content/Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>    <script type="text/javascript">                        var ajaxRequest;         $(document).ready(function () {                                    $('#btnShowCourses').click(function () {                GetCoursesData();            });        });         function GetCoursesData() {            if (ajaxRequest != null) {                ajaxRequest.abort();            }            ajaxRequest = $.getJSON("/Services/SchoolService.svc/Courses", null,            function (data) {                var sb = new Sys.StringBuilder();                sb.append("<div>");                                                $.each(data.d, function (i, item) {                    CreateDivForOneCourse(sb, item)                });                sb.append("</div>");                $('#divResults').html(sb.toString());            });        }         function CreateDivForOneCourse(stringBuilder, item) {            stringBuilder.append("<div><span>");            stringBuilder.append(item.CourseID);            stringBuilder.append("</span>&nbsp;<span>");            stringBuilder.append(item.Title);            stringBuilder.append("</span></div>");        }                  </script></head><body>    <form id="form1" runat="server">    <div>        <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>        <input type="button" id="btnShowCourses" value="Show Courses" /><br />        <div id="divResults" />    </div>    </form></body></html>

After running this example the result looks like:

Summary

Consuming WCF Data Services with jQuery is very easy task.
By using the getJSON method we create the HTTP GET request
to the service and get the returning data in JSON format to
our disposal.