Click here to Skip to main content
Click here to Skip to main content

Calling a WCF Data Service From jQuery

, 18 Jul 2010
Rate this:
Please Sign up or sign in to vote.
I want to show is how easy and simple it is to consume a WCF Data Service (OData feed) with the jQuery library.

Introduction

I'm working on a lecture about OData which I 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 this 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 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 it goes to a WCF Data Service endpoint that is called SchoolService.svc and retrieves 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> <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 a 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.


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 Israel
Gil Fink is an expert in web development and Microsoft web and data platforms. He works as a senior consultant and architect at Sela Group. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also a co-author of several Microsoft Official Courses and training kits and the founder of Front-End.IL meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+

Comments and Discussions

 
Questionwindows authentication Pinmemberpepepaco3-Sep-10 7:29 
AnswerRe: windows authentication PinmemberGil Fink4-Sep-10 19:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 18 Jul 2010
Article Copyright 2010 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid