MVC Grid WebApi vs Ajax binding

2 posts, 1 answers
  1. Oleksandr
    Oleksandr avatar
    6 posts
    Member since:
    Dec 2014

    Posted 03 Dec 2014 Link to this post

    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
            .Read(read => read.Action("Grid", "People").Type(HttpVerbs.Get))

    2) .DataSource(dataSource => dataSource
            .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(['webapi']){return 'webapi';} else{throw new Error(...
    if(['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?

  2. Answer
    Vladimir Iliev
    Vladimir Iliev avatar
    2206 posts

    Posted 05 Dec 2014 Link to this post

    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.


    The following wrapper configuration:
        .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"

    Vladimir Iliev

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top