Loading WCF Data Services Ajax Script Library

July 5, 2010

Loading WCF Data Services Ajax Script Library


Since I’ve given sessions Loading WCF Data Services Scripts without Sys.require
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:
Microsoft Ajax Library Relationships 
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.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>