MVVM JSONP Update WCF service

[john]

I have a WCF service that supports JSONP for CRUD operations as I use it with Sencha Touch (only mention this to confirm it works). Now I build an MVVM Mobile app that I very pleased except my CRUD update throws on the server side. My Datasource looks like:

var ds = kendo.data.DataSource.create({

    schema: schema,

    transport: {

        read: {

            url:  myserver + "/getcontacts",

            dataType: "jsonp"

        },

         update: {

                url: myserver + "/UpdateContact",

                dataType: "jsonp"

            },

    }

});

I have an save button that triggers update method on the viewmodel for my edit view:

<div data-role="view" id="Edit" data-transition="slide" data-layout="default" data-model="detailViewModel" >

        <header data-role="header">

        <div data-role="navbar">

            <a data-role="backbutton" data-align="left">Back</a>

            <span data-role="view-title">Item</span>

            <button class="about-button" data-bind="click: update, enabled: hasChanges">Save</button>

 

           <!--  <a class="about-button" data-align="right"   data-role="button" data-bind="click:update, enabled: hasChanges">Save</a>-->

        </div>

        </header>

 

        <div data-role="content">

      

          <ul data-role="listview" data-style="inset" data-type="group">

            <li>

                Contact

                <ul>

                     

                     <li>

                        <input type="text" data-bind="value: currentItem.FullName" />

                        FullName

                    </li>

                </ul>

            </li>

            <li>

                Phone

                <ul>

                  <li> <input type="tel" data-bind="value: currentItem.Homephone"/>Home</li>

                  <li> <input type="tel" data-bind="value: currentItem.Cellphone"/>Home</li>

 

                </ul>

            </li>

           

        </ul>

         

        </div>

 

//detail view model

var detailViewModel = kendo.observable({

    currentItem: null,

    hasChanges: true,

    change: function () {

        this.set("hasChanges", true);

    },

    update: function () {

            ds.sync();

    }

 

});

Must say I love this Viewmodel stuff as it makes progamming in Javascript feel good! As u can see the update just calls sync() which generates the JSONP call ro the server. u are correctly doing a GET as JSONP will not allow a POST but my service call which looks like:

[OperationContract]

        [WebGet(ResponseFormat = WebMessageFormat.Json)]

        void UpdateContact(string jsonData);

 

 

implementation:

 

 public void UpdateContact(string jsonString)

        {

            if (jsonString.Length == 0)

                return;

Now I have a breakpoint on the first line and jsonString is  null. If I look at the HTTP request in Fiddler it is:

http://127.0.0.1/Contacts/Service1.svc/UpdateContact?callback=jQuery17107894782717339694_1334252488498&Cellphone=(352)+359-8882&FullName=chris+gaynor&HomeAddress=null&Homephone=555555&email=cgaynor8%40bellsouth.net&_=1334252736709

the same update from Sencha results in the JsonString containing the changed object in the WCF method:

http://127.0.0.1/Contacts/Service1.svc/UpdateContact?jsonData=%7B%22id%22%3A76%2C%22FullName%22%3A%22connie%20dixon%22%2C%22email%22%3A%22jmcfet%40bellsouth.net%22%2C%22Cellphone%22%3A%22727%22%2C%22Homephone%22%3A%22777777%22%7D&callback=Ext.util.JSONP.callback

[Atanas Korchev]

Hi,

 By default the Kendo DataSource sends parameters encoded as query string values. This is so because under the hood we are using jQuery.ajax. To send your data as JSON you need to use the parameterMap method of the DataSource:

transport: {
  parameterMap: function(options, operation) {
    if (operation !== "read") {
      return { jsonData: kendo.stringify(options) };
    }
  }
}

All the best,
Atanas Korchev
the Telerik team