从MVC Controller导出到CSV,View在页面上显示CSV原始数据

Question

我刚刚将我的MVC视图导出到Excel工作得很好,但是,因为我正在设置location.href,这让我看到一个完整的CSV数据页面而不是用户点击EXPORT按钮之前的整齐网格结果.

我正在尝试思考如何更改以下脚本来执行其操作,但只留下页面.我尝试再次调用搜索以重新返回服务器,但在运行时用户暂时看到网页上的CSV,这是不好的.

任何想法非常感谢,干杯

    $(function() {
        $('#exportButton').click(function() {
            var url = $('#AbsolutePath').val() + 'Waste.mvc/Export';

            var data = {
                searchText: $('#SearchTextBox').val().toString(),
                searchTextSite: $('#SearchTextBoxSite').val().toString(),
                StartDate: $('#StartDate').val(),
                EndDate: $('#EndDate').val()
            };
            $('#ResultsList').load(url, data, function() {
                $('#LoadingGif').empty();
                location.href = url + "?searchText=" + data.searchText + "&searchTextSite=" + data.searchTextSite + "&StartDate=" + data.StartDate + "&EndDate=" + data.EndDate;
            });
            //Search(); this fixes because grid is displayed again after csv results
        });
    });

我的控制器代码:

    public FileStreamResult Export(string searchText, string searchTextSite, string StartDate, string EndDate)
    {

        var searchResults = getSearchResults(searchText, searchTextSite, StartDate, EndDate);
        HttpContext.Response.AddHeader("content-disposition", "attachment; filename=Export.csv");

        var sw = new StreamWriter(new MemoryStream());

        sw.WriteLine("\"Ref\",\"Source\",\"Collected\"");
        foreach (var line in searchResults.ToList())
        {
            sw.WriteLine(string.Format("\"{0}\",\"{1}\",\"{2}\"",
                                       line.WasteId,
                                       line.SourceWasteTypeId.ToDescription(),
                                       line.CollectedDate.ToShortDateString()));
        }
        sw.Flush();
        sw.BaseStream.Seek(0, SeekOrigin.Begin);

        return new FileStreamResult(sw.BaseStream, "text/csv");
        // return File(sw.BaseStream, "text/csv", "report.csv"); Renders the same result

    }

Answer 1

您可以让控制器操作将CSV文件作为附件返回(它将使用Content-Disposition: attachment; filename=report.csvHTTP标头):

public ActionResult GetCsv()
{
    byte[] csvData = ...
    return File(csvData, "text/csv", "report.csv");
}

现在您可以安全地执行操作window.location.href = '/reports/getcsv';,系统将提示用户下载CSV报告,但它将保留在同一页面上.

Answer 2

感谢您的指导，它帮助我到达那里。我将可见性设置为隐藏的 DIV：

<div id="ExportList" style="visibility:hidden;clear:both;">                       
</div>

我将此隐藏的 div 放置在具有网格结果的 DIV 下方，网格结果保持在原位，隐藏的 CSV 流写入页面，出现弹出提示，然后打开 Excel

这是我完成的 Javascipt，我认为这可能会更简洁。不必使用额外的 DIV，但也还不错：

    $(function() {
        $('#exportButton').click(function() {
            var url = $('#AbsolutePath').val() + 'Waste.mvc/Export';

            var data = {
                searchText: $('#SearchTextBox').val().toString(),
                searchTextSite: $('#SearchTextBoxSite').val().toString(),
                StartDate: $('#StartDate').val(),
                EndDate: $('#EndDate').val()
            };
            $('#ExportList').load(url, data, function() {
                $('#LoadingGif').empty();
                location.href = url + "?searchText=" + data.searchText + "&searchTextSite=" + data.searchTextSite + "&StartDate=" + data.StartDate + "&EndDate=" + data.EndDate;
            });

        });
    });