JQuery UI Dialog вызывает действие, которое возвращает поток ответов HttpContect в MVC 3

Question

У меня есть собственное расширение контроллера для возврата файла Excel в виде ответа HttpContext.

Мое действие контроллера выглядит следующим образом:

public ActionResult ExportToExcel()
{
    return this.Excel(headers, results, filename);
}

Это прекрасно работает с обычным обратным вызовом MVC.

Я пытаюсь создать диалоговое окно jQuery UI, где пользователь может ввести имя файла и нажать «Экспорт». При нажатии кнопки «Экспорт» в контроллере вызывается действие MVC, но файл не отображается в браузере.

Мой код диалога:

$("#export-excel").dialog({
            autoOpen: false,
            modal: true,
            title: "Export to Excel",
            buttons: {
                Export: function () {
                    $.post("/Search/ExportToExcel",
                    function () {
                        $("#export-excel").dialog("close");
                    });
                }
            }
        });

        $("#export-excel-button").click(function () {
            $("#export-excel").dialog("open");
            return false;
        });

И HTML:

<div id="export-excel" style="display: none;">
    Filename:
    <input type="text" value="Results.xls"/>
</div>
<input type="button" value="Export" id="export-excel-button" />

Answer 1

Проблема в том, что вы вызываете свое действие, которое возвращает данные файла в виде функции AJAX.

Вы должны заставить браузер регулярно отправлять запрос на ваше действие, чтобы вызвать нормальное поведение загрузки браузеров.

Самый простой способ - установить свойство windows.location.href в javascript:

buttons: {
     Export: function () {
         $("#export-excel").dialog("close");
         window.location = "/Search/ExportToExcel?...

sidenote: вы должны использовать Url.Action() для генерации URL вашего действия.

Answer 2

Как разрешить загрузку файла, который возвращается как двоичные данные из AJAX

У меня была такая же проблема несколько дней назад.Вы делаете AJAX-вызов для своего действия, поэтому ваш файл возвращается в функцию обратного вызова.Если вы измените свой метод кнопки на:

//...
Export: function () {
    $.post("/Search/ExportToExcel",
        function (myFileData) {
             $("#export-excel").dialog("close");
        });
    }

Вы получите бинарный массив вашего файла в параметре myFileData.Я решаю это так:

Export: function () {
     $("#export-excel").dialog("close");
     window.location = "/Search/ExportToExcel?name=" + $('#filename').val();
}

<div id="export-excel" style="display: none;">
    Filename:
    <input id="filename" type="text" value="Results.xls"/>
</div>
<input type="button" value="Export" id="export-excel-button" />


public ActionResult ExportToExcel(string name)
{
     return this.Excel(headers, results, name);
}