点击这里给我发消息 点击这里给我发消息

ASP.NET中Postback浅析

添加时间:2013-12-6
    相关阅读: 设计 ASP ASP.NET 程序 HTML C#
说道ASP.NET的Postback,就得说Web Page的生命周期,但是Web Page的生命周期却不是三言两语就能够说得清楚的,所以在这里单纯站的编程的角度,撇开Web Page 的生命周期浅谈Postback。

  我们知道,无论是ASP.NET1.x,2.0,甚至是以后的版本,ASP.NET最终Render到Client端通过浏览器浏览的都是一样:一个单纯的HTML。Client通过Submit Form的方式将填入Form的数据提交给Server进行处理。我们现在来看看ASP.NET整个Postback程序处理的过程。

  首先我们通过一个Sample来看ASP.NET如何处理一个通过Click一个Button引起的Postback。下面是Web Page的HTML:

ASP.NET中Postback浅析(图一)ASP.NET中Postback浅析(图二)<%ASP.NET中Postback浅析(图三)@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
ASP.NET中Postback浅析(图四)DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ASP.NET中Postback浅析(图四)<html xmlns="http://www.w3.org/1999/xhtml">
ASP.NET中Postback浅析(图四)<head runat="server">
ASP.NET中Postback浅析(图四)    <title>Test Pagetitle>
ASP.NET中Postback浅析(图四)head>
ASP.NET中Postback浅析(图四)<body>
ASP.NET中Postback浅析(图四)    <form id="form1" runat="server">
ASP.NET中Postback浅析(图四)        <div>
ASP.NET中Postback浅析(图四)            <asp:Label runat="server" ID="LabelMessage" ForeColor="red">asp:Label>
ASP.NET中Postback浅析(图四)        div>
ASP.NET中Postback浅析(图四)        <div>
ASP.NET中Postback浅析(图四)            <asp:Button runat="server" ID="Button1" Text="Button1" OnClick="Button1_Click" OnComm
and="Button_Command"     CommandArgument="Button1" />
ASP.NET中Postback浅析(图四)            <asp:Button runat="server" ID="Button2" Text="Button2" OnClick="Button2_Click" OnComm
and="Button_Command"    CommandArgument="Button2" UseSubmitBehavior="false" />
ASP.NET中Postback浅析(图四)            <asp:Button runat="server" ID="Button3" Text="Button3" OnClick="Button3_Click" OnComm
and="Button_Command"    CommandArgument="Button3" UseSubmitBehavior="false" />
ASP.NET中Postback浅析(图四)        div>
ASP.NET中Postback浅析(图四)    form>
ASP.NET中Postback浅析(图四)body>
ASP.NET中Postback浅析(图四)html>
ASP.NET中Postback浅析(图四)

  很简单,定义了3个Button,分别注册了他们的两个Event:Click和Command。3个Button的Command Event Hander是一样的:Button_Command,通过指定的CommandArgument来让Event Handler判断到底是哪个Button触发了Command  Event。

  下面是Code Behind:

ASP.NET中Postback浅析(图四)using System;
ASP.NET中Postback浅析(图四)using System.Data;
ASP.NET中Postback浅析(图四)using System.Configuration;
ASP.NET中Postback浅析(图四)using System.Web;
ASP.NET中Postback浅析(图四)using System.Web.Security;
ASP.NET中Postback浅析(图四)using System.Web.UI;
ASP.NET中Postback浅析(图四)using System.Web.UI.WebControls;
ASP.NET中Postback浅析(图四)using System.Web.UI.WebControls.WebParts;
ASP.NET中Postback浅析(图四)using System.Web.UI.HtmlControls;
ASP.NET中Postback浅析(图四)
ASP.NET中Postback浅析(图四)public partial class _Default : System.Web.UI.Page
ASP.NET中Postback浅析(图一)ASP.NET中Postback浅析(图二)ASP.NET中Postback浅析(图三){  
ASP.NET中Postback浅析(图五)
ASP.NET中Postback浅析(图五)    protected void Page_Load(object sender, EventArgs e)
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)       
ASP.NET中Postback浅析(图八)    }
ASP.NET中Postback浅析(图五)    protected void Button1_Click(object sender, EventArgs e)
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)        string message = string.Format("The {0} event of {1} is fired", "Click", "Button1");
ASP.NET中Postback浅析(图五)        this.LabelMessage.Text = message;
ASP.NET中Postback浅析(图八)    }
ASP.NET中Postback浅析(图五)    protected void Button2_Click(object sender, EventArgs e)
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)        string message = string.Format("The {0} event of {1} is fired", "Click", "Button2");
ASP.NET中Postback浅析(图五)        this.LabelMessage.Text = message;
ASP.NET中Postback浅析(图八)    }
ASP.NET中Postback浅析(图五)    protected void Button3_Click(object sender, EventArgs e)
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)        string message = string.Format("The {0} event of {1} is fired", "Click", "Button3");
ASP.NET中Postback浅析(图五)        this.LabelMessage.Text = message;
ASP.NET中Postback浅析(图八)    }
ASP.NET中Postback浅析(图五)
ASP.NET中Postback浅析(图五)    protected void Button_Command(object sender, CommandEventArgs e)
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)        string message = string.Format("The {0} event of {1} is fired", "Command", e.CommandArgu
ment);
ASP.NET中Postback浅析(图五)        this.LabelMessage.Text += "; " + message;
ASP.NET中Postback浅析(图八)    }
ASP.NET中Postback浅析(图九)}
ASP.NET中Postback浅析(图四)

   我们来运行这个Page,并Click某个按钮(比如Button2):

ASP.NET中Postback浅析(图十)
我们通过最上方的Message可以看出,Button2的Click Event和Command先后触发。  

  这篇Blog的主旨就是从方法调用的角度讲述整个程序运行的过程:从HTML 被Render到Client端,到用户Click某个按钮,输入被Postback到Server端,并触发两个Event,执行Event Handler打印出相关的Message。

  首先我们来看看ASP.NET设计的Page Render到Client端的HTML是什么样子:

ASP.NET中Postback浅析(图四)DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ASP.NET中Postback浅析(图四)<html xmlns="http://www.w3.org/1999/xhtml">
ASP.NET中Postback浅析(图四)    <head>
ASP.NET中Postback浅析(图四)        <title>
ASP.NET中Postback浅析(图四)            Test Page
ASP.NET中Postback浅析(图四)        title>
ASP.NET中Postback浅析(图四)    head>
ASP.NET中Postback浅析(图四)    <body>
ASP.NET中Postback浅析(图四)        <form name="form1" method="post" action="Default.aspx" id="form1">
ASP.NET中Postback浅析(图四)            <div>
ASP.NET中Postback浅析(图四)                <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
ASP.NET中Postback浅析(图四)                <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
ASP.NET中Postback浅析(图四)                <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA
0NDQ2OTE5OWRk281L4eAk7iZT10hzg+BeOyoUWBQ=" />
ASP.NET中Postback浅析(图四)            div>
ASP.NET中Postback浅析(图四)
ASP.NET中Postback浅析(图一)ASP.NET中Postback浅析(图二)<script type="text/javascript">ASP.NET中Postback浅析(图三)
ASP.NET中Postback浅析(图五)                
ASP.NET中Postback浅析(图五)var theForm = document.forms['form1'];
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)if (!theForm) ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)    theForm = document.form1;
ASP.NET中Postback浅析(图八)}
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)function __doPostBack(eventTarget, eventArgument) ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    if (!theForm.onsubmit || (theForm.onsubmit() != false)) ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)        theForm.__EVENTTARGET.value = eventTarget;
ASP.NET中Postback浅析(图五)        theForm.__EVENTARGUMENT.value = eventArgument;
ASP.NET中Postback浅析(图五)        theForm.submit();
ASP.NET中Postback浅析(图八)    }
ASP.NET中Postback浅析(图八)}
ASP.NET中Postback浅析(图九)// -->
ASP.NET中Postback浅析(图四)script>
ASP.NET中Postback浅析(图四)
ASP.NET中Postback浅析(图四)<div>
ASP.NET中Postback浅析(图四)<span id="LabelMessage" style="color:Red;">span>
ASP.NET中Postback浅析(图四)div>
ASP.NET中Postback浅析(图四)<div>
ASP.NET中Postback浅析(图四)    <input type="submit" name="Button1" value="Button1" id="Button1" />
ASP.NET中Postback浅析(图四)    <input type="button" name="Button2" value="Button2" onclick="javascript:__doPostBack('Butto
n2','')" id="Button2" />
ASP.NET中Postback浅析(图四)    <input type="button" name="Button3" value="Button3" onclick="javascript:__doPostBack('Butto
n3','')" id="Button3" />
ASP.NET中Postback浅析(图四)div>
ASP.NET中Postback浅析(图四)form>
ASP.NET中Postback浅析(图四)body>
ASP.NET中Postback浅析(图四)html>
ASP.NET中Postback浅析(图四)

     上面的HTMLBody部分大体包括3个部分:

  1.   定义了3个hidden field:

ASP.NET中Postback浅析(图四)<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />                
ASP.NET中Postback浅析(图四)<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
ASP.NET中Postback浅析(图四)<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA0NDQ2OTE5
OWRk281L4eAk7iZT10hzg+BeOyoUWBQ=" />
ASP.NET中Postback浅析(图四)

  从他们的命名可以看出他们分别代表的意思:__EVENTTARGET代表触发Event的Control的Unique name;__EVENTARGUMENT代表为Event Handler定义的额外的参数;__VIEWSTATE:代表的是Viewstate。

2.   一段script:

ASP.NET中Postback浅析(图一)ASP.NET中Postback浅析(图二)<script type="text/javascript">ASP.NET中Postback浅析(图三)
ASP.NET中Postback浅析(图五)                
ASP.NET中Postback浅析(图五)var theForm = document.forms['form1'];
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)if (!theForm) ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)    theForm = document.form1;
ASP.NET中Postback浅析(图八)}
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)function __doPostBack(eventTarget, eventArgument) ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    if (!theForm.onsubmit || (theForm.onsubmit() != false)) ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)        theForm.__EVENTTARGET.value = eventTarget;
ASP.NET中Postback浅析(图五)        theForm.__EVENTARGUMENT.value = eventArgument;
ASP.NET中Postback浅析(图五)        theForm.submit();
ASP.NET中Postback浅析(图八)    }
ASP.NET中Postback浅析(图八)}
ASP.NET中Postback浅析(图九)// -->
ASP.NET中Postback浅析(图四)script>
ASP.NET中Postback浅析(图四)
  定义了一个__doPostBack function完成Postback的操作,该function只有区区3行代码,前两行通过参数对上面定义的两个hidden field赋值,然后向Server端提交表单。

3.   一段HTML对应通过ASP.NET定义的Web Control。 

ASP.NET中Postback浅析(图四)<div>
ASP.NET中Postback浅析(图四)<span id="LabelMessage" style="color:Red;">span>
ASP.NET中Postback浅析(图四)div>
ASP.NET中Postback浅析(图四)<div>
ASP.NET中Postback浅析(图四)    <input type="submit" name="Button1" value="Button1" id="Button1" />
ASP.NET中Postback浅析(图四)    <input type="button" name="Button2" value="Button2" onclick="javascript:__doPostBack('Butto
n2','')" id="Button2" />
ASP.NET中Postback浅析(图四)    <input type="button" name="Button3" value="Button3" onclick="javascript:__doPostBack('Butto
n3','')" id="Button3" />
ASP.NET中Postback浅析(图四)div>
ASP.NET中Postback浅析(图四)

  我们定义的3个Button被转化成3个能向Server端提交表单的 Tag, 但是他们提交表的方式却不一样,第一个以的方式提交,后面两个通过调用javascript的方式提交表单()。对于一个System.Web.UI.WebControls.Button,默认采用第一种提交方式,但是我们通过设置UseSubmitBehavior属性(这个属性时ASP.NET 2.0新加的,1x没有相应的设置),改变其表单提交的行为。
  当用户Click Button2的时候,调用__doPostBack,并传入两个参数:一个代表出发Event的对象的Unique name,也就是Button2的名称,另一个描述Event的额外信息的参数,这里不需要,所以这里是空字符串。在__doPostBack中把这两个参数赋值给两个Hidden Field:__EVENTTARGET,__EVENTARGUMENT。然后向Server端提交表单,完成Postback。
  然后我们来看看Server如何处理这个Postback,关于Web Page的生命周期在这里就不详细介绍了。Server端通过__EVENTTARGET这个hidden field的值找到对应的Server端的Control,通过Reflection确定该Control是否实现了System.Web.UI.IPostBackEventHandler Interface。如果该Control确实实现了该Interface,那么调用Page的RaisePostBackEvent方法,这是一个Virtual的方法,可以被Override。我们来看该方法的定义。
ASP.NET中Postback浅析(图四)[EditorBrowsable(EditorBrowsableState.Advanced)]
ASP.NET中Postback浅析(图四)protected virtual void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgu
ment)
ASP.NET中Postback浅析(图一)ASP.NET中Postback浅析(图二)ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)    sourceControl.RaisePostBackEvent(eventArgument);
ASP.NET中Postback浅析(图九)}
ASP.NET中Postback浅析(图四)

  我们可以看到该方法直接调用该sourceControl的RaisePostBackEvent,并传入一个eventArgument参数,在这个例子中sourceControl就是__EVENTTARGET对应的Web Control:Button2,eventArgument就是__EVENTTARGET对应的值:一个空字符串。Button2的类型是System.Web.UI.WebControls.Button。我们来看看System.Web.UI.WebControls.Button中的RaisePostBackEvent方法是如何定义的:

ASP.NET中Postback浅析(图四)protected virtual void RaisePostBackEvent(string eventArgument)
ASP.NET中Postback浅析(图一)ASP.NET中Postback浅析(图二)ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)    base.ValidateEvent(this.UniqueID, eventArgument);
ASP.NET中Postback浅析(图五)    if (this.CausesValidation)
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)        this.Page.Validate(this.ValidationGroup);
ASP.NET中Postback浅析(图八)    }
ASP.NET中Postback浅析(图五)    this.OnClick(EventArgs.Empty);
ASP.NET中Postback浅析(图五)    this.OnCommand(new CommandEventArgs(this.CommandName, this.CommandArgument));
ASP.NET中Postback浅析(图九)}
ASP.NET中Postback浅析(图四)

  这个方法也很简单,先进行Validation,然后先后出发两个Event:OnClick 和OnCommand,随后调用对应的Event handler,这和我们的输出结果是吻合的。

  这基本上就是整个Postback的整个程序执行的过程,现在我们对我们的Page作一些小的有趣的改动,来验证一下:

  端和Server端进行交互的途径就是提交表单(Form Submitting),而我们现在有两种方式来提交表单:通过控件;通过调用javascript:__doPostBack。基于这一点我们在Html中加了下面一段javascript:

ASP.NET中Postback浅析(图一)ASP.NET中Postback浅析(图二)<script type="text/javascript">ASP.NET中Postback浅析(图三)
ASP.NET中Postback浅析(图五)    function postback()
ASP.NET中Postback浅析(图六)ASP.NET中Postback浅析(图七)    ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)       
ASP.NET中Postback浅析(图五)        __doPostBack('Button1','');
ASP.NET中Postback浅析(图八)    } 
ASP.NET中Postback浅析(图五)   
ASP.NET中Postback浅析(图五)    document.getElementById("Button2").onclick = postback;
ASP.NET中Postback浅析(图五)    document.getElementById("Button3").onclick = postback; 
ASP.NET中Postback浅析(图九)   script>
ASP.NET中Postback浅析(图四)

        我们override Button2和Button3的onclick event,把'Button1作为参数传入__doPostBack方法,可以想象,现在无论Click那个Button,程序都将认为之Click Button1。有兴趣的可以亲自试试,无论Click那个Button,显示的效果都将是下面的样子: 

ASP.NET中Postback浅析(图十一)


  接下来我们取消上面的改动,在Server对Code作另一方面的尝试。我们前面说过,Server接受到Client的Postback,对于事件的Web Control(或者Html Server Control),如果实现了System.Web.UI.IPostBackEventHandler接口,会调用Page的virtual方法:RaisePostbackEvent,我们现在来Override这个方法:

ASP.NET中Postback浅析(图四)protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArg
ument)
ASP.NET中Postback浅析(图一)ASP.NET中Postback浅析(图二)    ASP.NET中Postback浅析(图三){
ASP.NET中Postback浅析(图五)        sourceControl = this.Button1;
ASP.NET中Postback浅析(图五)        base.RaisePostBackEvent(sourceControl, eventArgument);
ASP.NET中Postback浅析(图九)}
ASP.NET中Postback浅析(图四)

  在上面的Code中,我们把sourceControl设为Button1,这样无论在client端Click的那个Button,现在都将认为是对Button的Click。运行的结果和上面一样。
  通过上面的介绍,我们知道了Page的RaisePostBackEvent会调用Source Control的RaisePostBackEvent方法,这个方法是定义在IPostBackEventHandler接口中,很多Control都实现了这个方法,对于Button来说,这个方法是Virtual的,它可以被你Override,如果感兴趣的话,可以自己写一个Custom Button,并Override该方法,看看执行的情况,相信会使加深你对Postback的理解。
本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册