Kendo Ui文件无法上传服务器

时间:2013-05-31 17:14:32

标签: telerik kendo-ui kendo-grid

我是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: "&nbsp;", 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>

0 个答案:

没有答案