[原创]浅谈ASP.NET的Postback

说道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:

ExpandedBlockStart.gif ContractedBlock.gif <% @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>
<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > TestPage </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:Label runat ="server" ID ="LabelMessage" ForeColor ="red" ></ asp:Label >
</ div >
< div >
< asp:Button runat ="server" ID ="Button1" Text ="Button1" OnClick ="Button1_Click" OnCommand ="Button_Command" CommandArgument ="Button1" />
< asp:Button runat ="server" ID ="Button2" Text ="Button2" OnClick ="Button2_Click" OnCommand ="Button_Command" CommandArgument ="Button2" UseSubmitBehavior ="false" />
< asp:Button runat ="server" ID ="Button3" Text ="Button3" OnClick ="Button3_Click" OnCommand ="Button_Command" CommandArgument ="Button3" UseSubmitBehavior ="false" />
</ div >
</ form >
</ body >
</ html >

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

下面是Code Behind:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default:System.Web.UI.Page
ExpandedBlockStart.gifContractedBlock.gif
{

protectedvoidPage_Load(objectsender,EventArgse)
ExpandedSubBlockStart.gifContractedSubBlock.gif
{

}

protectedvoidButton1_Click(objectsender,EventArgse)
ExpandedSubBlockStart.gifContractedSubBlock.gif
{
stringmessage=string.Format("The{0}eventof{1}isfired","Click","Button1");
this.LabelMessage.Text=message;
}

protectedvoidButton2_Click(objectsender,EventArgse)
ExpandedSubBlockStart.gifContractedSubBlock.gif
{
stringmessage=string.Format("The{0}eventof{1}isfired","Click","Button2");
this.LabelMessage.Text=message;
}

protectedvoidButton3_Click(objectsender,EventArgse)
ExpandedSubBlockStart.gifContractedSubBlock.gif
{
stringmessage=string.Format("The{0}eventof{1}isfired","Click","Button3");
this.LabelMessage.Text=message;
}


protectedvoidButton_Command(objectsender,CommandEventArgse)
ExpandedSubBlockStart.gifContractedSubBlock.gif
{
stringmessage=string.Format("The{0}eventof{1}isfired","Command",e.CommandArgument);
this.LabelMessage.Text+=";"+message;
}

}

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


我们通过最上方的Message可以看出,Button2的Click Event和Command先后触发。

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

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

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title >
TestPage
</ title >
</ head >
< body >
< form name ="form1" method ="post" action ="Default.aspx" id ="form1" >
< div >
< input type ="hidden" name ="__EVENTTARGET" id ="__EVENTTARGET" value ="" />
< input type ="hidden" name ="__EVENTARGUMENT" id ="__EVENTARGUMENT" value ="" />
< input type ="hidden" name ="__VIEWSTATE" id ="__VIEWSTATE" value ="/wEPDwUKMTA0NDQ2OTE5OWRk281L4eAk7iZT10hzg+BeOyoUWBQ=" />
</ div >

ExpandedBlockStart.gifContractedBlock.gif
< script type ="text/javascript" >
<!--
vartheForm=document.forms['form1'];
ExpandedSubBlockStart.gifContractedSubBlock.gif
if(!theForm){
theForm
=document.form1;
}

ExpandedSubBlockStart.gifContractedSubBlock.gif
function__doPostBack(eventTarget,eventArgument){
ExpandedSubBlockStart.gifContractedSubBlock.gif
if(!theForm.onsubmit||(theForm.onsubmit()!=false)){
theForm.__EVENTTARGET.value
=eventTarget;
theForm.__EVENTARGUMENT.value
=eventArgument;
theForm.submit();
}

}

//-->
</ script >

< div >
< span id ="LabelMessage" style ="color:Red;" ></ span >
</ div >
< div >
< input type ="submit" name ="Button1" value ="Button1" id ="Button1" />
< input type ="button" name ="Button2" value ="Button2" onclick ="javascript:__doPostBack('Button2','')" id ="Button2" />
< input type ="button" name ="Button3" value ="Button3" onclick ="javascript:__doPostBack('Button3','')" id ="Button3" />
</ div >
</ form >
</ body >
</ html >

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

1. 定义了3个hidden field:

< input type ="hidden" name ="__EVENTTARGET" id ="__EVENTTARGET" value ="" />
< input type ="hidden" name ="__EVENTARGUMENT" id ="__EVENTARGUMENT" value ="" />
< input type ="hidden" name ="__VIEWSTATE" id ="__VIEWSTATE" value ="/wEPDwUKMTA0NDQ2OTE5OWRk281L4eAk7iZT10hzg+BeOyoUWBQ=" />

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

2. 一段script:

ExpandedBlockStart.gif ContractedBlock.gif < script type ="text/javascript" >
<!--
vartheForm=document.forms['form1'];
ExpandedSubBlockStart.gifContractedSubBlock.gif
if(!theForm){
theForm
=document.form1;
}

ExpandedSubBlockStart.gifContractedSubBlock.gif
function__doPostBack(eventTarget,eventArgument){
ExpandedSubBlockStart.gifContractedSubBlock.gif
if(!theForm.onsubmit||(theForm.onsubmit()!=false)){
theForm.__EVENTTARGET.value
=eventTarget;
theForm.__EVENTARGUMENT.value
=eventArgument;
theForm.submit();
}

}

//-->
</ script >
定义了一个__doPostBack function完成Postback的操作,该function只有区区3行代码,前两行通过参数对上面定义的两个hiddenfield赋值,然后向Server端提交表单。

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

< div >
< span id ="LabelMessage" style ="color:Red;" ></ span >
</ div >
< div >
< input type ="submit" name ="Button1" value ="Button1" id ="Button1" />
< input type ="button" name ="Button2" value ="Button2" onclick ="javascript:__doPostBack('Button2','')" id ="Button2" />
< input type ="button" name ="Button3" value ="Button3" onclick ="javascript:__doPostBack('Button3','')" id ="Button3" />
div>

我们定义的3个Button被转化成3个能向Server端提交表单的<input > Tag, 但是他们提交表的方式却不一样,第一个以<input type="submit">的方式提交,后面两个通过调用javascript的方式提交表单(<input type="button">)。对于一个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。我们来看该方法的定义。

[EditorBrowsable(EditorBrowsableState.Advanced)]
protected virtual void RaisePostBackEvent(IPostBackEventHandlersourceControl, string eventArgument)
ExpandedBlockStart.gifContractedBlock.gif
{
sourceControl.RaisePostBackEvent(eventArgument);
}

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

protected virtual void RaisePostBackEvent( string eventArgument)
ExpandedBlockStart.gifContractedBlock.gif
{
base.ValidateEvent(this.UniqueID,eventArgument);
if(this.CausesValidation)
ExpandedSubBlockStart.gifContractedSubBlock.gif
{
this.Page.Validate(this.ValidationGroup);
}

this.OnClick(EventArgs.Empty);
this.OnCommand(newCommandEventArgs(this.CommandName,this.CommandArgument));
}

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

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

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

ExpandedBlockStart.gif ContractedBlock.gif < script type ="text/javascript" >
function
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值