本文主要用于总结备忘
弹出框使用了bootstrap的Model模态框，无刷新文件下载是通过js生成一个form，用这个form提交参数。在实现过程中，页面也没有进行刷新。
index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Project.DownLoadFile.Views.index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="../Scripts/jquery-1.9.0.js" type="text/javascript"></script> <script src="../Scripts/bootstrap.min.js" type="text/javascript"></script> <link href="../Scripts/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script> //下载按钮 var fileName = ""; //要下载文件的文件名 function emailModel(obj) {//解决了循环中不能通过ID来获取相应便签中绑定的数据 fileName = $(obj).attr("value"); $("#emailModel").modal("show"); }; function tjEmail() { var szMail = $("#txtAddress").val(); //var saa = $("#yanzheng_fail").text(); if (szMail != "") { var szReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; var bChk = szReg.test(szMail); if (bChk == true) { $("#yanzheng_fail").html(""); $("#yanzheng_fail").css('display', 'none'); $.ajax({ type: "post", url: "index.aspx/SaveEmail", data: "{'address':'" + szMail + "'}", contentType: "application/json;charset=utf-8", dataType: "json", success: function (data) { if (data.d == 1) { var form = $("<form>"); //定义一个form表单 form.attr('style', 'display:none'); //实现页面无刷新 form.attr('target', ''); form.attr('method', 'post'); form.attr('action', "Download.aspx?fileName=" + fileName); $('body').append(form); //将表单放置在web中 form.submit(); } }, error: function (error) { alert("内部程序异常！"); alert(error.message); } }); } else { $("#yanzheng_fail").html("Email address error !"); $("#yanzheng_fail").css('display', 'block'); } } else { $("#yanzheng_fail").html("Email address can not be empty!"); $("#yanzheng_fail").css('display', 'block'); } return false; } </script> <style> /****** EMAIL MODEL ******/ .bt-login{ background-color: rgb(130,193,235); color: #ffffff; padding-bottom: 10px; padding-top: 10px; transition: background-color 300ms linear 0s; } .bt-login:hover,.bt-login:active, .bt-login:focus { background-color: rgb(55, 169, 223); color: #ffffff; padding-bottom: 10px; padding-top: 10px; transition: background-color 300ms linear 0s; } .login-tab { margin: 0 auto; max-width: 380px; } .login-modal-header { background: rgb(55, 169, 223); color: #fff; } .login-modal-header .modal-title { color: #fff; } .login-modal-header .close { color: #fff; } .login-modal i { color: #000; } .login-modal form { max-width: 340px; } .tab-pane form { margin: 0 auto; } </style> </head> <body> <div> <h2>弹出模态框（Modal）</h2> <a id="DownLoad" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#emailModel" value="test.txt" onclick="emailModel(this)">DownLoad</a> <%--EMAIL MODEL--%> <div id="divEmailModel"> <div class="modal fade" id="emailModel" tabindex="-1" role="dialog" aria-labelledby="emailModalTitle" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header login-modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button> <h4 class="modal-title text-center" id="loginModalLabel"> PLEASE ENTER YOUR EMAIL ADDRESS</h4> </div> <div class="modal-body"> <div class="text-center"> <div role="tabpanel" class="login-tab"> <div class="tab-content"> <div role="tabpanel" class="tab-pane active text-center" id="home" runat="server"> <span id="yanzheng_fail" style="display: none; color: Red; font-weight: bold; margin-top: 5px;"></span> <div role="form"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <i class="glyphicon glyphicon-envelope"></i> </div> <input type="text" class="form-control" id="txtAddress" value="" placeholder="Email" /> </div> </div> <button type="button" class="btn btn-block bt-login" id="Button1" onclick="tjEmail()" data-loading-text="Submiting Address...."> Submit</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
index.aspx.cs
using System.Web.Services; [WebMethod] public static int SaveEmail(string address) { return 1; //return AddEmail(address);把email存入数据库的方法，返回成功插入数据库的条数 }
js生成的form提交到的另一个页面Download.aspx，其后台使用文件流方式下载文件代码为
Download.aspx.cs
protected void Page_Load(object sender, EventArgs e) { string fileName = Request.QueryString["FileName"]; if (!string.IsNullOrEmpty(fileName)) { DownLoadFile(fileName.ToString()); } } /// <summary> /// 文件流方式下载文件 /// </summary> /// <param name="fileName"></param> /// <returns></returns> private static void DownLoadFile(string fileName) { HttpContext.Current.Response.ContentType = "application/ms-download"; string s_path = HttpContext.Current.Server.MapPath("~/file/") + fileName; System.IO.FileInfo file = new System.IO.FileInfo(s_path); HttpContext.Current.Response.Clear(); HttpContext.Current.Response.AddHeader("Content-Type", "application/octet-stream"); HttpContext.Current.Response.Charset = "utf-8"; string filename = file.Name; string userAgent = HttpContext.Current.Request.ServerVariables["http_user_agent"].ToLower(); //处理firefox保存时文件名乱码的问题 if (userAgent.IndexOf("firefox") == -1) filename = HttpUtility.UrlEncode(filename, System.Text.Encoding.UTF8); filename = filename.Replace("+", " "); HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename=" + filename); HttpContext.Current.Response.AddHeader("Content-Length", file.Length.ToString()); HttpContext.Current.Response.WriteFile(file.FullName); HttpContext.Current.Response.Flush(); HttpContext.Current.Response.Clear(); HttpContext.Current.Response.End(); }
效果显示
