MVC Grid WebApi vs Ajax binding

[Oleksandr]

Hi!
I've investigated grid control for few hours and came to the confusion with bindings. I found no principal differences between WebApi() and Ajax() bindings. Could you drop some light on this topic: why do they exist separately and when should I use one or another?

Investigation details:

- documentation for MVC grid doesn't have WebApi binding description. It has only a WebService which I think was the predecessor of WebApi binding. Anyway, that didn't explain the differences.

- one difference I've found so far is that by default Ajax binding use POST request, while WebApi binding use GET request. But this behavior can be overriden. So the following examples generate identical network traffik:
1) .DataSource(dataSource => dataSource
        .WebApi()
        .Read(read => read.Action("Grid", "People").Type(HttpVerbs.Get))
2) .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Grid", "People").Type(HttpVerbs.Get))
Changing HttpVerbs.Get to HttpVerbs.Post again generates the same traffik for both bindings.
Obviously my MVC controller works the same too since I don't need to change it to work with one or another binding.

- another difference is in the HTML output which is rendered on the view:
if(kendo.data.transports['webapi']){return 'webapi';} else{throw new Error(...
if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error(...
But that doesn't seem important since network traffik generated by both configurations is the same. Was it done for potential future needs, or did I miss something?

[Vladimir Iliev]

Hi Oleksandr,


The differences between Ajax and WebApi DataSource builders are that the WebApi DataSource uses different type of requests for the CRUD operations and automatically include the model ID in the URL.

e.g.:

The following wrapper configuration:

.WebApi()
    .Model(model =>
    {
        model.Id(p => p.ProductID);
    })
    .Events(events => events.Error("error_handler"))
    .Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Product" })))
    .Create(create => create.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Product" })))
    .Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Product", id = "{0}" })))
    .Destroy(destroy => destroy.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Product", id = "{0}" })))

Will result in the following JavaScript:

"transport": {
    "read": {
        "url": "/api/Product",
        type: "GET" //from kendo.aspnetmvc.js
    },
    "prefix": "",
    "update": {
        "url": "/api/Product/{0}",
        type: "PUT" //from kendo.aspnetmvc.js
    },
    "create": {
        "url": "/api/Product",
        type: "POST" //from kendo.aspnetmvc.js
    },
    "destroy": {
        "url": "/api/Product/{0}",
        type: "DELETE" //from kendo.aspnetmvc.js
    },
    "idField": "ProductID"
},

Regards,
Vladimir Iliev
Telerik