Kendo UI – jQuery and dataSource–transport–contentType

The way a kendo datasource retrieves data can be configured via the transport object.

This object contains configuration objects for specifying the way CRUD operations are executed.

Each of these configuration objects contain the properties

contentType (Type of the HTTP request)

dataType (Type of the HTTP response request)

 

The way you configure these properties defines the way how the C# REST Service code must be written. If you use the default contentType (application/x-www-form-urlencoded; charset=UTF-8). the data is sent inside the forms collection with the name "models" of the request, the name of this property is set in the parameterMap function:

var dataSource = new kendo.data.DataSource({
transport: {
update: {
// The default HTTP request (send) type.
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
// The expected HTTP response (receive) type.
dataType: "json"    
}
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: JSON.stringify(options.models) };
}
}
});

C# code to handle this update request:

public List<MyDto> Post()
{
    string json = _request["models"];
var records = new List<MyDto>();
if (!string.IsNullOrWhiteSpace(json))
{
records = JsonConvert.DeserializeObject<List<MyDto>>(json);
// Update data in database …
}
return records;
}

MyDto is just a POCO class.

 

If you want to sent the data as a parameter of the Post method, you should use "contentType:"application/json"":

var dataSource = new kendo.data.DataSource({
transport: {
update: {
// The default HTTP request (send) type.
contentType: "application/json",
// The expected HTTP response (receive) type.
dataType: "json"    
}
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: JSON.stringify(options.models) };
}
}
});

C# code to handle this update request:

public List<MyDto> Post(List<MyDto> records)
{
// Update records in database ...
return records;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

2 comments

  1. Scott Gines says:

    Thank you so much for this!!!

    I was tearing my hair out trying to figure out why it was sending the data across as form data instead of json, even though I had contentType: “application/json”.

    Turns out I had to do this…

    if (operation !== “read” && options.models) {
    return JSON.stringify(options);
    }

  2. Muhammad sohail says:

    your header is too big