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控制器和镀铬输出的代码段，这两个错误都是相同的：

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

尝试更改数据源中的网址：

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

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

Answer 1

通常你用

装饰你的控制器

[HttpGet]
[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 DataSource创建定义中的url更改为api/NorthwindProductWebApi/PostProduct。

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

ASP.NET WebAPI KendoUI，不能更新，创建，删除数据，405方法不允许

2 个答案: