ASP.NET WebAPI KendoUI，无法更新、创建、删除数据，405 Method not allowed

Question

我将 ASP.NET WebApi 与 KendoUI 结合使用。 Json 成功显示在网格中，因此 GET 有效。但我不能更新、创建或删除数据。知道我缺少什么吗？即使在 Telerik 论坛中，我也找不到任何能指引我走向正确方向的东西。我也浏览了他们的例子。我必须以某种方式将值传递给 PUT、POST 和 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>

更新：

Chrome 在 PUT 上给了我一个 405 Method not allowed 方法，在 POST 上给了我一个 500（内部服务器错误）。这是来自脚手架 WebApi Controller 和 chrome 输出 的 sn-p，这两个错误都是相同的：

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);
        }

尝试更改数据源中的 URL：

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

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

Answer 1

通常你用

装饰你的控制器

1. [HttpGet]
2. [HttpPost]

如果您决定使用全套 REST 请求方法，Get,Put,Delete,Post，那么您必须通过在控制器方法上进行装饰来处理它们，以告诉编译器哪个方法将处理哪种类型的请求。

[HttpGet]
public ActionResult HelloWorld()
{}

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

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

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

更多信息链接：PUT vs POST in REST

Answer 2

好的，你的控制器被命名为NorthwindProductWebApiController，你在控制器中的POST方法被命名为PostProduct。解决方案是两种选择之一。您可以将 PostProduct 重命名为 Post - 删除名称中的 Product 部分，或将您的 Kendo 数据源创建定义中的 url 更改为 api/NorthwindProductWebApi/PostProduct。

请记住，ASP.NET WebApi 是基于约定的。您不必完全命名您的控制器方法。通常，HTTP 动词就足够了。它知道根据动词和参数数量调用哪个方法。但是，如果您确实为该方法命名，则必须在 URL 中对其进行完整命名。