asp.net MVC - MVC5 和 HTML5：如何从弹出窗口上传文件并返回消息

Question

我试图从弹出窗口上传文件，验证服务器上的文件并将消息发送回客户端。此消息必须出现在上传控件所在的弹出窗口中。(不在父页上)我使用剑道窗口弹出& &;剑道上传控制。我试图同步使用上传控制上传文件。上传控件驻留在弹出窗口中。我已经将javascript"成功"事件附加到上传控件，但是成功事件从未被触发。

问题:
1. Action方法返回JSON消息，但是Javascript成功事件从未在客户端被触发，所以我无法处理响应消息。(它只被异步操作触发吗?)
2. 另一种选择是，我可以在ModelState中添加消息并返回上载视图而不是JSON，但是当返回视图时，上载视图不会显示为弹出窗口，而是显示为页面，URL也会更改。
3.我如何配置OK按钮，使它不会关闭弹出窗口。

异步上传是我在这里的唯一选择吗?

注意:我没有使用异步选项，因为正如Telerik在这里报告的那样，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();
    }
}

Answer 1

在onSuccess函数中，不要直接将消息显示为e.response.message，试试下面的方法:

1. 解析获得的JSON为$. parsejson (e.m xmlhttprequest . responsetext)，并将其分配给一个变量。

2. 使用解析的响应调用ShowMessage()。

   函数onSuccess(e) {var msg = $.parseJSON(e.m xmlhttprequest . responsetext);ShowMessage(味精);}

Answer 2

我有同样的问题，它是通过使用内联java脚本函数解决的。event of 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>
}