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.
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.
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.
3) Add following HTML
You can find the working code at Consuming JsonP from a WCF Service ( C# .Net ) using jQuery across different Domains
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
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="//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>
<div>
<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).aspxYou can find the working code at Consuming JsonP from a WCF Service ( C# .Net ) using jQuery across different Domains
