Example of asp.net mvc + javascript generation download file

What has been done recently is to refactor existing projects. The WEB from to MVC, in fact, is also a push.

There is an export function, the data output into TXT file for download. The original approach was to have a hidden iframe, set a form form on the IFRAME page, submit the relevant parameters to the server side, and on the server side, actually generate a file and then push the contents of the file to the client.

What a strange thing to do. Export content, let the user download, do not have to really generate files, because the content of the ever-changing, not one generation, many times the use of the possible and necessary. The content can be generated and pushed directly to the client.

Secondly, I understand why we used a hidden iframe. Because the submission page will cause the refresh, in order to avoid the page content refresh, so have a hidden iframe, let it be responsible for submission. Good is good, is to get more than one page.

In the new project, the front-end, form by JS Dynamic generation, server-side, directly generate content and push:

Front:

The code is as follows

Copy Code

<script type= "Text/javascript" > var f_pointxy = function () { function ExportData () {//Dynamic add form var form = $ ("<form>"); Form.attr (' style ', ' display:none '); Form.attr (' target ', '); Form.attr (' method ', ' post '); Form.attr (' Action ', "@Url. Staticfile (" ~/common/yonghai/exportdata/")" + $ ("#txt_SMID"). Val ()); var input1 = $ (' <input> '); Input1.attr (' type ', ' hidden '); Input1.attr (' name ', ' Isexportinput '); Input1.attr (' Value ', document.getElementById ("Chkinput"). checked); var input2 = $ (' <input> '); Input2.attr (' type ', ' hidden '); Input2.attr (' name ', ' ExportFormat '); Input2.attr (' Value ', document.getElementById ("Select1"). Value); $ (' body '). Append (form); Form.append (INPUT1); Form.append (INPUT2); try {form.submit ();} catch (ex) {alert (ex);} Form.remove ()///Disposable } return { Exportdata:function () { ExportData (); } }; }();

Server side:

The code is as follows

Copy Code

[HttpPost] Public ActionResult exportdata (int ID, formcollection collection) { string content = ...;//Generate Contents Response.Clear (); Response.Buffer = false; Response.ContentType = "Application/octet-stream"; Response.appendheader ("Content-disposition", "attachment;filename=" + DateTime.Now.ToString ("yyyy-mm-dd") + "TXT;"); Response.Write (content); Response.Flush (); Response.End (); return new Emptyresult (); }

So, click the button Export button

The code is as follows	Copy Code
<input type= "button" value= "Export" class= "BTN Mini minilt" onclick= "F_pointxy.exportdata ()"/>

After that, you can download yyyy-mm-dd.txt