我们现在试用一下这个组件。
首先,我们将AjaxUploadHelper控件放置在页面中,紧跟在ScriptManager之后,因为AjaxUploadHelpe需要在第一时间告诉ScriptManager目前正处在一个异步刷新的过程中。
<%@ Register Assembly="AjaxFileUploadHelper" Namespace="Jeffz.Web" TagPrefix="jeffz" %> //... <asp:ScriptManager ID="ScriptManager1" runat="server" /> <jeffz:AjaxFileUploadHelper runat="server" ID="AjaxFileUploadHelper1" /> //...
接着,在页面上添加一个UpdatePanel,并在其中放置一个FileUpload控件,一个按钮以及一个Label。为了更容易地看出异步刷新的效果,我们在页面上添加两个时间:
<%= DateTime.Now %> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <%= DateTime.Now %><br /> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" /><br /> <asp:Label ID="Label1" runat="server" Text="">asp:Label> ContentTemplate> asp:UpdatePanel>
在Code Behind代码中,我们为Button添加Event handler:
protected void Button1_Click(object sender, EventArgs e) { if (this.FileUpload1.PostedFile != null) { this.Label1.Text = this.FileUpload1.PostedFile.ContentLength + " bytes"; } else { this.Label1.Text = ""; } }
打开页面,我们可以看到页面中显示了那些控件和两个时间。
选择一个文件并点击Upload按钮,我们可以发现只有UpdatePanel内部的时间被改变了,文件大小也显示在了页面上:
很震撼吧?但是如果我们改变Code Behind中的代码:
protected void Button1_Click(object sender, EventArgs e) { this.Response.Redirect("AnotherPage.aspx", true); }
刷新页面,点击按钮,您就会发现……失败了?为什么?
原因如下:在一个“普通”的PostBack时,如果我们在执行了Redirect方法,浏览器将会接受到一个Status Code为302的Response,以及一个跳转目标。接着浏览器就会将用户带去指定的目标页面。当XHR发出的请求得到这样一个Response之后,它将会自动重新请求而不会告诉客户端究竟发生了什么。这时,客户端只能获得目标跳转之后的资源,而并非起初请求的资源。
因此,ASP.NET AJAX提供了一个组件来支持异步PostBack时的跳转。这个组件就是ScriptModule,我们可以在web.config文件中找到它的注册信息。
<system.web> <httpModules> <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, ..."/> httpModules> system.web> <system.webServer> <modules> <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, ..."/> modules> system.webServer>
下面的代码片断就是它解决这个问题的实现:
public class ScriptModule : IHttpModule { protected virtual void Init(HttpApplication context) { context.PreSendRequestHeaders += new EventHandler(PreSendRequestHeadersHandler); // ... } private void PreSendRequestHeadersHandler(object sender, EventArgs args) { HttpApplication application = (HttpApplication)sender; HttpResponse response = application.Response; if (response.StatusCode == 302) { if (PageRequestManager.IsAsyncPostBackRequest(application.Request.Headers)) { string redirectLocation = response.RedirectLocation; Listcookies = new List (response.Cookies.Count); for (int i = 0; i < response.Cookies.Count; i++) { cookies.Add(response.Cookies[i]); } response.ClearContent(); response.ClearHeaders(); for (int i = 0; i < cookies.Count; i++) { response.AppendCookie(cookies[i]); } response.Cache.SetCacheability(HttpCacheability.NoCache); response.ContentType = "text/plain"; PageRequestManager.EncodeString(response.Output, "pageRedirect", String.Empty, redirectLocation); } else if //... } } }
我们响应了PreSendRequestHeaders事件,它将会在服务器端发送Header信息之前被触发。此时,如果Status Code为302(表示Response将要使客户端跳转到另一个页面去),则会清除所有即将发送的内容,并重新指定传输的信息。在这里最重要的修改就是Response Body的内容。因为客户端将要解析收到的字符串,因此我们必须发送格式为“length|type|id|content”。请注意上方红色的代码,它将会发送一段格式合法的字符串,例如“16|pageRedirect||/AnotherPage.aspx|”。
在客户端,我们可以找到下面的实现,它的作用是在收到页面重定向的信息之后跳转页面。请注意下方红色的代码:
function Sys$WebForms$PageRequestManager$_onFormSubmitCompleted(sender, eventArgs) { // ... for (var i = 0; i < delta.length; i++) { var deltaNode = delta[i]; switch (deltaNode.type) { case "updatePanel": Array.add(updatePanelNodes, deltaNode); break; // ... case "pageRedirect": window.location.href = deltaNode.content; return; //... } } // ... }
明白了这点之后,我们也就能够轻松地编写一个这样的模块了:
public class AjaxFileUploadModule : IHttpModule { public void Init(HttpApplication context) { context.PreSendRequestHeaders += new EventHandler(PreSendRequestHeadersHandler); } private void PreSendRequestHeadersHandler(object sender, EventArgs e) { HttpApplication application = (HttpApplication)sender; HttpResponse response = application.Response; if (response.StatusCode == 302 && AjaxFileUploadUtility.IsInIFrameAsyncPostBack(application.Request.Params)) { string redirectLocation = response.RedirectLocation; Listcookies = new List (response.Cookies.Count); for (int i = 0; i < response.Cookies.Count; i++) { cookies.Add(response.Cookies[i]); } response.ClearContent(); response.ClearHeaders(); for (int i = 0; i < cookies.Count; i++) { response.AppendCookie(cookies[i]); } response.Cache.SetCacheability(HttpCacheability.NoCache); response.ContentType = "text/plain"; AjaxFileUploadUtility.WriteScriptBlock(response, true); StringBuilder sb = new StringBuilder(); TextWriter writer = new StringWriter(sb); AjaxFileUploadUtility.EncodeString(writer, "pageRedirect", String.Empty, redirectLocation); response.Write(sb.Replace("*/", "*//*").ToString()); AjaxFileUploadUtility.WriteScriptBlock(response, false); response.End(); } } public void Dispose() {} }
上方红色的代码为我们的Module与ASP.NET AJAX中的ScriptModule之间唯一的区别。我们在web.config文件中注册了AjaxFileUploadModule之后,我们在服务器端调用Redirect方法之后,在客户端就能进行跳转了。此时客户端接收到的文本如下:
现在,我们终于完成了所有的组件。您也不妨将其下载之后尝试一下吧,如果遇到了问题,请及时和我联系。:)
点击这里下载整个项目
English Version