MVC5 и HTML5: как загрузить файл из всплывающего окна и вернуть сообщения

Я пытаюсь загрузить файл из всплывающего окна, проверить файл на сервере и отправить сообщение обратно клиенту. Это сообщение должно появиться в том же всплывающем окне, где находится управление загрузкой. (не на родительской странице) Я использую окно Kendo для управления всплывающими окнами и загрузкой Kendo. Я пытаюсь синхронно загрузить файл, используя управление загрузкой. Управление загрузкой находится во всплывающем окне. Я прикрепил событие javascript «Успех» к элементу управления загрузкой, однако событие «Успех» никогда не запускается.

Проблемы:
1. Метод действия возвращает сообщение JSON, однако событие Javascript Success никогда не запускается на клиенте, поэтому я не мог обработать ответное сообщение. (он запускается только для асинхронной операции?)
2. Другой вариант: я могу добавить сообщение в ModelState и вернуть представление загрузки вместо JSON, однако, когда представление возвращается, представление загрузки не отображается как всплывающее окно. вместо этого он отображается как страница, а также изменяется URL-адрес.
3. Как мне настроить кнопку OK, чтобы она не закрывала всплывающее окно.

Является ли асинхронная загрузка единственным доступным мне вариантом?

ПРИМЕЧАНИЕ. Я не использую асинхронный вариант, поскольку, как сообщил Телерик, здесь, что IE не сообщает о индикаторе выполнения и, в свою очередь, выбранный файл не загружается на сервер каждый раз . Поэтому я думаю, что даже если я отключу загрузку индикатора выполнения, проблема все равно будет. Но никаких подробностей по этому вопросу я не нашел. Если Kendo Upload гарантирует, что если я отключу индикатор выполнения, он будет загружать каждый файл в IE 10,11, тогда я могу рассмотреть возможность использования асинхронной опции.
4. В этой заметке, как мне отключить индикатор выполнения?

Это индексная страница (родительская страница)

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
 }
<script src="~/Scripts/FileUpload.js"></script>

<script>
    $(document).ready(function () {
    var uploadwindow = $("#uploadwindow");
    $("#btnUploads").click(function (e) {
        uploadwindow.data("kendoWindow")
            .open()
            .center();
    });

});
</script>

<p/><p />
<button type="button" id="btnUploads">Show Window</button>

@(Html.Kendo().Window()
 .Name("uploadwindow") 
 .Title("Select the file to upload")
 .Draggable()
 .Resizable()
 .Width(600) 
 .Modal(true)
 .Visible(false)
 .LoadContentFrom("Upload", "FileUpload")
)

Всплывающее окно

@using (Html.BeginForm("Upload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @(Html.Kendo().Upload()
        .Name("file")
        .Multiple(false)
        .Events(x => x.Success("onSuccess"))
    )    
    <button type="submit">Ok</button>
}

FileUpload.js

function onSuccess(e) {
    //my custom method to show message
    ShowMessage(e.response.message);    
}

MVC-контроллер

public class FileUploadController : Controller
{   
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Upload()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Upload(HttpPostedFileBase file)
    {
        return Json(new { message = "This is from server" }, "text/plain");

        //Option 2
        // if i return View here then it does not appear as popup instead it renders as page

        //ModelState.AddModelError("Some error");
        //return View();
    }
}

person LP13    schedule 20.05.2015    source источник


Ответы (2)


В функции onSuccess вместо прямого отображения сообщения как e.response.message попробуйте следующее:

  1. проанализируйте JSON, полученный как $.parseJSON(e.XMLHttpRequest.responseText), и назначьте его переменной.
  2. Вызовите ShowMessage() с проанализированным ответом.

    function onSuccess(e) { var msg = $.parseJSON(e.XMLHTTPRequest.responseText); ПоказатьСообщение (сообщение); }

person Adersh M    schedule 20.05.2015
comment
если вы читаете мой вопрос, в нем говорится, что событие OnSuccess вообще не срабатывает при синхронной загрузке. - person LP13; 20.05.2015

У меня была такая же проблема, она решается с помощью встроенной функции java-скрипта для .Event Kendo FileUpload :

@using (Html.BeginForm("Upload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@(Html.Kendo().Upload()
    .Name("file")
    .Multiple(false)
    .Events(x => x.Success(@<text>function(e) { /*your event handler code*/ )}</text>))
)    
<button type="submit">Ok</button>
}
person R. Tizvar    schedule 28.11.2015