Calling an ASP.NET 4.0 WCF service from jQuery yields 400 Bad Request

Question

I know it seems this question has been posted many times, but I've read nearly all of them (an most of the tutorials on the internet), and I still can't grasp what I'm doing wrong.

I tried to implement in a web site we're developing a WCF web service to be consumed by a jQuery script, but I keep getting 400 Bad Request when doing the AJAX request, and I'm starting to loose hope.

Please note that I'm new to WCF, and I've formed myself only through online tutorials, so it's entirely possible I overlook or majorly screwed up something.

Questions I tried but didn't help:

External resources I read to no avail:

I also tried creating a new solution, with only a page and the service, to rule out interferences, but I still have the same problem. Here you can find the code:

IService.cs

namespace WebService
{
    using System;
    using System.ServiceModel;
    using System.ServiceModel.Web;

    [ServiceContract(Name = "Service", Namespace = "WebService")]
    public interface IService
    {
        [OperationContract]
        [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped, Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
        String Test();
    }
}

Service.svc.cs

namespace WebService
{
    using System;

    public class Service : IService
    {
        public String Test()
        {
            return "Hello, world.";
        }
    }
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebService.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#doAjax").click(function (event) {
                    event.preventDefault();
                    jQuery.ajax({
                        contentType: "application/json"
                        , dataType: "text"
                        , error: function (jqXHR, textStatus, errorThrown) {
                            console.group("AJAX error:");
                            console.debug(jqXHR);
                            console.debug(textStatus);
                            console.groupEnd();
                        }
                        , processData: false
                        , success: function (data, textStatus, jqXHR) {
                            console.group("AJAX success:");
                            console.debug(data);
                            console.debug(textStatus);
                            console.debug(jqXHR);
                            console.groupEnd();
                        }
                        , type: "post"
                        , url: "/Service.svc/Test"
                    });
                });
            });
        </script>
        <title>WebService</title>
    </head>
    <body>
        <form runat="server">
            <h1><%= this.Page.Title %></h1>
            <p><input id="doAjax" type="button" value="Run" /></p>
        </form>
    </body>
</html>

Web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>
    <system.serviceModel>
        <bindings />
        <client />
        <behaviors>
            <endpointBehaviors>
                <behavior name="Behavior">
                    <webHttp />
                </behavior>
            </endpointBehaviors>
            <serviceBehaviors>
                <behavior name="">
                    <serviceMetadata httpGetEnabled="true" />
                    <serviceDebug includeExceptionDetailInFaults="false" />
                </behavior>
            </serviceBehaviors>
        </behaviors>
        <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
        <services>
            <service name="Service">
                <endpoint behaviorConfiguration="Behavior" binding="webHttpBinding" contract="WebService.IService" />
            </service>
        </services>
    </system.serviceModel>
</configuration>

Did you come up with an answer to this question? I am having the same issue and could not find the solution... :( — Naveed Butt, Feb 04 '13 at 10:10
@NaveedButt no, and I since moved to other projects. Try the answers below, and if you're able to do it, post an answer/comment so other can know what to do. — Albireo, Feb 05 '13 at 17:43
I am able to see some more details about the error by putting a div in the page and setting its html to jqXHR in case of error thrown. This way I am presented with a better output. I will post a solution here, when I find one IA. — Naveed Butt, Feb 06 '13 at 06:01
I have found the error, and it was with my javascript. There were some errors in the `jquery.ajax` method I used to call the service. — Naveed Butt, Feb 06 '13 at 06:12

score 2 · Answer 1 · edited Feb 20 '13 at 15:53

2

The service name must be fully qualified. Try: <service name="WebService.Service">

edited Feb 20 '13 at 15:53

Cristian Lupascu

39,078
16
100
137

answered Nov 19 '11 at 16:34

mightymada

121
1
4

score 1 · Answer 2 · answered Apr 28 '11 at 21:41

Hey! I was having this same problem (.....again) but finally figured it out and got it working properly.

Now this is my own example, but because it worked for me, hopefully it will work for you too... The key line that I was forgetting was in my $ajax command:

contentType: "application/json; charset=utf-8"

Good luck :) I spent half a day on this issue.

interface:

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json)]
int CreateMilestone(Milestone Input);

Class:

[DataContract]
public class Milestone
{
    [DataMember]
    public string Name { get; set; }
    [DataMember]
    public string Date { get; set; }
    [DataMember]
    public int Risk { get; set; }
    [DataMember]
    public int Complexity { get; set; }
}

the method:

   public int CreateMilestone(Milestone Input)
    {
        return 0;
    }

the jquery:

$("#btnSubmit").click(function () {

    if ($.trim($("#txtName").val()) == "") {
        $("#dName").effect("highlight", 500);
    }
    else {

        var date = $("#txtDate").datepicker("getDate");
        var data = {
            Name: $("#txtName").val(),
            Date: (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear(),
            Risk: parseInt($("#sRisk").text()),
                Complexity: parseInt($("#sComplexity").text())
            };
            var jsondata = JSON.stringify(data);
            $.ajax({
                type: "POST",
                async: false,
                url: 'Services/ProjectService.svc/CreateMilestone',
                contentType: "application/json; charset=utf-8",
                data: jsondata,
                dataType: "json",
                success: function (msg) {
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //                        alert(XMLHttpRequest.status);
                    //                        alert(XMLHttpRequest.responseText);
                }
            });
        }
    });

Calling an ASP.NET 4.0 WCF service from jQuery yields 400 Bad Request

2 Answers2