json到jQuery DataTables ajax调用从WCF服务获取错误请求400？

Question

I am having problems getting a valid json from a jQuery DataTables.Net ajax POST call to my WCF Services (4.0) service. I have tried many combinations and cannot get the aoData values over to my service.

[Apols for so much code...thought I'd best paste everything I can think of!]

This is the call, from IE F12 debug:

Key Value
Request POST /CustomerService.svc/json/GetCustomerDataTable HTTP/1.1
Accept  application/json, text/javascript, */*; q=0.01
Content-Type    application/json; charset=utf-8
Referer http://localhost:51901/Home/ListCustomers
Accept-Language en-gb
Accept-Encoding gzip, deflate
User-Agent  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Host    localhost:51900
Content-Length  1651
Connection  Keep-Alive
Cache-Control   no-cache

And the Request Body

"{ jsonAOData : [{"name":"sEcho","value":1},{"name":"iColumns","value":7},{"name":"sColumns","value":""},{"name":"iDisplayStart","value":0},{"name":"iDisplayLength","value":10},{"name":"mDataProp_0","value":"CustomerNumber"},{"name":"mDataProp_1","value":"FirstName"},{"name":"mDataProp_2","value":"FamilyName"},{"name":"mDataProp_3","value":"MobileNumber"},{"name":"mDataProp_4","value":"CustomerIdNumber"},{"name":"mDataProp_5","value":"CustomerIdType"},{"name":"mDataProp_6","value":"DateOfBirth"},{"name":"sSearch","value":""},{"name":"bRegex","value":false},{"name":"sSearch_0","value":""},{"name":"bRegex_0","value":false},{"name":"bSearchable_0","value":true},{"name":"sSearch_1","value":""},{"name":"bRegex_1","value":false},{"name":"bSearchable_1","value":true},{"name":"sSearch_2","value":""},{"name":"bRegex_2","value":false},{"name":"bSearchable_2","value":true},{"name":"sSearch_3","value":""},{"name":"bRegex_3","value":false},{"name":"bSearchable_3","value":true},{"name":"sSearch_4","value":""},{"name":"bRegex_4","value":false},{"name":"bSearchable_4","value":true},{"name":"sSearch_5","value":""},{"name":"bRegex_5","value":false},{"name":"bSearchable_5","value":false},{"name":"sSearch_6","value":""},{"name":"bRegex_6","value":false},{"name":"bSearchable_6","value":false},{"name":"iSortCol_0","value":0},{"name":"sSortDir_0","value":"asc"},{"name":"iSortingCols","value":1},{"name":"bSortable_0","value":true},{"name":"bSortable_1","value":true},{"name":"bSortable_2","value":true},{"name":"bSortable_3","value":true},{"name":"bSortable_4","value":true},{"name":"bSortable_5","value":false},{"name":"bSortable_6","value":false}]}"

This is giving the error:

There was an error deserializing the object of type System.String. The token 'null' was expected but found 'name'.

I have tried various ways of building up data: '"{ jsonAOData : ' + jsonAOData + '}"', but not yet found any combination that works.

I have looked through lots of things on SO, but not yet found a solution.

NOTE:
If I send:

data: '{ "jsonAOData" : "' + 'BOBBLE' + '"}',

then I get back the error:

There was an error deserializing the object of type System.String. End element 'root' from namespace '' expected. Found element 'jsonAOData' from namespace ''.

TBH: I don't know what this means! This is a string, not XML, so why is it looking for "root" - besides, I WANT jsonAOData, don't I?

NOTE
If I call my MVC3 controller with the same call (just a different URI) then it works as expected and I get my jsonAOData string correctly passed through?

Code

---

[ServiceContract]
public interface ICustomerService
{
    [OperationContract]
    [WebInvoke(Method="POST",
        BodyStyle= WebMessageBodyStyle.Bare, 
        RequestFormat=WebMessageFormat.Json, 
        ResponseFormat=WebMessageFormat.Json,
        UriTemplate = "GetCustomerDataTable")]
    string GetCustomerDataTable(string jsonAOData);
}

-

public string GetCustomerDataTable(string jsonAOData)
{
    var log = LogManager.GetLogger
    //Code omitted for brevity...

    var result = serializer.Serialize(jsonDataTable);
    return result;
}

-

    $(document).ready(function () {
        jQuery.support.cors = true; // cross site
        var dt = $('#dataTable').dataTable({
            "bProcessing": true,
            "bSort": true,
            "bServerSide": true,
            //"sAjaxSource": "JsonSearch", //Call to MVC controller...works as expected
            "sAjaxSource": "http://localhost:51900/CustomerService.svc/json/GetCustomerDataTable",
            "sServerMethod": "POST",
            "fnServerData": function (sSource, aoData, fnCallback) {
                var jsonAOData = JSON.stringify(aoData);
                //alert(jsonAOData);
                $.ajax({
                    dataType: 'json',
                    crossDomain: true,
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    url: sSource,
                    data: '"{ jsonAOData : ' + jsonAOData + '}"', //I have tried many combinations of this!
                    dataType: "json",
                    success: function (data) {
                        //alert('success');
                        fnCallback($.parseJSON(data));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Status: " + XMLHttpRequest.status + "\r\n" + textStatus + "\r\n" + errorThrown);
                    }
                });
            },
            "aoColumnDefs": [
                        { "aTargets": [0], "sTitle": "Customer Number", "mData": "CustomerNumber", "bSearchable": true, "bSortable": true },
                        { "aTargets": [1], "sTitle": "First Name", "mData": "FirstName", "bSearchable": true, "bSortable": true },
                        { "aTargets": [2], "sTitle": "Family Name", "mData": "FamilyName", "bSearchable": true, "bSortable": true },
                        { "aTargets": [3], "sTitle": "Mobile Number", "mData": "MobileNumber", "bSearchable": true, "bSortable": true },
                        { "aTargets": [4], "sTitle": "Customer Id", "mData": "CustomerIdNumber", "bSearchable": true, "bSortable": true },
                        { "aTargets": [5], "sTitle": "Id Type", "mData": "CustomerIdType", "bSearchable": false, "bSortable": false },
                        { "aTargets": [6], "sTitle": "Date Of Birth", "mData": "DateOfBirth", "bSearchable": false, "bSortable": false },
                ],
            "sScrollY": "500",
            "bScrollCollapse": true
        });

        dt.fnSetFilteringDelay(1000);

    });

-

<system.serviceModel>
  <bindings>
    <webHttpBinding>
      <binding name="jsonCustomerServiceBinding" maxBufferSize="26214400"
        maxReceivedMessageSize="26214400" />
    </webHttpBinding>
  </bindings>
  <services>
    <service name="Ibq.WcfService.CustomerService">
      <endpoint address="json" behaviorConfiguration="json" binding="webHttpBinding"
        bindingConfiguration="jsonCustomerServiceBinding" name="jsonCustomerService"
        contract="Ibq.WcfService.ICustomerService" kind="webHttpEndpoint"
        endpointConfiguration="" />
      <host>
        <baseAddresses>
          <add baseAddress="http://localhost:51900/" />
        </baseAddresses>
      </host>
    </service>
  </services>
  <behaviors>
    <endpointBehaviors>
      <behavior name="json">
        <webHttp helpEnabled="true" defaultOutgoingResponseFormat="Json"
          faultExceptionEnabled="false"/>
      </behavior>
    </endpointBehaviors>
    <serviceBehaviors>
      <behavior name="">
        <serviceMetadata httpGetEnabled="true" />
        <serviceDebug includeExceptionDetailInFaults="false" />
        <dataContractSerializer maxItemsInObjectGraph="2147483647" />
      </behavior>
    </serviceBehaviors>
  </behaviors>
  <serviceHostingEnvironment multipleSiteBindingsEnabled="false" />
</system.serviceModel>

Answer 1

Solved it with With lots of googling:

Amended my Service to be

string GetCustomerDataTable(List<NameValuePair<string, string>> jsonAOData);

The ajax call is now:

"fnServerData": function (sSource, aoData, fnCallback) {
                var jsonAOData = JSON.stringify(aoData);
                //alert(aoData.toString());
                $.ajax({
                    dataType: 'json',
                    crossDomain: true,
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    url: sSource,
                    **data: jsonAOData,**
                    dataType: "json",
                    success: function (data) {
                        //alert('success');
                        fnCallback($.parseJSON(data));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Status: " + XMLHttpRequest.status + "\r\n" + textStatus + "\r\n" + errorThrown);
                    }
                });

And added a DataContract

[DataContract]
    public class NameValuePair<TName, TValue>
    {
        [DataMember(Name="name")]
        public TName Name { get; set; }

        [DataMember(Name = "value")]
        public TValue Value { get; set; }

        public NameValuePair(TName name, TValue value)
        {
            Name = name;
            Value = value;
        }

        public NameValuePair() { }
    } 

This now serializes to a list of NameValue pairs...but this is exactly what I needed for DataTables :)