Kendo UI Core - Загрузка - Как вызвать контроллер MVC

Для Kendo UI Core (согласно вашему вопросу, вызывающему действие контроллера для загрузки файлов): -

$("#files").kendoUpload({
async: {
    saveUrl: "controllername/actionname",    //OR// '@Url.Action("actionname", "controllername")'   
    removeUrl: "controllername/actionname",  //OR// '@Url.Action("actionname", "controllername")'
    autoUpload: true
  }
});

Например, если имя контроллера и действия — Upload и Save для сохранения и удаления загруженных файлов, имя контроллера и действия — Upload и Remove, то :-

 $("#files").kendoUpload({
 async: {
    saveUrl: "Upload/Save",     //OR// '@Url.Action("Save", "Upload")'
    removeUrl: "Upload/Remove", //OR// '@Url.Action("Remove", "Upload")'
    autoUpload: true
  }
});

Небольшая демонстрация загрузки файла кендо (для веб-интерфейса кендо): -

Вид :-

<form method="post" action='@Url.Action("Submit")' style="width:45%">
    <div class="demo-section">
        @(Html.Kendo().Upload()
            .Name("files")
        )
        <p>
            <input type="submit" value="Submit" class="k-button" />
        </p>
    </div>
</form>

Контроллер: -

 public ActionResult Submit(IEnumerable<HttpPostedFileBase> files)
    {
        if (files != null)
        {
            TempData["UploadedFiles"] = GetFileInfo(files);
        }

        return RedirectToAction("Index");
    }

 private IEnumerable<string> GetFileInfo(IEnumerable<HttpPostedFileBase> files)
    {
        return
            from a in files
            where a != null
            select string.Format("{0} ({1} bytes)", Path.GetFileName(a.FileName), a.ContentLength);
    }

Полная документация находится здесь: - http://demos.telerik.com/aspnet-mvc/upload/index

Для асинхронной загрузки файла: -

Вид :-

<div style="width:45%">
    <div class="demo-section">
        @(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .Save("Save", "Upload")
                .Remove("Remove", "Upload")
                .AutoUpload(true)
            )
        )
    </div>
</div>

Контроллер: -

 public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
        {
            // The Name of the Upload component is "files"
            if (files != null)
            {
                foreach (var file in files)
                {
                    // Some browsers send file names with full path.
                    // We are only interested in the file name.
                    var fileName = Path.GetFileName(file.FileName);
                    var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                    // The files are not actually saved in this demo
                    // file.SaveAs(physicalPath);
                }
            }

            // Return an empty string to signify success
            return Content("");
        }

        public ActionResult Remove(string[] fileNames)
        {
            // The parameter of the Remove action must be called "fileNames"

            if (fileNames != null)
            {
                foreach (var fullName in fileNames)
                {
                    var fileName = Path.GetFileName(fullName);
                    var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                    // TODO: Verify user permissions

                    if (System.IO.File.Exists(physicalPath))
                    {
                        // The files are not actually removed in this demo
                        // System.IO.File.Delete(physicalPath);
                    }
                }
            }

            // Return an empty string to signify success
            return Content("");
        }

У меня был момент "Duh" с этим, и я понял, что если вы не укажете свойство .SaveField, то имя элемента управления должно быть таким же, как параметр в контроллере.

Код на странице .cshtml с SaveField:

Html.Kendo().Upload()
     .Multiple(false)
     .Name("controlName")
     .Async(a => a
         .Save("SavePhoto", "Upload")
         .AutoUpload(true)
         .SaveField("fileParameter")
     );

Пример контроллера:

public ActionResult SavePhoto(IFormFile fileParameter)

Если вы пропустите SaveLoad:

Html.Kendo().Upload()
     .Multiple(false)
     .Name("uploadFiles")
     .Async(a => a
         .Save("SavePhoto", "Upload")
         .AutoUpload(true)             
     );

Это не будет работать. При этом имя элемента управления должно совпадать с параметром в контроллере:

public ActionResult SavePhoto(IFormFile uploadFiles)

Настройте обертки, чтобы сэкономить время

@(Html.Kendo().Upload().HtmlAttributes(new { Style = "width:300px;" })
    .Name("upImport")
    .Messages(e => e.DropFilesHere("Drop files here").Select("Select file"))
    .Multiple(false)

    .Async(a => a
        .Save("UploadFile", "File")
        .Remove("RemoveFile", "File")
        .AutoUpload(true)
        .SaveField("files")
    )

    .Events(events => events
        .Error("onError")               
        .Success("onSuccess")
    )
)

В приложении mvc вашего сервера может быть FileService.UploadFile() или что-то подобное.

public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> files)
{
    ServerFileModel model = new ServerFileModel();
    try
    {
        // The Name of the Upload component is "files" 
        if (files == null || files.Count() == 0)
            throw new ArgumentException("No files defined");
        HttpPostedFileBase file = files.ToArray()[0];

        if (file.ContentLength > 10485760)
            throw new ArgumentException("File cannot exceed 10MB");

        file.InputStream.Position = 0;
        Byte[] destination = new Byte[file.ContentLength];
        file.InputStream.Read(destination, 0, file.ContentLength);

        //IGNORE THIS
        ServerFileFormatEnum type = TempFileStorageController.GetFileFormatForExtension(Path.GetExtension(file.FileName));
        ServerFileDescriptor serverFile = TempFileStorageController.AddFile(destination, type);
        //IGNORE ABOVE

        model.FileIdentifier = serverFile.FileIdentifier;
        model.FileName = file.FileName;
        model.FileSize = file.ContentLength;
    }
    catch (Exception e)
    {
        model.UploadError = e.Message;
    }
    return Json(model, JsonRequestBehavior.AllowGet);
}

Наконец это сработало:

Это работало следующим образом.

   $("#files").kendoUpload({
        async: {
            saveUrl: '@Url.Action("Save", "Home")',
            removeUrl: '@Url.Action("Remove", "Home")',
            autoUpload: false
        }

    });

Вот как я сделал вызов оконного элемента управления Kendo UI, и он работал так же, как для загрузки

Сохранить — это действие (функция), а дом — имя класса контроллера.