我是kendo ui开发的新手。我有一个带按钮的数据网格,当我点击按钮弹出窗口将从那里显示我上传文件到服务器。当我上传文件到服务器,文件正在加载,响应没有返回。为了测试,我在postman rest客户端上以chrome扩展名上传了文件,确认了来自服务器的响应。 请任何人指导我。我已经用这个错误超过三天了。
我到目前为止尝试过的代码。请帮助我
<html>
<head>
<title>Binding to remote data</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<script type="text/x-kendo-template" id="productsEditTemplate">
<label for="price">UnitPrice</label><input data-bind="value: UnitPrice" name="price"/><br/>
<label for="discounted">Discontinued</label><input data-bind="value: Discontinued" name="discounted"/><br/>
<label for="unitsInStock">UnitsInStock</label><input data-bind="value: UnitsInStock" name="unitsInStock"/><br/>
<input type="hidden" id='uploadedFile' data-bind="value: ProductName" />
<input type="file" id="files" data-role="upload"
data-async='{"saveUrl": "/Home/test","autoUpload": "true"}' data-success="onSuccess" name="files" />
</script>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
UnitPrice: { type: "number"},
Discontinued: {type: "boolean"},
UnitsInStock: {type: "number"},
ProductName: {type: "string", defaultValue: ""}
}
}
}
});
$("#grid").kendoGrid({
scrollable: false,
dataSource: dataSource,
toolbar: ["create"],
columns: [
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 150 },
{ field: "Discontinued", title: "Discontinued", width: 150 },
{ field: "UnitsInStock", title: "UnitsInStock", width: 150 },
{ field: "ProductName", title: "FileName", width: 150 },
{ command: ["destroy", "edit"], title: " ", width: 250 }],
editable: {
mode: "popup",
template: kendo.template($("#productsEditTemplate").html())
},
save: function(e,c){
e.model.set("ProductName",$("#uploadedFile").val());
}
});
});
function onSuccess(e){
$("#uploadedFile").val(e.files[0].name);
}
</script>
</div>