title: jQuery Ajax with Json call to WCF service pass-through to WCF service
body: <p>I'm attempting to use jQuery Ajax call with Json to call a webservice which is a pass-through and calls another webservice.  This works if I don't use ajax, works as an ajax call to the backend service directly, but does not work as ajax call to pass-through service.  My question is how do I get an ajax to pass-through webservice to webservice to work?</p>
  
  <p>This is the code I have so far:</p>
  
  <pre><code>[ServiceContract]
  public interface IService1
  {
  
      [OperationContract]
      [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
      string GetData(int value);
      }
  </code></pre>
  
  <p>Behind webservice:</p>
  
  <pre><code>[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  public class Service1 : IService1
  {
      public string GetData(int value)
      {
          return string.Format("You entered: {0}", value);
      }
  }
  </code></pre>
  
  <p>Pass-through service:</p>
  
  <pre><code>[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  public class Service2 : IService1
  {
      public string GetData(int value)
      {
         var service = new ServiceReference1.Service1Client("clientContractStuff");
         var testString = service.GetData(value);
         return testString;
      }
  }
  </code></pre>
  
  <p>Page code behind:</p>
  
  <pre><code>public partial class WebUserControl1 : System.Web.UI.UserControl
  {
      protected void CodeBehindWcf(object sender, EventArgs e)
      {
          var service = new ServiceReference1.Service1Client("clientContractStuff");
          var testString = service.GetData(5);
          TextBox1.Text = testString;
      }
  
      protected void CodeBehindWcfUsingService2(object sender, EventArgs e)
      {
          var service = new Service2();
          var testString = service.GetData(5);
          TextBox2.Text = testString;
      }
  }
  </code></pre>
  
  <p>Javascript and Html:</p>
  
  <pre><code>&lt;%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs"
      Inherits="WcfService1.WebUserControl1" %&gt;
  &lt;script type="text/javascript" src="Scripts/jquery-1.4.4-vsdoc.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function ajaxService2() {
          serviceUrl = "Service2.svc/GetData";
          $.ajax({
              type: "POST",
              url: serviceUrl,
              data: "{\"value\":\"1\"}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (transport) {
                  var string = transport;
                  $("#Text2").val(string);
              }
          });
      }
  
      function ajaxService1() {
          serviceUrl = "Service1.svc/GetData";
          $.ajax({
              type: "POST",
              url: serviceUrl,
              data: "{\"value\":\"2\"}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (transport) {
                  var string = transport;
                  $("#Text1").val(string);
              }
          });
      }
  &lt;/script&gt;
  &lt;p&gt;
      &lt;input id="Button1" type="button" value="Ajax call service 1" onclick="ajaxService1()" /&gt;
      &lt;input id="Text1" name="Text1" type="text" /&gt;&lt;/p&gt;
  &lt;p&gt;
      &lt;input id="Button2" type="button" value="Ajax call service 2" onclick="ajaxService2()" /&gt;
      &lt;input id="Text2" name="Text2" type="text" /&gt;&lt;/p&gt;
  &lt;p&gt;
      &lt;asp:Button ID="Button3" runat="server" Text="Code Behind" OnClick="CodeBehindWcf" /&gt;
      &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;&lt;/p&gt;
  &lt;p&gt;
      &lt;asp:Button ID="Button4" runat="server" Text="Code Behind Use Service 2" OnClick="CodeBehindWcfUsingService2" /&gt;
      &lt;asp:TextBox ID="TextBox2" runat="server"&gt;&lt;/asp:TextBox&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Everything works except Button 2 and ajaxService2 function.  This throws an error: 'The remote server returned an unexpected response: (400) Bad Request.'</p>