Click here to Skip to main content
13,863,642 members
Click here to Skip to main content
Add your own
alternative version


10 bookmarked
Posted 10 Mar 2014
Licenced CPOL

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

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


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


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.

    [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" },
        [WebGet(ResponseFormat = WebMessageFormat.Json)]
        public List<Employee> GetEmployees()
            return employees.ToList();
        [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"?>
        <compilation debug="true" targetFramework="4.0" />
            <behavior name="webHttpBehavior">
              <webHttp />
            <binding name="jsonPCrossDomainBinding" crossDomainScriptAccessEnabled="true" />
          <service name="WcfDemo.EmployeeService">
        <modules runAllManagedModulesForAllRequests="true"/>

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=""></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
                        function (employees) {
                            var count = 0;
                            $.each(employees, function () {
                                    .append($('<li />')
                                    .text(this.ID + " - " + this.Name + " - " + this.Role));
                        if (count > 0) {
            $('#btnSearchEmployee').click(function () {
                //Show loading                
                $("#loading").html('Loading Employee Details...');
                // Get JsonP data from WCF
                var employeeID = parseInt($("#searchText").val());
                { id: employeeID }, 
                function (employee) {
                        .text(employee.Name + " - " + employee.Role);
  3. Add following HTML
     <div><a href="" target="_blank" title="" style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; white-space: normal;">x
            Consuming JsonP from WCF using jQuery</h2>
        <input type="button" id="btnEmployees" value="Show All Employees" />
        <div id="loading">
        <ul id="employeesList">
        <div id="search">
            <input type="text" id="searchText" />
            <input type="button" id="btnSearchEmployee" value="Search Employee" />
            <br />
            <div id="employee">



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


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.


You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
jaguar8423-Jul-14 7:20
memberjaguar8423-Jul-14 7:20 
GeneralMy vote of 5 Pin
Thomas ktg11-Mar-14 0:31
memberThomas ktg11-Mar-14 0:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 22 Jul 2014
Article Copyright 2014 by Rocky R. Fernandes
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid