我有一个Kendo-UI Grid,标题中有一个添加按钮。网格允许编辑特定节目和网络的剧集。左上角的下拉列表是网络选择器。下面的列表视图是基于所选网络的节目选择器。当我按下Update时,我的PUT方法(包含在我的api中的相应Episodes控制器中)没有被调用。
Kendo Grid屏幕截图
如何在确认编辑新记录时调用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调用的浏览器调试程序屏幕截图
客户代码
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: " ",
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());
});
答案 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"
}
}
});