Consuming JsonP from a WCF Service ( C# .Net ) using jQuery across different Domains

Introduction

This article explains how JsonP can be used to access data across different Domain and thus get rid of annoying message."This Page is accessing information that is not under its control. This poses a security risk. Do you want to continue?". In this article, I will explain in details how to create a WCF JsonP Service using C# .Net and then how to consume this service from a client side jQuery script in HTML.

Though JsonP is required for old browsers, I would strongly recommend using CORS in new browsers. Following references will provide you the required resource for implementing CORS.

• http://www.codeguru.com/csharp/.net/net_asp/using-cross-origin-resource-sharing-cors-in-asp.net-web-api.html
• http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
• http://code.msdn.microsoft.com/Implementing-CORS-support-c1f9cd4b
• http://code.msdn.microsoft.com/Implementing-CORS-support-418970ee

To know about JsonP, please read followings

• http://en.wikipedia.org/wiki/JSONP
• http://json-p.org/

Background

We get an annoying message."This Page is accessing information that is not under its control. This poses a security risk. Do you want to continue?" when accessing JSON data from a different domain(also called as Cross Domain) . Though we can resolve this by changing settings in IE or other browser, this may not be the feasible solution

Using the code

Server Side Code : WCF Service Application

1. Create a WCF Service Application (In Visual Studio 2010)
2. Right click on the project and Add a Class. Name it Employee and add following properties to employee class as shown below.
   C++

   public class Employee
   {
       public int ID { get; set; }
       public string Name { get; set; }
       public string Role { get; set; }
   }

3. Right click on the project and Add a new item of type WCF Service. Name it EmployeeService.svc

   Note: As per MSDN article we have to decorate/annotate the class with [JavascriptCallbackBehavior(UrlParameterName = "callback")]

   But I was able to make it work even without this tag.

   C++

   [ServiceContract]
   [JavascriptCallbackBehavior(UrlParameterName = "callback")]
   public class EmployeeService
   {
       private readonly Employee[] employees = 
       {     
           new Employee { ID = 1, Name = "Mathew", Role = "HR" },
           new Employee { ID = 2, Name = "Mark", Role = "Manager" },
           new Employee { ID = 3, Name = "John", Role = "Marketing" },
           new Employee { ID = 4, Name = "Luke", Role = "Developer" },
       };
    
       [OperationContract]
       [WebGet(ResponseFormat = WebMessageFormat.Json)]
       public List<Employee> GetEmployees()
       {
               
           return employees.ToList();
       }
    
    
       [OperationContract]
       [WebGet(ResponseFormat = WebMessageFormat.Json)]
       public Employee GetEmployee(int id)
       {
           return employees.FirstOrDefault(p => p.ID == id);
       }       
          
   }

4. Modify the web.Config as below:
   C++

   <?xml version="1.0"?>
   <configuration>
     <system.web>
       <compilation debug="true" targetFramework="4.0" />
     </system.web>
     <system.serviceModel>
       <behaviors>
         <endpointBehaviors>
           <behavior name="webHttpBehavior">
             <webHttp />
           </behavior>
         </endpointBehaviors>
       </behaviors>
       <bindings>
         <webHttpBinding>
           <binding name="jsonPCrossDomainBinding" crossDomainScriptAccessEnabled="true" />
         </webHttpBinding>
       </bindings>
       <services>
         <service name="WcfDemo.EmployeeService">
           <endpoint  
               contract="WcfDemo.EmployeeService"
               address="" 
               binding="webHttpBinding"
               bindingConfiguration="jsonPCrossDomainBinding"
               behaviorConfiguration="webHttpBehavior"/>
         </service>
       </services>
     </system.serviceModel>
     <system.webServer>
       <modules runAllManagedModulesForAllRequests="true"/>
     </system.webServer>  
   </configuration>

Client Side HTML Code

1. Add a new Asp.Net web form of HTML page

   Add a jQuery reference from CDNA or use a local copy of Query.

   C++

   <script src="http://www.codeproject.com/ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   

2. Add following Script to your HTML page
   C++

   <script type="text/javascript">
       $(document).ready(function () {
    
           $('#btnEmployees').click(function () {
               //Show loading
               var $employeesList = $('#employeesList');
               $("#loading").html('Loading Employees ...');
    
               // Get JsonP data from WCF
               $.getJSON('http://localhost:14900/EmployeeService.svc/GetEmployees?callback=?',
                       null, 
                       function (employees) {
                           $("#loading").empty();
                           $employeesList.empty();
                           var count = 0;
                           $.each(employees, function () {
                               $employeesList
                                   .append($('<li />')
                                   .text(this.ID + " - " + this.Name + " - " + this.Role));
                               count++;
                           });
    
                       if (count > 0) {
                           $("#search").show();
                       }
                });
           });
    
           $('#btnSearchEmployee').click(function () {
               //Show loading                
               $("#loading").html('Loading Employee Details...');
    
               // Get JsonP data from WCF
               var employeeID = parseInt($("#searchText").val());
               $.getJSON('http://localhost:14900/EmployeeService.svc/GetEmployee?callback=?',
               { id: employeeID }, 
               function (employee) {
                   $("#loading").empty();
                   $('#employee')
                       .empty()
                       .text(employee.Name + " - " + employee.Role);
               });
           });
       });
    
   </script>

3. Add following HTML
   C++

    <div><a href="http://msdn.microsoft.com/en-us/library/ee816916(v=vs.110).aspx" target="_blank" title="http://msdn.microsoft.com/en-us/library/ee816916(v=vs.110).aspx" style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: normal;">x
       <h2>
           Consuming JsonP from WCF using jQuery</h2>
       <input type="button" id="btnEmployees" value="Show All Employees" />
       <div id="loading">
       </div>
       <ul id="employeesList">
       </ul>
       <div id="search">
           <input type="text" id="searchText" />
           <input type="button" id="btnSearchEmployee" value="Search Employee" />
           <br />
           <div id="employee">
           </div>
       </div>
   </div>

References

http://msdn.microsoft.com/en-us/library/ee816916(v=vs.110).aspx