Loading WCF Data Services Ajax Script Library

A Technical Blog article. View original blog here.[^]

Introduction

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 upcoming OData session. One of the things that has 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="http://www.codeproject.com/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 includes 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 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 includes 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=http://www.codeproject.com/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 loads 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 how to load them according to these dependencies.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Gil Fink

Architect
Sela Group

Israel

Member

Gil Fink is an expert in ASP.NET and Microsoft data platform and serves as a Senior Architect at SELA Group. He is a Microsoft data platform MVP and a certified MCPD Enterprise Application Developer. Gil has worked in the past in variety of positions and projects as a leading developer, team leader, consultant and more. His interests include Entity Framework, Enterprise Library, WCF, LINQ, ADO.NET and many other new technologies from Microsoft.

My technical blog: http://www.gilfink.net

Article Top