让UpdatePanel支持文件上传(5):支持页面重定向的HttpModule

简介:
我们现在试用一下这个组件。
  首先,我们将AjaxUploadHelper控件放置在页面中,紧跟在ScriptManager之后,因为AjaxUploadHelpe需要在第一时间告诉ScriptManager目前正处在一个异步刷新的过程中。
使用AjaxFileUploadHelper控件
<%@ Register Assembly="AjaxFileUploadHelper" Namespace="Jeffz.Web" TagPrefix="jeffz" %>
//...
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<jeffz:AjaxFileUploadHelper runat="server" ID="AjaxFileUploadHelper1" />
//...

接着,在页面上添加一个UpdatePanel,并在其中放置一个FileUpload控件,一个按钮以及一个Label。为了更容易地看出异步刷新的效果,我们在页面上添加两个时间:
Page
<%= 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:
Code Behind
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 = "";
    }
}

打开页面,我们可以看到页面中显示了那些控件和两个时间。
1
  选择一个文件并点击Upload按钮,我们可以发现只有UpdatePanel内部的时间被改变了,文件大小也显示在了页面上:
2

很震撼吧?但是如果我们改变Code Behind中的代码:
改变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文件中找到它的注册信息。
web.config文件的信息
<system.web>
    <!-- other configurations -->
    <httpModules>
        <add name="ScriptModule" 
	    type="System.Web.Handlers.ScriptModule, System.Web.Extensions, ..."/>
    </httpModules>
    <!-- other configurations -->
</system.web>
<!-- for IIS 7 -->
<system.webServer>
    <!-- other configurations -->
    <modules>
        <add name="ScriptModule" preCondition="integratedMode" 
	    type="System.Web.Handlers.ScriptModule, System.Web.Extensions, ..."/>
    </modules>
    <!-- other configurations -->
</system.webServer>

下面的代码片断就是它解决这个问题的实现:
ScriptModule
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;
                List<HttpCookie> cookies = new List<HttpCookie>(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";
                
            }
            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;
	    // ...
            
            //...
        }
    }
    // ...
}

明白了这点之后,我们也就能够轻松地编写一个这样的模块了:
AjaxFileUploadModule
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 && 
            )
        {
            string redirectLocation = response.RedirectLocation;
            List<HttpCookie> cookies = new List<HttpCookie>(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";
            
            response.End();
        }
    }
    public void Dispose() {}
}

上方红色的代码为我们的Module与ASP.NET AJAX中的ScriptModule之间唯一的区别。我们在web.config文件中注册了AjaxFileUploadModule之后,我们在服务器端调用Redirect方法之后,在客户端就能进行跳转了。此时客户端接收到的文本如下:
客户端收到的文本
<script type='text/javascript' language='javascript'>window.__f__=function()
    {}</script>

本文转自 jeffz 51CTO博客,原文链接:http://blog.51cto.com/jeffz/59904,如需转载请自行联系原作者
相关文章
|
前端开发 JavaScript 应用服务中间件
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
|
18天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
前端开发 JavaScript Java
【前端】form标签multipart/form-data 文件上传表单中 传递参数无法获取的原因
form标签multipart/form-data 文件上传表单中 传递参数无法获取的原因
734 1
|
开发框架 前端开发 JavaScript
.NET Core Web API使用HttpClient提交文件的二进制流(multipart/form-data内容类型)
.NET Core Web API使用HttpClient提交文件的二进制流(multipart/form-data内容类型)
338 0
.NET Core Web API使用HttpClient提交文件的二进制流(multipart/form-data内容类型)
|
开发框架 JavaScript 前端开发
ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件
ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件
435 0
ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件
|
关系型数据库 API PHP
如何禁用WordPress程序REST API功能且移除wp-json链接
WordPress是什么? WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。
1691 0