Question

I need to have a javascript which will send object as json to WCF service to save it.
I have javascript:

 <script>
      $(document).ready(function(){

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

console.info("executing submitButton click");
TestJSon();
 );
      });
       </script>
        <button type="button" id="submitButton">Save</button>
        <script>
            var varType;
            var varUrl;
            var varData;
            var varContentType;
            var varDataType;
            var varProcessData;          
            //Generic function to call AXMX/WCF  Service        
            function CallService() 
            {
            console.log('called CallService')
                    $.ajax({
                        type        : varType, //GET or POST or PUT or DELETE verb
                        url         : varUrl, // Location of the service
                        data        : varData, //Data sent to server
                        contentType : varContentType, // content type sent to server
                        dataType    : varDataType, //Expected data format from server
                        processdata : varProcessData, //True or False
                        success     : function(msg) {//On Successfull service call
                        ServiceSucceeded(msg);                    
                        },
                        error: ServiceFailed// When Service call fails
                    });
        }

        function ServiceSucceeded(result) {//When service call is sucessful
       alert('Service call succeded');
             varType=null;varUrl = null;varData = null;varContentType = null;varDataType = null;varProcessData = null;     
        }
        function ServiceFailed(result) {
            alert('Service call failed: ' + result.status + '' + result.statusText);
            varType = null; varUrl = null; varData = null; varContentType = null; varDataType = null; varProcessData = null;     
        }



        function TestJSon() {
                varType = "POST";
            varUrl = "http://localhost:56616/bebc179a-3a96-4934-88df-df1ca17da8b1/CountryDataService.svc/SaveObject";
            varData = { player: {'Name': '1' }};
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = true;
            CallService();

        }
</script>

This script should use this method of WCF:

 public void SaveObject(Player player)
        {
             var input = player;
            File.WriteAllText(@"c:\Temp\" + "index.html", input.Name, Encoding.UTF8);
            return player;
        }

on service interface it is:

[OperationContract]
        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
        void SaveObject(Player player);

Player class:

[DataContract(Name = "Player")]
    public class Player
    {
        private string _name;
        [DataMember]
        public string Name { get { return _name; } set { _name = value; } }     

    }

in the config I have:

<services>
 <service name="MyCompany.Services.CountryDataService" behaviorConfiguration="CountryProvinceBehavior" >
    <endpoint address="" binding="webHttpBinding" contract="MyCompany.Services.ICountryDataService" behaviorConfiguration="CountryProvinceBehavior"/>
  </service>

   <behaviors>     
      <endpointBehaviors>
        <behavior name="CountryProvinceBehavior">
          <webHttp/>
        </behavior>
      </endpointBehaviors> 
      <serviceBehaviors>
        <behavior name="CountryProvinceBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>          
      </serviceBehaviors>
    </behaviors>     
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
  </system.webServer>

and the most important – the result:
Method ServiceFailed has been hit with code 0 and statusText – NoTransport
There was also no traffic (Fiddler told me)
the address of service is ok, because when I changed json to jsonp ServiceFailed also has been hit with code 200 and statusText – success.

And there was a traffic:

Request

GET http://localhost:56616/bebc179a-3a96-4934-88df-df1ca17da8b1/CountryDataService.svc/SaveObject?callback=jQuery1710486683341013641_1342788918981&player%5BName%5D=1&_=1342788921786 HTTP/1.1
Accept: application/javascript, */*;q=0.8
Accept-Language: en-US
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: localhost:56616

Response

HTTP/1.1 404 Not Found
Content-Length: 1565
Content-Type: text/html; charset=UTF-8
Server: Microsoft-IIS/7.5
X-Powered-By: ASP.NET
Date: Fri, 20 Jul 2012 12:55:21 GMT

<?xml version="1.0" encoding="utf-8"?>
<!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>
    <title>Service</title>
    <style>BODY { color: #000000; background-color: white; font-family: Verdana; margin-left: 0px; margin-top: 0px; } #content { margin-left: 30px; font-size: .70em; padding-bottom: 2em; } A:link { color: #336699; font-weight: bold; text-decoration: underline; } A:visited { color: #6699cc; font-weight: bold; text-decoration: underline; } A:active { color: #336699; font-weight: bold; text-decoration: underline; } .heading1 { background-color: #003366; border-bottom: #336699 6px solid; color: #ffffff; font-family: Tahoma; font-size: 26px; font-weight: normal;margin: 0em 0em 10px -20px; padding-bottom: 8px; padding-left: 30px;padding-top: 16px;} pre { font-size:small; background-color: #e5e5cc; padding: 5px; font-family: Courier New; margin-top: 0px; border: 1px #f0f0e0 solid; white-space: pre-wrap; white-space: -pre-wrap; word-wrap: break-word; } table { border-collapse: collapse; border-spacing: 0px; font-family: Verdana;} table th { border-right: 2px white solid; border-bottom: 2px white solid; font-weight: bold; background-color: #cecf9c;} table td { border-right: 2px white solid; border-bottom: 2px white solid; background-color: #e5e5cc;}</style>
  </head>
  <body>
    <div id="content">
      <p class="heading1">Service</p>
      <p>Endpoint not found.</p>
    </div>
  </body>
</html>

So, I need help with saving this Player object at my WCF service. I’m using Wk8 and .net 4.0

I will be gratefull for any help.

Answer 1

Let’s do this step by step so that you could have a starting base.

1. Create a new Empty ASP.NET application

2. Add a model class

   [DataContract]
   public class Player
   {
       [DataMember]
       public string Name { get; set; }
   }
   

3. A service contract:

   [ServiceContract]
   public interface ICountryDataService
   {
       [OperationContract]
       [WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
       void SaveObject(Player player);
   }
   

4. And an implementation:

   public class CountryDataService : ICountryDataService
   {
       public void SaveObject(Player player)
       {
       }
   }
   

5. Add an .svc endpoint (CountryDataService.svc):

   <%@ ServiceHost 
       Language="C#" 
       Debug="true" 
       Service="MyService.CountryDataService" 
   %>
   

6. Modify web.config:

   <system.serviceModel>
       <behaviors>
         <endpointBehaviors>
           <behavior name="CountryProvinceBehavior">
             <webHttp/>
           </behavior>
         </endpointBehaviors>          
           <serviceBehaviors>
               <behavior name="">
                   <serviceMetadata httpGetEnabled="true" />
                   <serviceDebug includeExceptionDetailInFaults="false" />
               </behavior>
           </serviceBehaviors>
       </behaviors>
       <services>
           <service name="MyService.CountryDataService">
             <endpoint 
               address="" 
               binding="webHttpBinding" 
               contract="MyService.ICountryDataService" 
               behaviorConfiguration="CountryProvinceBehavior" />
           </service>          
       </services>
       <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
   </system.serviceModel>
   

7. Add an index.htm to consume:

   <!DOCTYPE html>
   <html>
   <head>
       <title></title>
   </head>
   <body>
       <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
       <script type="text/javascript">
           $.ajax({
               url: 'countrydataservice.svc/saveobject',
               type: 'POST',
               contentType: 'application/json',
               data: JSON.stringify({ player: { Name: 'foo bar'} }),
               success: function (result) {
   
               }
           });
       </script>
   </body>
   </html>
   

---

UPDATE:

And here’s a link to my sample solution: http://www.filedropper.com/myservice