ASP.NET WebAPI KendoUI, can't update, create, delete data, 405 Method not allowed

Question

I'm using ASP.NET WebApi in conjunction with KendoUI. Json is successfully displayed in the grid, so GET works. But I can't UPDATE, CREATE or DELETE data. Any idea what I am missing? Even in the Telerik forum I couldn't find anything that points me into the right direction. And I also looked through their examples. Must I somehow pass values to PUT, POST, and DELETE?

<script type="text/javascript">
    var remoteDataSource = new kendo.data.DataSource({
        transport: {
            read:    { url: '/api/NorthwindProductWebApi', dataType: "json", type: "GET" },
            update:  { url: '/api/NorthwindProductWebApi', dataType: "json", type: "PUT"},
            create:  { url: '/api/NorthwindProductWebApi', dataType: "json", type: "POST" },
            destroy: { url: '/api/NorthwindProductWebApi', dataType: "json", type: "DELETE" },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) }
                    ;
                }
            }
            },
        pageSize: 20,
        batch: true,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID:          { type: "number" },
                    ProductName:        { type: "string" },
                    SupplierID:         { type: "number" },
                    CategoryID:         { type: "number" },
                    QuantityPerUnit:    { type: "string" },
                    UnitPrice:          { type: "string" },
                    UnitsInStock:       { type: "number" },
                    UnitsOnOrder:       { type: "number" },
                    ReorderLevel:       { type: "number" },
                    Discontinued:       { type: "string" }
                }
            }
        }
    });
    $('#grid').kendoGrid({
        dataSource: remoteDataSource,
        heigth: 100,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },

        toolbar: ["create"],
        columns: [{
            command: ["edit", "destroy"], title: " ", width: "200px"
        },
            {
                field: "ProductID",
                title: "ProductID",
                width: 200
            }, {
                field: "ProductName",
                title: "ProductName",
                width: 250
            }, {
                field: "SupplierID",
                title: "SupplierID",
                width: 200
            }, {
                field: "CategoryID",
                title: "CategoryID",
                width: 200
            }, {
                field: "QuantityPerUnit",
                title: "QuantityPerUnit",
                width: 200
            }, {
                field: "UnitPrice",
                title: "UnitPrice",
                width: 250
            }, {
                field: "UnitsInStock",
                title: "UnitsInStock",
                width: 200
            }, {
                field: "UnitsOnOrder",
                title: "UnitsOnOrder",
                width: 250
            }, {
                field: "ReorderLevel",
                title: "ReorderLevel",
                width: 200
            }, {
                field: "Discontinued",
                title: "Discontinued",
                width: 250
            }],
        editable: "popup",
        save: function(){
            this.refresh();
        },
        scrollable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "beginnt mit",
                    eq: "exakt",
                    neq: "enthält nicht"
                },
                number: {
                    //???contains: "contains",
                    eq: "exakt",
                    //???doesnotcontain: "Is not equal to"
                }
            },
        }
    });
</script>

Update:

Chrome gives me a 405 Method not allowed method on PUT and a 500 (Internal Server Error) on POST. Here is a snippet from the scaffold WebApi Controller and the chrome output, which is the same for both errors:

POST http://localhost:123/api/NorthwindProductWebApi 500 (Internal Server Error) jquery-1.10.2.js:8720

send                        jquery-1.10.2.js:8720
jQuery.extend.ajax          jquery-1.10.2.js:8150
ct.extend.create            kendo.all.min.js:11
(anonymous function)        kendo.all.min.js:11
jQuery.extend.Deferred      jquery-1.10.2.js:3274
lt.extend._promise          kendo.all.min.js:11
lt.extend._send             kendo.all.min.js:11
lt.extend.sync              kendo.all.min.js:11
j.extend.saveRow            kendo.all.min.js:23
(anonymous function)        kendo.all.min.js:22
jQuery.event.dispatch       jquery-1.10.2.js:5109
elemData.handle             jquery-1.10.2.js:4780






// POST api/NorthwindProductWebApi
        [ResponseType(typeof(Product))]
        public IHttpActionResult PostProduct(Product product)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Products.Add(product);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = product.ProductID }, product);
        }

Attempt to change the Url in the DataSource:

create: {
            url: function(options) {
                return '/api/NorthwindProductWebApi/PostProduct' + options.ProductID

                     },
            type: "POST",    
            dataType: "json"

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

Normally you decorate your controller with

[HttpGet]
[HttpPost]

If you decided to use full set of REST request methods ,Get,Put,Delete,Post then you must handle them by decorating on the controller method to tell the compiler which method will be processing which type of request.

[HttpGet]
public ActionResult HelloWorld()
{}

[HttpPost]
public ActionResult HelloWorld(Model model)
{}

[HttpPut]
public ActionResult HelloWorld(Model model)
{}

[HttpDelete]
public ActionResult HelloWorld(int Id)
{}

For more information Link: PUT vs POST in REST

edited May 23 '17 at 11:57

Community

1
1

answered May 28 '14 at 10:14

Shazhad Ilyas

1,183
8
14

Thx, I tried it, but unfortunately that didn't work. – oldsport May 28 '14 at 11:27
Can you debug in the browser to see which type of request being generated. Use F12 and go in network for details.. – Shazhad Ilyas May 28 '14 at 12:30
this is clear broweser could not find the resource on the server. check your controller naming and dataannotations.. – Shazhad Ilyas May 28 '14 at 15:18

score 0 · Answer 2 · answered May 28 '14 at 12:50

Ok, so, your controller is named NorthwindProductWebApiController and your POST method in the controller is named PostProduct. The solution is one of two choices. You can either rename PostProduct to Post - removing the Product part in the name, or change the url in your Kendo DataSource create definition to api/NorthwindProductWebApi/PostProduct.

Remember that ASP.NET WebApi is based on convention. You do not have to fully name your controller methods. Typically, the HTTP verb is sufficient. It knows which method to call based on the verb and number of arguments. If you do however fully name the method, you must fully name it in the URL.

Tried both, but sadly didn`t work. I was not sure how to actually change the Url in the DataSource. I updated my attempt, hope that is what you meant. — oldsport, May 28 '14 at 14:15

ASP.NET WebAPI KendoUI, can't update, create, delete data, 405 Method not allowed

2 Answers2