Kendo UI网格更新 - PUT api方法未在create上调用

时间:2015-02-19 19:17:26

标签: jquery asp.net-web-api kendo-grid

我有一个Kendo-UI Grid,标题中有一个添加按钮。网格允许编辑特定节目和网络的剧集。左上角的下拉列表是网络选择器。下面的列表视图是基于所选网络的节目选择器。当我按下Update时,我的PUT方法(包含在我的api中的相应Episodes控制器中)没有被调用。

Kendo Grid屏幕截图 Kendo Grid Screenshot Showing Update Button Pressed

如何在确认编辑新记录时调用PUT方法?

我对此场景的api设计如下

api / networks - 显示数据库中的网络列表

api / shows / {NetworkCode} - 显示网络中存在的数据库中的节目列表

api / episodes / {NetworkCode} / {ShowCode} - 显示网络内和特定节目中的剧集列表

路线模板

        config.Routes.MapHttpRoute(
          name: "DefaultApi",
          routeTemplate: "api/{controller}/{NetworkCode}/{ShowCode}/{id}",
          defaults: new { NetworkCode = RouteParameter.Optional, ShowCode = RouteParameter.Optional, id = RouteParameter.Optional }              
        );
    }

显示GET api调用的浏览器调试程序屏幕截图

Debugger screenshot showing only Get methods being triggered

客户代码

var networkCode;
var showName;
var networkDS = new kendo.data.DataSource({
    transport: {
        read: {
            url: "api/networks",
            dataType: "json"
        }
    }
});

var showDS = new kendo.data.DataSource({
    transport: {
        read: {
            url: "",
            dataType: "json"
        }
    }
});

var episodeDS = new kendo.data.DataSource({
    transport: {
        read: {
            url: "",
            dataType: "json",
            type: "GET"
        },
        create: {
            url: "api/episodes/0",
            dataType: "json",
            type: "PUT"
        },
        update: {
            url: "api/episodes",
            dataType: "json",
            type: "PUT"
        }
    }
});

function getEpisodes(networkCode, showCode, selectedShowName ) {
    showName = selectedShowName;
    $(".showSpan").remove();
    $(".k-toolbar").prepend("<span class='showSpan'>"+showName+"</span>");
    episodeDS.transport.options.read.url = "api/episodes/" + networkCode + "/" + showCode;
    $("#episodes").data('kendoGrid').dataSource.read();
}

$("#shows").kendoListView({
    dataSource: showDS,
    template: $("#listTemplate").html()
});

$("#episodes").kendoGrid({
    editable: "inline",
    edit: function onEdit(){
    },
    dataSource: episodeDS,
    toolbar: [{
        text: "Add Episode",
        className: "k-grid-add",
        imageClass: "k-icon k-add"
    }],
    columns: [{
        field: "EpisodeTitle",
        title: "Episode Title",
        width: 200
    },
    {
        field: "ShowName",
        title: "Show Name",
        width: 200
    },
    {
        field: "NetName",
        title: "Network Name",
        width: 200
    },
    {
        command: ["edit", "destroy"],
        title: "&nbsp;",
        width: 200
    }],
});

$("#networks").kendoDropDownList({
    dataSource: networkDS,
    dataTextField: "Name",
    dataValueField: "Code",
    template: $("#item").html(),
    change: function (e) {
        //alert(e.sender.value());
        networkCode = e.sender.value();
        fetchShows(networkCode);
    },
    dataBound: function () {
        networkCode = $("#networks").data("kendoDropDownList").value();
        fetchShows(networkCode);
    }
});

function fetchShows(networkCode) {
    //Point to Shows List
    showDS.transport.options.read.url = "api/shows/" + networkCode;
    //Refresh Data
    $("#shows").data('kendoListView').dataSource.read();
}

$(document).ready(function () {
    fetchShows($("#networks").data("kendoDropDownList").value());
});

1 个答案:

答案 0 :(得分:0)

事实证明我需要在我的数据源中包含一个模式定义,如我在以下帖子中所建议的那样。

https://stackoverflow.com/a/21833949/1691103

下面的修订数据源代码

var episodeDS = new kendo.data.DataSource({
        schema: {
            model: {
                id: "Id",
                fields: {
                    Title: { editable: true, validation: { required: true } },
                    Show: { validation: { required: true } },
                    Nework: { validation: { required: true } }
                }
            }
        },
        transport: {
            read: {
                url: "",
                dataType: "json",
                type: "GET"
            },
            create: {
                url: "api/episodes/0",
                dataType: "json",
                type: "PUT"
            },
            update: {
                url: "api/episodes/0",
                dataType: "json",
                type: "PUT"
            }
        }
    });