Making a JSONP Call to a WCF Data Service using datajs

April 24, 2011

Making a JSONP Call to a WCF Data Service using datajs

During MIX11 I attended a very interesting session about datajs which was Making a JSONP Call for a WCF Data Service using datajspresented by Asad Khan and Marcelo Lopez Ruiz. As I promised in my previous post, in this post I’ll show you how to make a JSONP call to a WCF Data Service using datajs library.

A Little About datajs

datajs is a very promising JavaScript library which is currently being built by Microsoft as an open source in CodePlex. The library as described in its CodePlex site is “a new cross-browser JavaScript library that enables data-centric web applications by leveraging modern protocols such as JSON and OData and HTML5-enabled browser features. It’s designed to be small, fast and easy to use”. Some of it current features are the ability to communicate with OData services and APIs to work with local data through browser features such as Web Storage (and in the future IndexedDB). For further reading about datajs go to the its documentation or download the library and play with it (there is also a NuGet package for it).

Making JSONP Call using datajs

Here is the implementation of the same JSONP call functionality from the previous post but using datajs:

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>JSONP Call using datajs</title>
    <script src="Scripts/datajs-0.0.3.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <output id="result">
    </output>
    </form>
    <script type="text/javascript">       
        OData.defaultHttpClient.enableJsonpCallback = true;
        OData.read("http://localhost:23330/SchoolDataService.svc/Courses", 
            function (data, request) {
                var output = document.getElementById('result');
                for (var i = 0; i < data.results.length; i++) {
                    var div = document.createElement('div');
                    div.innerHTML = data.results[i].Title;
                    output.appendChild(div);
                }
            });               
        
    </script>
</body>
</html>

A few things to notice in the example:

  • I add the script to datajs which exists in my web application project under the Scripts directory.
  • You need to enable JSONP through the OData.defaultHttpClient.enableJsonpCallback which is disabled by default.
  • Use the OData.Read function to make the call to the service (no need to add the format or callback query parameters like I did in the previous post since they are added automatically).

Pay attention that in a real world application you would probably like to disable JsonpCallback after you make the call.

Summary

datajs is still in Alpha version and it is only in its starting point. It tries to provide a common solution around the data problem in the client side development. I expect it to grow and to supply more capabilities in the future. In this post I showed how to use it in order to make a JSONP call to a JSONP enabled WCF Data Service.

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>

2 comments

  1. yousef sarkhoshApril 26, 2011 ב 19:36

    I have 3 table, tblBook and tblAuthor and tblAthourhasBook which links Author to book.I can search the bookname and get information of it but don’t know how to match the founded book with author.I’m working on Entites in Sillverlight.the code for finding book:
    public IEnumerable SearchBook(string searchString)
    {
    return ObjectContext.tblBooks.Cast
    ()
    .Where(b => b.BookTitle.Contains(searchString))
    .ToList();
    }
    I dont know how to say get the author information of found book.which can be many author to one book.

    Reply
  2. Gil FinkApril 27, 2011 ב 20:58

    @yousef sarkhosh,

    Thanks for the comment but its content isn’t connected to the post’s content.
    Even though you can try something like the following code for example:
    public IQueryable SearchBook(string searchString)
    {
    return ObjectContext.tblBooks.Include(“tblAthourhasBook.tblAuthor”)
    .Where(b => b.BookTitle.Contains(searchString))
    .ToList();
    }

    This code will load all the tblAthourhasBook and tblAuthor entities that relate to the chosen books. Pay attention that while doing eager loading if the tables have a lot of content the query might start to quirk.
    I hope it will help you.

    Reply