AJAX Post to download file using MVC

Question

I have to do this because the page I'm working with already has a <form> submission in the area, so I need to use AJAX to get around of the <form> within a <form> problem.

The problem is that my file is not being sent to the web page, my page gets a 200 OK response status but no file is sent.

AJAX call on Responses.vbhtml:

function exportCsv()
    {
    var formExportSettings = new Object();
    var responseIdsList = [];
    formExportSettings.formId = '@Model.form.formId.ToString()';
    formExportSettings.exporttype = 'csv';
    formExportSettings.format = $('input[name=export-format]:checked').val();
    formExportSettings.startDate = $('input[id=exportstartdate]').val();
    formExportSettings.endDate = $('input[id=exportenddate]').val();

    $('input[name=responseId]:checked').map(function() {
        responseIdsList.push($(this).val());
    });

    formExportSettings.responseIds = responseIdsList;
    var jsonData = JSON.stringify(formExportSettings);
        $.ajax({
            url: '/Forms/ExportCsv',
            type: 'POST',
            dataType: 'json',
            data: jsonData,
            contentType: 'application/json; charset=utf-8',
            success: function (success) {
                // never get the success message
                var message = success;
                console.log(message);
            }
        });
    }

MVC controller action:

   Function ExportCSV(model As FormsExportSettings) As ActionResult
        Dim exportModel As FormsExportModel = New FormsExportModel(model)

        Try
            Dim fileName = exportModel.form.formName + ".csv"

            Response.Clear()
            Response.Buffer = True
            Response.ClearContent()
            Response.ClearHeaders()
            Response.ContentType = "text/csv"
            Response.AddHeader("Content-Disposition", "attachment;filename=" & fileName)
            Response.BinaryWrite(exportModel.writer.ExportToBytes())
            Response.Flush()
            Response.End()

        Catch ex As Exception

        End Try
    End Function

The writer in the above section (exportModel.writer.ExportToBytes()) is of type CsvExport() which exports my Csv as raw UTF8 bytes.

EDIT: I just noticed that i receiving the CSV file as a Response. In Chrome, i can pull up the dev console, go to Network, and view the Response and i see the text of the CSV file. It is just not giving me the option to save it.

MVC + jQuery example: http://stackoverflow.com/a/21464346/423430 — user423430, Mar 25 '15 at 15:56
This seems helpful but it looks like it is not using the standard .ajax method. — MaylorTaylor, Mar 25 '15 at 16:31

score 0 · Answer 1 · answered Mar 25 '15 at 15:58

Rather than writing the response directly, I would try something like this:

Function ExportCSV(model As FormsExportSettings) As FileContentResult
        Dim exportModel As FormsExportModel = New FormsExportModel(model)

        Dim fileName = exportModel.form.formName + ".csv"

        Return File(exportModel.writer.ExportToBytes(), "text/csv", fileName)       
End Function

The File function will handle all of the setting of the headers and the response and will return the file for download.

I've tried this method also and it gives me the same results as the OP — MaylorTaylor, Mar 25 '15 at 16:00

AJAX Post to download file using MVC

1 Answers1