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

Datetime:2016-08-22 23:50:59         Topic: WCF  jQuery  JSONP          Share        Original >>
Here to See The Original Article!!!


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.

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 perMSDN articlewe 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">



Put your ads here, just $200 per month.