Asp.net mvc 剑道上载控件移除事件没有响应

我有一个剑道上传控件，如下所示：

@(Html.Kendo().Upload()
    .Name("attachments")
    .Async(a => a
        .Save("UploadAsync", "Intel")
        .Remove("RemoveAsync", "Intel")
        .AutoUpload(true)
    )
    .Events(e => e
        .Success("onSuccessfulUpload")
        .Remove("onRemoveFile")
    )
    .Validation(v => v.AllowedExtensions(exts))
)

public ActionResult UploadAsync(IEnumerable<HttpPostedFileBase> attachments)
{
    string filename;
    // ... do things ...
    return Json(new { ImageName = filename }, "text/plain");
}

在控制器中，其保存方法如下：

@(Html.Kendo().Upload()
    .Name("attachments")
    .Async(a => a
        .Save("UploadAsync", "Intel")
        .Remove("RemoveAsync", "Intel")
        .AutoUpload(true)
    )
    .Events(e => e
        .Success("onSuccessfulUpload")
        .Remove("onRemoveFile")
    )
    .Validation(v => v.AllowedExtensions(exts))
)

public ActionResult UploadAsync(IEnumerable<HttpPostedFileBase> attachments)
{
    string filename;
    // ... do things ...
    return Json(new { ImageName = filename }, "text/plain");
}

我验证了这两种控制器方法都被正确调用，并且变量

filename

在这两种情况下都被分配给了

上传按预期工作，成功事件也按预期工作。（此警报仅用于测试。）

问题在于删除文件

当我到达删除事件时，

e

没有

响应。它有
e.files
和
e.sender
，但没有响应

function onRemoveFile(e) {
    alert(e.response);                    // undefined!
    alert(JSON.stringify(e.files));       // works, but does not have what I need
}

如何访问
RemoveAsync
方法返回的内容？
事件似乎不提供此类数据，因此我只看到解决此问题的解决方法

您可以尝试将结果名称放在标题中，并且应该能够读取结果：

// Controller
Response.AddHeader("ImageName", imageName); // before Json(...)

// View/JS
alert(e.headers['ImageName']);

我还没有对此进行测试，我发现
remove
事件没有真正读取异步响应的风险，这就解释了
response
对象不可用的原因

在这种情况下，您可以尝试使用以下解决方法：在删除时不要调用任何Url（或者使用一些没有任何正文的操作，只是一个简单的结果），在事件回调内部，自己执行
removesync

// View/JS
function onRemoveFile(e) {
    $.post('@Html.Url("RemoveAsync", "Intel")', e.files, function(response) {
        alert(response);
    });
}

这并不漂亮，但它应该可以工作并提供您需要的结果。
看起来事件没有提供此类数据，因此我只看到解决此问题的解决方法

您可以尝试将结果名称放在标题中，并且应该能够读取结果：

// Controller
Response.AddHeader("ImageName", imageName); // before Json(...)

// View/JS
alert(e.headers['ImageName']);

我还没有对此进行测试，我发现
remove
事件没有真正读取异步响应的风险，这就解释了
response
对象不可用的原因

在这种情况下，您可以尝试使用以下解决方法：在删除时不要调用任何Url（或者使用一些没有任何正文的操作，只是一个简单的结果），在事件回调内部，自己执行
removesync

// View/JS
function onRemoveFile(e) {
    $.post('@Html.Url("RemoveAsync", "Intel")', e.files, function(response) {
        alert(response);
    });
}

这并不漂亮，但它应该可以工作并提供您需要的结果。
经过一段时间的探索，我找到了答案

关键在于事件的顺序。我的第一个假设是成功上传后调用成功事件，成功删除（？）后调用删除事件

事件的实际顺序为：

js onUpload>Controller.UploadAsync（）>js onSuccess

js onRemoveFile>Controller.removesync>js onSuccess

我用javascript创建了两个并行数组来表示上传到客户端e.files中的文件，其中包含每个文件的uid，以及由服务器端控制器方法（重命名文件）创建的文件名

当我发现有一个e.operation指定哪个操作是成功的时，我将
onSuccessfulUpload
函数更改为：

function onSuccess(e) {
    if (e.operation == "upload") {
        var filename = e.response.ImageName;
        var uid = e.files[0].uid;

        fileUids.push(uid);
        fileSaveNames.push(filename)
        // ...
    }
    else if (e.operation == "remove") {
        var uid = e.files[0].uid;
        var saveIdx = fileUids.indexOf(uid);

        fileSaveNames.splice(saveIdx, 1);
        fileUids.splice(saveIdx, 1);
        // ...
    }
}

然后我更新了
removeFile
函数，我现在知道它是在控制器中的方法之前调用的

function removeFile(e) {

    var uid = e.files[0].uid;
    var idx = fileUids.indexOf(uid);
    e.data = { fileToRemove: fileSaveNames[idx] };
}

e.data分配的原因是，它具有以下信息：

解决方案：定义上传功能所需的一切
事件并修改“数据”有效负载

在我的例子中，添加upload JS函数以添加参数“codeID”

$("#files").kendoUpload({
    [...]
    upload: function (e) {
        e.data = { codeID: $("#id").val() };
    }
});

现在在控制器上添加参数，就这样

[HttpPost]
public ActionResult Save(IEnumerable<HttpPostedFileBase> files, Guid codeID) { }

经过一段时间的摸索，我找到了答案

关键在于事件的顺序。我的第一个假设是成功上传后调用成功事件，成功删除（？）后调用删除事件

事件的实际顺序为：

js onUpload>Controller.UploadAsync（）>js onSuccess

js onRemoveFile>Controller.removesync>js onSuccess

我用javascript创建了两个并行数组来表示上传到客户端e.files中的文件，其中包含每个文件的uid，以及由服务器端控制器方法（重命名文件）创建的文件名

当我发现有一个e.operation指定哪个操作是成功的时，我将
onSuccessfulUpload
函数更改为：

function onSuccess(e) {
    if (e.operation == "upload") {
        var filename = e.response.ImageName;
        var uid = e.files[0].uid;

        fileUids.push(uid);
        fileSaveNames.push(filename)
        // ...
    }
    else if (e.operation == "remove") {
        var uid = e.files[0].uid;
        var saveIdx = fileUids.indexOf(uid);

        fileSaveNames.splice(saveIdx, 1);
        fileUids.splice(saveIdx, 1);
        // ...
    }
}

然后我更新了
removeFile
函数，我现在知道它是在控制器中的方法之前调用的

function removeFile(e) {

    var uid = e.files[0].uid;
    var idx = fileUids.indexOf(uid);
    e.data = { fileToRemove: fileSaveNames[idx] };
}

e.data分配的原因是，它具有以下信息：

解决方案：定义上传功能所需的一切
事件并修改“数据”有效负载

在我的例子中，添加upload JS函数以添加参数“codeID”

$("#files").kendoUpload({
    [...]
    upload: function (e) {
        e.data = { codeID: $("#id").val() };
    }
});

现在在控制器上添加参数，就这样

[HttpPost]
public ActionResult Save(IEnumerable<HttpPostedFileBase> files, Guid codeID) { }

我查看了事件的顺序：js onUpload>Controller.UploadAsync（）>js onSuccess。。。js onRemoveFile>Controller.removesync>js onSuccess都在转到控制器之前转到特定事件，然后转到成功事件。这就是为什么我可以在上传后得到JSON响应，因为它发生在那个成功事件中。。。js onRemoveFile>Controller.removesync>js onSuccess都在转到控制器之前转到特定事件，然后转到成功事件。这就是为什么我可以在上传后得到JSON响应，因为它发生在那个成功事件中。