下载文件 - 带有 Jquery 的 Asp.net MVC答案

【问题标题】：Download File - Asp.net MVC with Jquery下载文件 - 带有 Jquery 的 Asp.net MVC
【发布时间】：2014-02-24 13:17:57
【问题描述】：

我正在使用 JQUERY MVC 下载文件。用户单击按钮并下载文件看起来很简单。

我的 Jquery 活动

$(document).on("click", "#download", function () {
    $.blockUI();
    window.location = "../Home/Download";
    $.unblockUI();
    }

并调用我的服务器端

public ActionResult Download()
    {
    return File();
    }

一切都很好，除了正在使用 Block UI（Jquery 插件）让用户知道 正在下载...“请稍候”

一旦下载完成，我需要解锁 UI 并让用户保存/打开文件。我怎样才能修改上面的代码来实现这个或任何其他想法？？

目前我的 c# 代码被调用并且 jquery 中的下一行被执行并且块 ui 是 Gone next sec。我怎样才能让这个过程等到下载完成？

【问题讨论】：

标签： jquery asp.net-mvc download

【解决方案1】：

您不需要window.location。您可以使用jQuery 简单地创建一个iframe 并将其url 设置为您的操作。要取消阻止 UI .load 方法可以使用。您还需要在您的 html 中创建一个隐藏容器，该容器将包含 iframe，使其保持隐藏状态。

<div id="DivIframeContainer" style="display:none;" />

$(document).on("click", "#download", function () {
    $.blockUI();       
var iframe = $("<iframe/>").load(function () {
     $.unblockUI();
}).attr({
    src: "../Home/Download"
}).appendTo($("#DivIframeContainer"));
    }

【讨论】：

无法在 IE8 中工作是问题！有什么解决办法吗？
不！只是块用户界面冻结！猜测 unblock ui 没有被调用
不...在阻止 UI 之后什么都没有出现...!!!那么流程是如何工作的......任何链接？ load 和 ready 类似吗？
Here 你可以找到关于负载的信息。但您需要调试无法正常工作的部分。
不，你的代码没问题。因为当我删除 src 属性时 UnblockUI 运行成功。我认为是控制器中的返回。我的 actionresult 很好，没有包含错误，但看起来像“return File(ms, @"application/vnd.openxm......”不喜欢你的代码。lol

【解决方案2】：

用户与文件下载交互的方式应由浏览器决定。

在您的示例中，您的 UI 会告诉他们文件正在下载，而实际上浏览器会做同样的事情。

您应该简单地使用将 href 设置为下载位置的锚点：

<a href="downloadlinkhere"> Download </a>

【讨论】：

对！！！但它只是加载，因此用户可能会在等待时再次单击某些内容或相同的内容。 tatz WY 阻止了 UI
对，但我的意思是这是一个浏览器 UX 问题，而不是一个编码问题 - 除非有任何特定原因，您不希望您的用户在点击两次时下载 2 次，那么你应该让浏览器做它的事情。

【解决方案3】：

您可以通过 AJAX 调用您的服务器端。下面是一个关于如何在进行 ajax 调用时阻止 UI 的示例。

将 Block/Unblock 方法附加到 $(document).ready 函数。每次进行 AJAX 调用时，都会阻止 UI。

$(document).ready(function () {

}).ajaxStart(function () {
    $.blockUI();
}).ajaxStop(function () {
    $.unblockUI();
});

$(document).on("click", "#download", function () {
    DownloadFile();
}

function DownloadFile() {
    $.ajax({
        url: "../Home/Download",
        data: { null },
        success: function (data) {
            //Do something with data that is returned. (The downloaded file?)
        }
    });
}

【讨论】：