jQuery $.ajax call to WCF service returns 400 Bad Request

Question

(Update at end)

I'm working on an idea using unfamiliar technology. I've written a few WCF services, but I've never done any advanced configuration. This is my first dive into jQuery. The premise is I create a WCF service to get branch information, to be retrieved by jQuery.

My first search yielded this page: http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx#2 which I'm using as the base of my code. I initially started off as a cross-site setup, which I got rid of to see if I could just get the thing working. I've searched stack overflow and none of the posts resolve my 400 Bad Request issue.

Code from my web.config:

<system.serviceModel>
<behaviors>
  <serviceBehaviors>
    <behavior name="GeoDataBehavior">
      <serviceMetadata httpGetEnabled="true" />
      <serviceDebug includeExceptionDetailInFaults="true" />
    </behavior>
    <behavior name="">
      <serviceMetadata httpGetEnabled="true" />
    </behavior>
  </serviceBehaviors>
  <endpointBehaviors>
    <behavior name="GDEPBehavior">
      <webHttp />
    </behavior>
  </endpointBehaviors>
</behaviors>
<bindings>
  <webHttpBinding>
    <binding name="GDBinding" crossDomainScriptAccessEnabled="true"/>
  </webHttpBinding>
</bindings>
<services>
  <service behaviorConfiguration="GeoDataBehavior" name="GeoDataService">
    <endpoint address="" 
              binding="webHttpBinding" contract="IGeoDataService"
               behaviorConfiguration="GDEPBehavior"/>
    <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
  </service>
</services>

Code from my interface:

[ServiceContract]
public interface IGeoDataService
{
    [OperationContract]
    [WebInvoke(Method = "POST",
        BodyStyle = WebMessageBodyStyle.Wrapped,
        ResponseFormat = WebMessageFormat.Json)]
    List<BranchData> GetBranches();
}


// Use a data contract as illustrated in the sample below to add composite types to service operations.
[DataContract]
public class BranchData
{
    [DataMember]
    public string BranchNumber { get; set; }

    [DataMember]
    public string BranchName { get; set; }

    [DataMember]
    public string StreetAddress { get; set; }

    [DataMember]
    public string City { get; set; }

    [DataMember]
    public string Zip { get; set; }

    [DataMember]
    public string State { get; set; }

    [DataMember]
    public string Phone { get; set; }

    [DataMember]
    public string County { get; set; }
}

jQuery script:

 <script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.js">
</script>
<script type="text/javascript" language="javascript">
    /* help from http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx
    */
    var varType;
    var varUrl;
    var varData;
    var varContentType;
    var varDataType;
    var varProcessData;

    function CallService() {
        // Thank you Bing: http://blueonionsoftware.com/blog.aspx?p=03aff202-4198-4606-b9d6-686fd13697ee
        jQuery.support.cors = true;


        $.ajax({
            type: varType,
            url: varUrl,
            data: null,
            crossDomain: true,
            contentType: varContentType,
            dataType: varDataType,
            processdata: varProcessData,
            success: function (msg) {
                ServiceSucceeded(msg);
            },
            error: ServiceFailed
        });

        /*
        $.getJSON(varUrl, null, function (msg) {
            ServiceSucceeded(msg);
        });
        */
    }

    function GetBranchDataJson() {
        varType = "POST";
        varUrl = "GeoDataService.svc/GetBranches";
        varData = "";
        varContentType = "application/json; charset=utf-8";
        varDataType = "json";
        varProcessData = true;
        CallService();
    }

    function ServiceSucceeded(result) {
        var ddlResult = document.getElementById("ddlResult");
        for (var j = ddlResult.options.length - 1; j >= 0; j--) { ddlResult.remove(j); }

        for (var i = 0; i < result.length; i++) {
            var opt = document.createElement("option");
            opt.text = result[i].BranchName;
            ddlResult.options.add(opt);
        }
    }

    function ServiceFailed(jqXHR, errorType, errorThrown) {
        alert('error!\n' + jqXHR + '\n' + errorType + '\n' + errorThrown);
    }

</script>
<input name="WTF" type="button" onclick="GetBranchDataJson()" />

You'll note I'm using jQuery 1.6.1, not 1.3 from the tutorial. The tutorial runs fine on my box and does everything as expected. Unfortunately, my code does not. I appreciate any help y'all can provide.

Oh, and here's a copy of the request from Fiddler:

POST http://localhost:16062/GeoDataService.svc/GetBranches HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
Content-Type: application/json; charset=utf-8
Referer: http://localhost:16062/Default.aspx
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Host: localhost:16062
Content-Length: 0
Connection: Keep-Alive
Pragma: no-cache

Update: Ok, I passed "{}" as the Data query (apparently this is the right way to pass nothing to a method that does not take parameters), and I now get Unsupported Media Type. And the trace exception is: System.ServiceModel.ProtocolException: Content Type application/json; charset=utf-8 was sent to a service expecting text/xml; charset=utf-8.

Answer 1

The call by itself doesn't seem to have any problems - you should try to enable tracing to see why WCF is considering the incoming request to be bad. I tried a similar code as the one you have (see below) and it worked just fine. Also, since the request is coming from the same domain (localhost:16062) as the service, you don't have any cross-domain problems.

Update: solution based on the comment thread on the question

The "name" attribute of the <service> element in the web.config must match the fully-qualified name (i.e., the namespace + the name) of the service class (i.e., the same value used in the .svc file). Otherwise you'll get a default endpoint added for your service which may or may not be what you want - by default you get a BasicHttpBinding endpoint, which is not what you wanted in your case.

This problem is un unfortunate side effect of a feature added in .NET Framework 4.0: Simplified Configuration. Until .NET 3.5, every service needed to have an entry on web.config to configure it, and the config files for even the simplest applications (i.e., hello world) were big. So what happened is that, since 4.0, if WCF doesn't find a service element with a name which matches the fully-qualified name of the service, it will happily think that you want to use the default configuration. That's why it happens to "work" with the WcfTestClient at first.

public class StackOverflow_6526659
{
    [ServiceContract]
    public interface IGeoDataService
    {
        [OperationContract]
        [WebInvoke(Method = "POST",
            BodyStyle = WebMessageBodyStyle.Wrapped,
            ResponseFormat = WebMessageFormat.Json)]
        List<BranchData> GetBranches();
    }

    public class Service : IGeoDataService
    {
        public List<BranchData> GetBranches()
        {
            return new List<BranchData>();
        }
    }

    // Use a data contract as illustrated in the sample below to add composite types to service operations.
    [DataContract]
    public class BranchData
    {
        [DataMember]
        public string BranchNumber { get; set; }

        [DataMember]
        public string BranchName { get; set; }

        [DataMember]
        public string StreetAddress { get; set; }

        [DataMember]
        public string City { get; set; }

        [DataMember]
        public string Zip { get; set; }

        [DataMember]
        public string State { get; set; }

        [DataMember]
        public string Phone { get; set; }

        [DataMember]
        public string County { get; set; }
    }

    public static void Test()
    {
        string baseAddress = "http://" + Environment.MachineName + ":8000/Service";
        ServiceHost host = new ServiceHost(typeof(Service), new Uri(baseAddress));
        WebHttpBinding binding = new WebHttpBinding { CrossDomainScriptAccessEnabled = true };
        WebHttpBehavior behavior = new WebHttpBehavior();
        host.AddServiceEndpoint(typeof(IGeoDataService), binding, "").Behaviors.Add(behavior);
        host.Open();
        Console.WriteLine("Host opened");

        HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create(baseAddress + "/GetBranches");
        req.Method = "POST";
        req.GetRequestStream().Close();
        HttpWebResponse resp = (HttpWebResponse)req.GetResponse();
        Console.WriteLine("HTTP/{0} {1} {2}", resp.ProtocolVersion, (int)resp.StatusCode, resp.StatusDescription);
        foreach (var header in resp.Headers.AllKeys)
        {
            Console.WriteLine("{0}: {1}", header, resp.Headers[header]);
        }
        if (resp.ContentLength > 0)
        {
            Console.WriteLine(new StreamReader(resp.GetResponseStream()).ReadToEnd());
        }

        Console.Write("Press ENTER to close the host");
        Console.ReadLine();
        host.Close();
    }
}