CODEWITHSUNDEEP
jquerywcfjsonjsonp
moikey
moikey

Reputation: 353

Accessing JSONP from WCF via JQuery

I have been having some issues retrieving JSON data from a WCF service application I have created. I have a simple WCF service which returns the following JSON:

[{"RoomId":1,"RoomName":"Big Room"},{"RoomId":2,"RoomName":"Medium Room"},{"RoomId":3,"RoomName":"Small Room"}]

I am trying to access this data from a web application using JQuery. I have tried various JQuery statements to try and retrieve the data but nothing appears. The following is my most current attempt:

$(function () {
    $.getJSON('http://localhost:6188/RoomBookingService.svc/GetRooms?callback=Rooms', function (data) {
        alert(data);
    });

The following is my WCF service application code:

[ServiceContract]
public interface IRoomBookingService
{
    [OperationContract]
    [WebGet(BodyStyle = WebMessageBodyStyle.Bare,ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetRooms")]

    Room[] GetRooms();

Config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web> 
  <system.serviceModel>
    <services>
      <service name="RoomBookingServices.RoomBookingService" behaviorConfiguration="RoomBookingServiceBehaviour">
        <endpoint address="" binding="webHttpBinding" bindingConfiguration="webHttpBindingWithJsonP" contract="RoomBookingServices.IRoomBookingService" behaviorConfiguration="webHttpBehavior">
        </endpoint>
      </service>
    </services>
    <behaviors>
      <serviceBehaviors>
        <behavior name="RoomBookingServiceBehaviour">
          <!-- To avoid disclosing metadata information, set the value below to false and remove the metadata endpoint above before deployment -->
          <serviceMetadata httpGetEnabled="true"/>
          <!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to avoid disclosing exception information -->
          <serviceDebug includeExceptionDetailInFaults="true"/>
        </behavior>
      </serviceBehaviors>      
      <endpointBehaviors>
        <behavior name="webHttpBehavior">
         <webHttp/>
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <bindings>
      <webHttpBinding>
        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>  
    <!--<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />-->
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

All I need the JQuery to do is return the JSON and display it in a div tag or something, as later it will be formatted. Any help would be great.

Thanks in advance.

Upvotes: 0

Views: 1279

Answers (1)

Joe Alfano
Joe Alfano

Reputation: 10299

I belive that in typical usages of jsonp calls with WCF, the callback parameter is assigned as a question mark. 

$(function () {
    $.getJSON('http://localhost:6188/RoomBookingService.svc/GetRooms?callback=?', function (data) {
       alert(data);
});

Then the jQuery getJSON method will replace the question mark with a dynamically-generated javascript function to handle the JSONP callback

See this article for further details.

Upvotes: 2

Related Questions