WCF RESTful Service      Interview Questions         WCF Bindings             WCF Tracing                              

Sunday, October 6, 2013

Consume RESTful service using jQuery in 2 simple steps

jQuery possess the functionality that simplifies the AJAX call for a RESTful service.So, when we think about consuming a RESTful service and then rendering received XML/JSON data in a Web Application, jQuery automatically becomes a good option.

In this WCF tutorial, we are going to call a simple RESTful service using a GET request and then display the received data. As its a continuation of my previous post, so I am not going to create a new RESTful service now. Please go through my last post “5 simple steps to create your first RESTful service”, because I am going to call the same created service.

As in above mentioned article, I created a project using Visual Studio 2010 named as "MyRESTService". So, we will add a new client project to same existing solution.

1. Add client project to same solution.
  • Open the solution MyRESTService in Visual Studio.
  • Add new project to this solution. From File -> New Project. Choose "ASP.NET Web Application" template.
  • Name the project as "MyRESTClient".
  • Choose "Add to Solution" against solution dropdown and press "OK" button.

  • Now, you can see two projects under a solution. MyRESTService project and newly added MyRESTClient project.


2. We will call that existing service using jQuery's Ajax function in our MyRESTClient project.

  • Add a new ASP.NET WebForm page to client project and name it as "MyRESTServiceCaller.aspx".

  • Add reference to jQuery Library from Scripts.
          <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

  • Add a table to HTML body to contain contents rendered from RESTful service.
         <table border='1' id="products">
            <!-- Make a Header Row -->
            <tr>
                <td><b>Product Id</b></td>
                <td><b>Name</b></td>
                <td><b>Price</b></td>
                <td><b>Category</b></td>
            </tr>
        </table>

  • Add following jQuery code snippets in script tag for calling service and rendering returned XML data.
        <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost/MyRESTService/ProductRESTService.svc/GetProductList/",
                dataType: "xml",
                success: function (xml) {                  
                    $(xml).find('Product').each(function () {
                        var id = $(this).find('ProductId').text();
                        var name = $(this).find('Name').text();
                        var price = $(this).find('Price').text();
                        var category = $(this).find('CategoryName').text();

                        $('<tr><td>' + id + '</td><td>' + name + '</td><td>' + price + '</td><td>' +
                                     category + '</td></tr>').appendTo('#products');                      
                    });
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        });
      </script>

jQuery Ajax function basically performs an asynchronous HTTP request with parameters, I mentioned in bold.
  • type is the request method. Possible values can be GET, POST, DELETE, PUT etc. Here we are making a "GET" request.
  • url represents a resource on web. In our case we are providing service URL.
  • datatype specifies the type of data returned from server i.e. xml, text, html, script, json, jsonp. 
  • success is the callback function that will be invoked when request gets completed.
  • error is also a callback function that will be called in case of request failure.

When you run the application, it will call service, fetch data and display in a tabular format as shown in the following figure.


Now, hopefully, you can create a simple WCF RESTful service and consume it using jQuery as well. My next article will contain all CRUD (Create, Read, Update, Delete) operations for RESTful service.

Be social and share with others via:


Other Related Tutorials:
.NET Jobs from Indeed

By Imran Abdul Ghani
Software Developer (Senior)
United Arab Emirates
Imran Abdul Ghani is working as Software Developer(Senior) with extensive knowledge in Web development technologies especially C#, ASP.NET, MVC, WCF, Web API, ADO.NET Entity Framework, jQuery etc. He has several years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET (MCSD.NET) since 2005. You can reach his blogging at www.webdevelopmenthelp.net & www.topwcftutorials.net.

6 comments:

  1. Very nice simple tutorial! Thanks Imran!

    ReplyDelete
  2. Hello,

    Like your tutorial.
    Wonder if this is going to work for remote hosts and all the browsers?

    Regards,
    Bojidar

    ReplyDelete
  3. Hi Bojidar,
    It will work for remote hosts as well. As far as all browsers concern, I checked it with IE and chrome and it worked. But in any case, you can modify the output to meet your need. For example, you can go with divs instead of table (if required).

    ReplyDelete
  4. nice..
    can you please provide an example for POST request

    ReplyDelete