Grid with Datasource CRUD methods with Web Api

[sai]

Hi,

Am using Kendo mvvm framework to bind my datasource defined in the viewmodel to grid.

Datasource internally calls web api for performing CRUD functions. Am able to get data using datasource  transport "read" method. Am having trouble with other methods - update , create and destroy. Below is my datasource from viewModel -

var salesDataSource = new kendo.data.DataSource({
            schema: {
                data: function(data) { //specify the array that contains the data
                    return data || [];
                },
                errors: function (response) {
                    return response.error;
                },
               model: {
                    id: "ID",
                    fields: {
                        ID: { editable: false, nullable: true },
                        CompanyName: { validation: { required: true } },
                        LengthOfContract: { editable: false },
                        Status: { editable: false }
                    }
                }
            },
            batch: true,
            transport: {
                read: {
                    url: "/api/SalesApi",
                    dataType: "json" //
                },
                update: {
                    url: function (data) {
                        return "/api/SalesApi/" + data.models[0].ID;
                    },
                    dataType: "json",
                    type:"PUT"
                },
                parameterMap: function(data, operation) {
                    if (operation != "read") {
                        console.log("here");
                        console.log(data);
                        return JSON.stringify({ value: data.models });
                    } else {
                        return JSON.stringify(data);
                    }
                }
            },
            error: function (e) {
                console.log("error");
                console.log(e);
/*
                var message = e.xhr.responseJSON["error"].message.value;
                var innerMessage = e.xhr.responseJSON["error"].innererror.message;
                alert(message + "\n\n" + innerMessage);
*/
            },
            serverPaging: true,
            pageSize: 15
        });

My webapi method for Put -

// PUT api/sales/5
        public void Put(int id, IEnumerable<SalesModel> value)
        {
          //do somethig with data
        }

So when user clicks Save Changes on grid, my webApi PUT method is getting called but the second parameter "value" is not having any records.

Could you please advise on what am missing or point me to an example similar to am doing? Most of the examples I found on internet are using OData. I dont use
Odata. 

Thanks
Sai

[Andrew]

I posted the DataSource transport configuration we use to do CRUD on another thread. The key is to set the "contentType" and "processData" options for create and update, because you have to tell jQuery.ajax() that the data is being sent up in JSON. Otherwise, jQuery will try to put the data into the query string.

I'm not sure if your parameterMap implementation is right either. In our code, when the operation is an "update", the data is the object being updated. There's no "models" property on it.

Hope this helps,

[sai]

Hi Andrew,

Thanks for replying to my query.

It still doesnt work. When I set the contentType to "application/json" and processData as false. My second parameter on the "Put" method is coming out as null.
Earlier it was atleast showing as with items count as zero. Not sure am missing something here.

And regarding the data in my parameterMap, its an enumerable collection of models so the reason I had to use data.Models. I checked the data on the console and its showing data.models (which is an array 1 item,  selected row on grid).

[Sean]

Also from my playing with Web API, you can't have more than 1 complex parameter in your Web API method declaration. 

Check out this article on Asp.Net:
http://www.asp.net/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

[sai]

@Andrew, thanks for replying.

In my my WebApi I have only one complex parameter not two. Not sure why you are saying that I have more than one complex type.

[Andrew]

I'm not familiar with ASP.NET so I don't have any more advice for you. Can you verify that the PUT request has the correct JSON payload?

[Marcel]

Change your webApi PUT to accept a single SalesModel.
If you batch multiple SalesModels, MVC will call the PUT method on your Controller for each SalesModel,
since MVC will also take care of serializing the JSON data to SalesModel instances.

// PUT api/sales/5
        public void Put(int id, SalesModel value)
        {
          //do somethig with data
        }

[sai]

@Marcel, I tried changing the IEnumerable SalesModel to just SalesModel. I get an object but all values are null.

When I checked in the fiddler, I see that all values are being passed to the server but on the server values are coming out as null. I have attached the screenshot of fiddler.

[Michael]

this is outdated but it may help someone else...

 Make sure that the model class in web api that you're using has a (public) default constructor declared, even if it's empty.