Question

我尝试从弹出窗口上传文件，验证服务器上的文件并将消息发送回客户端。此消息必须出现在上载控件所在的同一弹出窗口中。（不在父页面上）我使用Kendo窗口弹出窗口和剑道上传控制。我正在尝试使用上传控件同步上传文件。上传控件位于弹出窗口中。我已将javascript“Success”事件附加到上传控件，但Success事件永远不会被触发。

问题：
1. Action方法返回JSON消息，但是Javascript Success事件永远不会在客户端被触发，所以我无法处理响应消息。（它只会因异步操作而被解雇吗？）
2.其他选项是，我可以在ModelState中添加消息并返回上传视图而不是JSON，但是当返回视图时，上传视图不会显示为弹出窗口，而是显示为页面并且URL也会更改。
3.如何配置“确定”按钮以使其不会关闭弹出窗口。

异步上传我在这里的唯一选项吗？

注意：我没有使用异步选项，因为Telerik报告here IE没有报告进度条，反过来选择的文件不会每次都上传到服务器。所以我想即使我禁用进度条上传仍然会有问题。但是我找不到关于这个问题的任何细节。如果Kendo Upload gurrantees如果我禁用进度条，它将上传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，请尝试以下操作：

将获得的JSON解析为$ .parseJSON（e.XMLHttpRequest.responseText）并将其分配给变量。
使用已解析的响应调用ShowMessage（）。

function onSuccess（e）{ var msg = $ .parseJSON（e.XMLHTTPRequest.responseText）; ShowMessage（MSG）; }

Answer 2

我遇到了同样的问题，通过使用内联java脚本函数解决了Kendo FileUpload的.Event问题：

@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>
}

MVC5＆amp; HTML5：如何从弹出窗口上传文件并返回消息

2 个答案: