Building an Ajax Client for ADO.NET Data Service
Building an Ajax Client for ADO.NET Data Service
The post is another post
in the series of posts
that I write in the
ADO.NET data services
subject. You can read
the previous posts here.
In the post I’m going to explain how to build an Ajax client for a data service.
Revisiting Previous Posts Example
In the example I’m going to use the same course data context that I used in my
previous posts. If you are not familiar with the example, you can go to the following
links to update:
Building the Project and Adding the Data Service
The first thing to do is to add to the solution a new ASP.NET 3.5 Extensions Web
Application:
After we have the project I add a Services directory to it and put the data service
file CoursesService.svc inside of it. The CoursesDataContext class and the Course
class will be in a separate class library project. After adding the data service your
project should look like:
Consuming a Data Service from an Ajax Client
By now we have a starting project. Lets understand how the Ajax “magic” will work.
In the ASP.NET Ajax client library there is a new namespace – Sys.Data. This
namespace hosts the main client side object to interact with data services –
DataService. This object holds all the functionality we need in order to have JavaScript
abstraction over a data service. In order to have that object inside our web application
we need to register its js file in our pages. You do that by adding a script reference to
the ScriptManager:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Name="MicrosoftAjaxDataService.js" />
</Scripts>
</asp:ScriptManager>
After registering the script reference we can start playing with the data services in our
client side code. In order to use the DataService object we first need to instantiate it.
The DataService constructor gets a serviceUri string as a parameter. After that we can
use the DataService API to perform queries and CRUD operations. The communication
between the data service and its consuming code will be in JSON format (not in ATOM)
and on the client side we will get JSON objects that resemble our server side objects.
Consuming a Data Service from an Ajax Client Example
In the example I’m going to show I have a web form that holds three objects: an Html
button, an Html select object and a span to hold errors. Pressing the button will perform
an asynchronous call through Ajax to the data service and fill the select object with all
the courses I hold on the server side. Lets look at the web form:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Name="MicrosoftAjaxDataService.js" />
</Scripts>
</asp:ScriptManager>
<div>
<select id="ddlCourses">
</select>
<span id="spanError" style="display:none;"></span>
<br />
<input id="btnFillDll" type="button"
value="Fill Drop Down List" onclick="FillDropDown();" />
</div>
</form>
As I wrote this is a simple form. The only relevant thing to understand is the call for
FillDropDown in the onclick event of the button. This call will start the process of
getting the courses from the data service.
After we built our web form lets build our scripts. First, I’ll start with the FillDropDown
function:
function FillDropDown() {
var proxy = new Sys.Data.DataService("/Services/CoursesService.svc");
proxy.query("Courses", OnSuccess, OnFailure);
}
In the function I construct the DataService object with the Uri of the service.
Then, I call the query function of the DataService object to perform the query I
want. The query function gets four parameters (I use only three in the example) -
the query to perform, a callback function on success, a callback function on failure
and a context. My query search all the courses available on the data service.
The code for the callback functions:
function OnSuccess(result, context, operation) {
if (result != null) {
var select = $get("ddlCourses");
var option;
for (i = 0; i < result.length; i++) {
option = new Option(result[i].Title, result[i].CourseID);
select.options.add(option);
}
}
}
function OnFailure(error, context, operation) {
var span = $get("spanError");
span.innerHTML = BuildErrorString(operation);
span.style.display = "inline";
}
function BuildErrorString(operation) {
var sb = new Sys.StringBuilder("Error occurred while performing operation ");
sb.append(operation);
sb.append(".");
return sb.toString();
}
In the OnSuccess, I take the coming result and parse it to the select options.
In the OnFailure, I write in the error span the operation that failed.
Putting all the example together and clicking the button will result in the following
screen:
A last thing to consider – JavaScript can’t make cross-domain calls. This restriction
doesn’t allow you to consume a data service from client side if that data service is
outside your domain.
Summary
Let sum up, in the post I explained how to consume a data service through Ajax client.
This is really cool because instead of building a data-centric web service in order
to get better user experience through Ajax, I now can build a data service to do
this instead. Also, the DataService object include the options to do CRUD operations
through Ajax that I didn’t covered in the post and will be covered in a follow up post.