Make a WCF Service Accept JSON Data from jQuery.AJAX()

Question

I have been searching around for hours and trying different things to get this to work. I have tried so many articles on stackoverflow and either I am too stupid to get things working or I have some unique and odd configuration that is preventing me from experiencing joy.

I create the WCF service outlined by this tutorial:

http://www.codeproject.com/Articles/97204/Implementing-a-Basic-Hello-World-WCF-Service

It is super basic and has one method and all I want it to do is allow me to consume it with jQuery.AJAX() using json.

I have it hosted in IIS and it works. I can access the WSDL without issues.

I try to consume it with the following code:

$.ajax({
    dataType: 'json',
    type: 'POST',
    contentType: "application/json",
    url: "//localhost:546/HelloWorldService.svc/GetMessage",
    data: {
        name: "Joe"
    }
    }).done(function(msg){
        console.log(msg);
        $("#result").append(msg);
});

I always get errors. Based on what I have tried I get 500 errors, 402 errors, errors about incorrect content... All the errors.

I have tried implementing solutions from the following articles. They range from having me change the web.config endpoints (I know I HAVE to change them but nothing I have tried so far works in terms of adding a JSON endpoint) to adding things like

[WebInvoke(Method = "POST", UriTemplate = "json/PostSalesOrderData", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]

to the interface.

Here are some of the articles I have looked at and tried to smash into my solution to get it working without much success.

Javascript JSON and WCF webservice on Phonegap Android

HTTP/1.1 415 Cannot process the message because the content type 'application/json; charset=utf-8' was not the expected type 'text/xml; charset=utf-8'

WCF Services with JSON, JSONP and SOAP End Points

Two endpoint (soap ,json) and one service method

WCF REST Service not accepting JSON in .Net 4

I also went through this tutorial and tried to use what he had to say to get my solution working. Still nothing!

http://www.primordialcode.com/blog/post/passing-json-serialized-objects-wcf-service-jquery

This is how my interface looks

[ServiceContract]
public interface IHelloWorldService
{
    [OperationContract]
    [WebInvoke(UriTemplate = "GetMessage", Method = "POST",
        BodyStyle = WebMessageBodyStyle.WrappedRequest,
        RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json)]
    String GetMessage(String name);
}

Can anyone help me experience joy?

Thanks in advance for even looking at my question. If you need more information or I have not provided enough let me know so I can help you help me!

I must be missing something stupid... I know it is not this hard.

EDIT:

Working Web.Config

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="false" targetFramework="4.0" />
  </system.web>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
  <system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="WebHTTPEndpointBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="MyServiceTypeBehaviors">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <bindings>
      <webHttpBinding>
        <binding name="MyWebServiceBinding" maxBufferSize="2147483647" maxReceivedMessageSize="2147483647"/>
      </webHttpBinding>
    </bindings>
    <services>
      <service name="MyWCFServices.HelloWorldService"
       behaviorConfiguration="MyServiceTypeBehaviors">
        <endpoint address="" binding="webHttpBinding" bindingConfiguration="MyWebServiceBinding" behaviorConfiguration="WebHTTPEndpointBehavior"
          contract="MyWCFServices.IHelloWorldService"/>
        <endpoint contract="IMetadataExchange"
          binding="mexHttpBinding" address="mex"/>
      </service>
    </services>
  </system.serviceModel>
</configuration>

Solution 1

change this line

data: {
    name: "Joe"
}

to

data: JSON.stringify({name: 'Joe'});

EDIT:

Do this to your service. Add WebHttp binding in the config.

 <behaviors>
  <endpointBehaviors>
    <behavior>
      <webHttp />
    </behavior>
  </endpointBehaviors>
</behaviors>

Hope you know where to add this. If not let me know and I will try to provide some inputs.

EDIT:

Following up on my comment,

<behavior name="myBehaviorName">
      <webHttp />
</behavior>

<service name="MyWCFServices.HelloWorldService"
         behaviorConfiguration="MyServiceTypeBehaviors">
    <endpoint address="" binding="webHttpBinding"
         contract="MyWCFServices.IHelloWorldService" behaviorConfiguration="myBehaviorName"/>
    <endpoint contract="IMetadataExchange"
       binding="mexHttpBinding" address="mex"/>
  </service>

Solution 2

I'm coming in late, but you still have some issues you'll need to resolve to get it to work. You need to change the binding for your endpoint to support the HTTP operations.

<bindings>
    <webHttpBinding>
        <binding name="MyWebServiceBinding" maxBufferSize="2147483647" maxReceivedMessageSize="2147483647"/>
    </webHttpBinding>
</bindings>
<behaviors>
    <endpointBehaviors>
        <behavior name="WebHTTPEndpointBehavior">
          <webHttp helpEnabled="true"/>
        </behavior>
    </endpointBehaviors>
</behaviors>
<services>
  <service name="MyWCFServices.HelloWorldService"
         behaviorConfiguration="MyServiceTypeBehaviors">
    <endpoint address="" binding="webHttpBinding" bindingConfiguration="MyWebServiceBinding" behaviorConfiguration="WebHTTPEndpointBehavior"
         contract="MyWCFServices.IHelloWorldService"/>
    <endpoint contract="IMetadataExchange"
       binding="mexHttpBinding" address="mex"/>
  </service>
</services>

The maxBufferSize and maxReceivedMessageSize is optional.

EDIT: Oops, forgot to add your behaviorConfiguration in.