Question

我有以下代码：

<div id="loading" style="display:none; color:red">
Loading.....
</div>

<a  OnClick ="return ShowPanel();"  href="@Url.Action("DownloadReport", "Downloader", new {ReportId = id}, null)">download report<</a>

<script type ="text/javascript">
 function ShowPanel()
 {
    var pnl = document.getElementById("loading");
    pnl.style.display='block';
    return true;
 }
</script>

在我的控制器中，我通过弹出下载窗口返回文档：

return myDocument.ExportAsActionResult("myDoc.docx", FormatType.Docx, HttpContext.ApplicationInstance.Response, HttpContentDisposition.Attachment);

因此页面本身不刷新，因此我不能依赖#loading在刷新时返回“display.none”。因此它保持“正在加载......”

如果出现“下载文档”弹出窗口，如何删除“正在加载.....”。当我可以在下载窗口出现时成功使这个div不可见时，我可能会交换加载微调器。

提前致谢。

修改

<a href = "#" onclick="callDownloadReport(1059);" >download report</a>

<script type ="text/javascript">
function callDownloadReport(ReportId) {
$.ajax({
    url: 'Downloader/DownloadReport',
    data: { ReportId: ReportId },
    success: function () {
        var pnl = document.getElementById("loading");
        pnl.style.display = 'none';
    },
    error: function () {
    }
});
}
</script>

EDIT2

网址应该是什么：

http://localhost:2000/Downloader/DownloadReport?ReportId=1059

Ajax函数产生的内容：

http://localhost:2000/Section/Query/1059/Downloader/DownloadReport?ReportId=1059

最终编辑：

我最终使用了Ajax.Actionlink。但是，“返回文件”类型命令不适用于Ajax。您需要使用iframe：

<script type ="text/javascript">


$(function () {
    $('#DownloadDoc').click(function () {

        $('#Document').html(
            $('<iframe/>', {
                src: this.href,
                width: '1px',
                height: '1px'
            })
        );
        return true;
    });
});

</script>

我发现Ajax.Actionlink在MVC asp.net的上下文中最有用。如果要将锚标记包装在其他内容周围，请直接使用生成的HTML，即：

<a data-ajax="true" data-ajax-begin="ajaxStart" data-ajax-complete="ajaxStop" data-ajax-method="Get" href="@Url.Action("DownloadDoc", "Downloader", new {ReportId = Model.First().ReportId }, null)" id="DownloadDoc">

我使用“data-ajax-begin”和“data-ajax-complete”来显示和隐藏进度微调器。但是我注意到时间可能已经完成，即浏览器微调器仍在运行，并且此下载微调器已完成。有一个名为“LoadingElementId”的属性可能更好。需要测试。

希望以上帮助某人。

感谢大家的帮助。

Answer 1

您可以点击链接对您的操作方法执行$ .ajax（）调用。在此ajax调用的Success回调中，您可以禁用“Loading ...”div。

如果您在调用$ .ajax（）时遇到问题，请告诉我。

更新：请修改你的锚标签。

<a href="#" onclick="callDownloadReport('@Model.ReportId');">download report</a>

并且，像这样修改你的javascript。

function callDownloadReport(reportId) {
    $.ajax({
        url: 'Downloader/DownloadReport',
        data: { ReportId: reportId },
        success: function () {
            var pnl = document.getElementById("loading");
            pnl.style.display = 'none';
        },
        error: function () {
        }
    });
}

我还没有测试过这段代码，但我确信你会对我在这里指出的内容有所了解。

试图让我的“loading ...”div与MVC3一起工作

1 个答案: