Gil Fink on .Net

Fink about IT

News

Microsoft MVP

MCPD Enterprise Applications Developer

Gil Fink

My Linkedin profile

Locations of visitors to this page

Creative Commons License

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.
© Copyright 2010 Gil Fink

Blog Roll

Hebrew Articles

Index Pages

My OSS Projects

Calling a WCF Data Service From jQuery

Calling a WCF Data Service From jQuery

I’m working on a lecture Calling a WCF Data Service from jQuery
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:
getJSON result

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. 

Posted: Jul 04 2010, 08:15 AM by Gil Fink | with 5 comment(s) |
תגים:, , , ,

Comments

DotNetKicks.com said:

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# July 4, 2010 8:18 AM

Twitter Trackbacks for Calling a WCF Data Service From jQuery - Gil Fink on .Net [microsoft.co.il] on Topsy.com said:

Pingback from  Twitter Trackbacks for                 Calling a WCF Data Service From jQuery - Gil Fink on .Net         [microsoft.co.il]        on Topsy.com

# July 4, 2010 11:34 PM

serge said:

Great post. However there is a small bug in the code.

$.each(data.d, function (i, item)

should be

$.each(data.d.results, function (i, item)

# July 10, 2010 10:11 PM

Gil Fink said:

@serge,

Thanks for the comment but I'm only publishing working code and the published code is working at my enviroment.

# July 11, 2010 7:56 AM

WebDevVote.com said:

You are voted (great) - Trackback from WebDevVote.com

# August 12, 2010 6:55 PM
Leave a Comment

(required) 

(required) 

(optional)

(required) 


Enter the numbers above: