Geek Answers Handbook

Export to CSV from MVC Controller and View displays the source CSV data on the page

I just exported the MVC export view to Excel, however, because I set location.href, it leaves me a page with CSV data, not a neat grid result before the user clicks the EXPORT button.

I'm trying to think about how to modify the following script to do what it does, but leave the page alone. I tried calling search to get back to the server again, but at runtime the user instantly sees CSV on the web page, which is bad.

Any ideas highly appreciated, cheers

$(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 }); });

My controller code:

  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 }
+7
source share
2 answers

Thanks for the guide, it helped me. I set the DIV with visibility to hide:

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

I placed this hidden div below the DIV that has the grid results, the grid results remain in place, and the hidden CSV stream is written to the page invitation and popup, and then opened in Excel

Here is the Javascipt I ended up with, I think it might be more neat. No need to use an extra DIV, but this is not so bad:

  $(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; }); }); });
0
source

You could force the controller action to return the CSV file as an attachment (it will use the header Content-Disposition: attachment; filename=report.csv HTTP):

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

Now you can safely execute window.location.href = '/reports/getcsv'; , and the user will be asked to download the CSV report, but he will remain on the same page.

+9
source

More articles:


All Articles