In previous part of this WCF Tutorial, we created a WCF RESTful service step by step and make it available to be consumed by a client. Here in this part, we will write and understand code to consume the RESTful web service using jQuery. Same like previous part, I will write complete jQuery code for all CRUD operations instead of leaving something for the reader. One of the advantages of using REST based service is that it can be consumed by a wide range of client applications.
Following is the jQuery code for each CRUD operation call against WCF RESTful service created in part 1 of this WCF Application Tutorial series. For the purpose of implementation, I have created a new ASP.NET project to existing solution and add an ASP.NET Web Form to make calls. But you can have your own choice of client implementation using following jQuery code.
Note: For this implementation, my focus is to provide you with jQuery code for calling a WCF RESTful Service for all CRUD (Create | Retrieve | Update | Delete) operations. So to avoid UI complications, I am preparing the data object for CREATE and UPDATE operations inside the code instead of using User Interface form. You can implement that in your own way and according to your need but jQuery AJAX call for all CRUD operations to WCF REST based Service will remain same.
In order to display the data returned from REST WCF Service, I have added HTML table to body of the page.
<table border='1' id="books">
<!-- Make a Header Row -->
Here is the function that make a call to our RESTful web service to fetch all books.
jQuery asynchronous HTTP Request is made with type as “GET”. It represents HTTP verb being used to make a call. We have used same verb on WebInvoke attribute while defining service contract for GetBookList service method.
Second important thing is URL”http://localhost/RESTServiceCRUD/BookService.svc/Books/”.
In order to understand it, we can break up above URL into two parts as:
- http://localhost/RESTServiceCRUD/BookService.svc is simple URL to our service file (.svc).
- /Books/ is what we define as UriTemplate in WebInvoke attribute of that particular method.
“GetBookById” is another way of consuming RESTful service and getting a record by bookId.
In this case the URL is “http://localhost/RESTServiceCRUD/BookService.svc/BookById/2″. UriTemplate is “BookById” for service method “GetBookById” and “2” is the parameter for bookId.
Implementation for adding a new book or updating an existing record is as follows:
For Create and Update, we create a JSON object and pass to jQuery Ajax as data parameter and type is “PUT” as Http verb.
Implementation for deleting a book. In following example we are going to delete a book with Id = 2.
For this WCF Tutorial, I have provided the complete code and hopefully it will be very easy for readers to understand and implement CRUD operations for WCF RESTful service.
Top 10 Interview Questions and Answers Series:
- Top 10 WCF Interview Questions
- Comprehensive Series of WCF Interview Questions
- Top 10 HTML5 Interview Questions
- Top 10 ASP.NET Interview Questions
- Comprehensive Series of ASP.NET Interview Questions
- Top 10 ASP.NET MVC Interview Questions
- Top 10 ASP.NET Web API Interview Questions
- Top 10 ASP.NET AJAX Interview Questions