MVC action not doing anything with CSV data

Question

I have some JavaScript that concatenates a CSV string. This string is then passed into an MVC action, which should open a file dialog asking the user to select the type of program they would like to open the CSV file with.

Originally, I was just using a vb StringBuilder to concatenate a string but I need to use js now. For some reason I can't get the same dialog that I had before, yet my MVC action has not changed. This is my JavScript that handles the concatenation and submits the string to the mvc action:

<script type="text/javascript">
    $(document).ready(function () {
        $("#csv-export").click(function () {
            var csvStr = "";
            $("#myTable tbody tr:visible").each(function () { //for each visible row
                $(this).children("td").each(function () { //for each rows tds
                    if (!$(this).has("a").length) { //if the td does not contain a link
                        csvStr += $(this).html() + ", "; //Append the td's html
                    }
                });
                csvStr = csvStr.substring(0, csvStr.length - 2);
                csvStr += "\n";
            });
            $.get('@Url.Action("CSVExport")', { csv: csvStr }, function (ReturnedData) {alert("Success!")});
        });
    });
</script>

I correctly receive the "Success!" alert on return.

Here is my MVC action, which correctly receives a string such as "field1, field2, field3 \n field1, field2, field3" note the line break in between each set of fields:

Public Function CSVExport(ByVal csv As String) As FileContentResult
    If csv Is Nothing Then csv = "Sorry! There was an error creating this CSV file."
    Return File(New System.Text.UTF8Encoding().GetBytes(csv), "text/csv", "Report123.csv")
End Function

But alas, no file dialog comes up. Is this a problem with my JavaScript/Action Return?

See this: http://stackoverflow.com/questions/4545311/download-a-file-by-jquery-ajax — haim770, Sep 17 '13 at 00:52

ElliotSchmelliot · Answer 1 · 2013-09-18T20:49:10.340

Right, so it looks like upon more research, JavaScript cannot be used to directly open a file like this. I did find a way around this though by using a hidden field.

I wrapped my button in a form that submits to the action I want. Then I changed my JavaScript to change the value of a hidden field. This way, JavaScript can still be used to access all of my visible table rows and concatenate the string. But then MVC takes over before the form is submitted and can still correctly display the file open dialog.

The code below obviously requires that your the view is strongly-typed and has a property that represents the csv string. Here, this property is model.csvData.

Form:

@Using Html.BeginForm("CSVExportAll", "Project")
    @<div>
        @Html.HiddenFor(Function(model) model.csvData, new With {.id = "csv-holder"})
        <input type="submit" value="CSV Export" id="csv-export" />
    </div>
End Using

JavaScript:

The JavaScript is identical except for one line. The previous $.get line is replaced by:

$("#csv-holder").val(csvStr);

MVC action not doing anything with CSV data

1 Answers1

Form:

JavaScript: