javascript - 通过 Ajax 从 Action 返回结果时出错

Question

我的 View 中有一个 devexpress 网格和一个执行导出数据操作的提交按钮。如果我这样做，它会执行操作并向我返回下载文件:

@using (Html.BeginForm("Export","Product"))
{
   <input type="submit" value="export"/>
}

但是如果我像这样提交:

function OnCommandExecuted(s, e) {
    if (e.item.name == "SendData") {
        $.ajax({
            url: '/Product/Export'
        });
    }
}

js正常调用并执行action，但没有返回下载。

我的操作代码:

    [HttpPost]
    public ActionResult Export()
    {
       return GridViewExtension.ExportToXls(CreateExportGridViewSettings(),  Session["product"] as List<Product>);
    }

我在操作中放置了一个断点，并且 javascript 代码正常调用该操作，但它不返回下载(没有任何错误)。我在这里缺少什么？

Answer 1

您不应该使用 AJAX 来下载文件。但如果你想使用 JQuery AJAX 进行文件下载，那么你可以在 JQuery 中使用 window.open() 并打开文件资源 URL，从而触发下载。

让 Action 返回包含文件资源 URL 的 Json 数据 -

    public ActionResult Download(string fileId)
    {
        return new JsonResult(){ Data = "File URL to Download using fileId, probably with some querystrings", JsonRequestBehavior = JsonRequestBehavior.AllowGet};
    }

然后在你的 JQuery 中 -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    function submitForm() {
        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("Download")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ fileId: "123"}),
            success: function (data) {
                window.open(data, "_blank");
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
</script>

<input type="button" value="Click" onclick="submitForm()" />

然后，当您单击按钮时，指向该文件的 URL 将从 Action 方法返回到 JQuery。然后 JQuery 在新窗口中打开该 URL 并下载文件。

或者，您也可以尝试像JQuery FileDownload这样的插件它提供了下载文件时的 AJAX 体验。