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

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

, 22 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Accessing Json Data across different domain using JsonP to get arround Security warning

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.

To know about JsonP, please read followings

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.
    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.

    [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:
    <?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.

     <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
    <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
     <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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rocky R. Fernandes
Software Developer (Senior) 3MD Tech
United States United States
Rocky Fernandes has over 11 years of experience in Software Industry mostly developing Web Applications. Other than having vast experience in various Microsoft Technologies like SharePoint, ASP.Net, C#, VB.Net, Silverlight, WCF, MVC, Web API, SQL Server, ADO.Net, ADOMD.Net, LINQ, Entity Framework, Exchange Web Service(EWS) API, he also has vast experience in Client Side Scripting like JavaScript, jQuery, JSON, JSONP, CSS and HTML5. He is very much passionate in programming and enjoys doing it. In the academic side he holds a BE Degree in Computer Science & Engineering. In the certification side he holds certifications in Sharepoint 2010, SharePoint 2013, ASP.Net & SQL Server.
 
In most of the free time, he will be spending in technical activities like researching solutions, reading technical articles and learning new stuff. He believes that following Best Practices and Coding standard is a way to go for producing an efficient, quality & satisfactory application.
 
Homepage: http://www.smartsolutionshub.com/
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberrichard_x8623-Jul-14 6:20 
GeneralMy vote of 5 PinmemberThomas ktg10-Mar-14 23:31 

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
Web03 | 2.8.141015.1 | Last Updated 22 Jul 2014
Article Copyright 2014 by Rocky R. Fernandes
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid