网格内的Kendo UI上传

时间:2014-02-11 14:24:47

标签: asp.net-mvc kendo-ui kendo-grid kendo-upload

我正在尝试使用网格内部的Kendo上传来实现Kendo UI Grid。当我使用ASP.NET MVC时,我没有使用Telerik MVC Wrappers。我试图在没有他们的情况下这样做。

我遇到的问题是IEnumerable HttpPostedFileBase在回发给我的Action方法时为null。

JavaScript的:

$(document).ready(function () {

        var dsGalleryItemFile = new kendo.data.DataSource({
            transport: {
                read:   "@Url.Content("~/Intranet/GalleryItemFile/ListFiles/")@Model.galleryItemID",
                update: {
                    url: "@Url.Content("~/Intranet/GalleryItemFile/UpdateFile")",
                    type: "POST"
                },
                destroy: {
                    url: "@Url.Content("~/Intranet/GalleryItemFile/DeleteFile")",
                    type: "POST"
                },
                create: {
                    url: "@Url.Content("~/Intranet/GalleryItemFile/CreateFile/")@Model.galleryItemID",
                    type: "POST"
                }
            },
            // determines if changes will be send to the server individually or as batch
            batch: false,
            schema: {
                model: {
                    id: "fileID",
                    fields: {
                        fileID: {
                            editable: false,
                            nullable: true
                        },
                        filename: {},
                        fileType: { defaultValue: {fileTypeID: 1, fileType: "Web JPEG"} },
                        fileType: {},
                        width: { type: "number" },
                        height: { type: "number" },
                        }
                    }
                }
        });

        $("#gvGalleryItemFile").kendoGrid({
            columns: [{
                field: "filename",
                title: "Filename" 
            }, {
                field: "filepath",
                title: "File Upload",
                editor: fileUploadEditor//,
                //template: "<img src='#=filepath.filepath#' />"
            }, {
                field: "fileType",
                title: "File Type",
                editor: fileTypeDropDownEditor,
                template: "#=fileType.fileType#",

            }, {
                field: "width",
                title: "Width"
            }, {
                field: "height",
                title: "Height"
            }, {
                command: ["edit", "destroy"]
            }],
            editable: { mode: "inline" },
            toolbar: ["create"],
            dataSource: dsGalleryItemFile
        });


    });

    function fileTypeDropDownEditor(container, options) {
        $('<input required data-text-field="fileType" data-value-field="fileTypeID" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    transport: {
                        read: "@Url.Content("~/Intranet/FileType/ListFileTypes")"
                    }
                }
            });
    }

    function fileUploadEditor(container, options) {
        $('<input type="file" name="fileUpload" id="fileUpload" />')
            .appendTo(container)
            .kendoUpload({
                async: {
                    saveUrl: "@Url.Content("~/Intranet/GalleryItemFile/UploadFile")"
                },
                complete: onUploadComplete
            });
    }

MVC行动:

[HttpPost]
    public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> uploadedFiles)
    {
        if (uploadedFiles != null)
        {
            foreach (var thisFile in uploadedFiles)
            {
                string newFileName = Path.GetFileName(thisFile.FileName).Replace(" ", "");
                var physicalPath = Path.Combine(Server.MapPath("~/Areas/Gallery/Content/GalleryImages"), newFileName);
                thisFile.SaveAs(physicalPath);

            }
            return Content("");
        }
        else
        {
            return Content("Error");
        }

    }

1 个答案:

答案 0 :(得分:3)

尝试以与您转换为上传窗口小部件的输入的名称属性相同的方式命名操作方法签名中的参数参数。

在你的情况下

public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> fileUpload)