WebForm原理，aspx服务器端与客户端源码比较
如果你从前做过asp，php，jsp就会知道，表单真的很重要。
现在的aspx实际上基础还是html，下面就aspx代码和展现在客户端的源代码进行比较说明：
aspx代码：
<! 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 runat = " server " >
< title ></ title >
</ head >
< body >
< form id = " form1 " runat = " server " >
< div >
< asp:Panel ID = " pnlMain " runat = " server " >
< asp:TextBox ID = " txtContent " runat = " server " ></ asp:TextBox >
< asp:Button ID = " btnSubmit " runat = " server " Text = " 提交 " />
</ asp:Panel >
</ div >
</ form >
</ body >
</ html >
aspx.cs代码
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestWebSite
{
public partial class WebForm : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
if ( ! IsPostBack)
{
HelloWorld = " Hello world! " ;
}
}
private string HelloWorld
{
get
{
if (ViewState[ " HelloWorld " ] != null )
{
return (String)ViewState[ " HelloWorld " ];
}
else
{
return String.Empty;
}
}
set
{
ViewState[ " HelloWorld " ] = value;
}
}
protected void btnSubmit_Click( object sender, EventArgs e)
{
Response.Write(HelloWorld);
}
}
}
客户端源代码：
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >< title >
</ title ></ head >
< body >
< form name = " form1 " method = " post " action = " WebForm.aspx " id = " form1 " >
< div >
< input type = " hidden " name = " __VIEWSTATE " id = " __VIEWSTATE " value = " /wEPDwUJMjIyMzA3NTg0DxYCHgpIZWxsb1dvcmxkBQxIZWxsbyB3b3JsZCFkZOePjGpwvB++SUtEz2XdZzZh9wNe " />
</ div >
< div >
< input type = " hidden " name = " __EVENTVALIDATION " id = " __EVENTVALIDATION " value = " /wEWAwLvlpSaAQKrmr31CQLCi9reAzrRWWTkQ6xjOr1zdwzrmwEqmKlK " />
</ div >
< div >
< div id = " pnlMain " >
< input name = " txtContent " type = " text " id = " txtContent " />
< input type = " submit " name = " btnSubmit " value = " 提交 " id = " btnSubmit " />
</ div >
</ div >
</ form >
</ body >
</ html >
首先从UI上分析，Panel实际上被解析成div，TextBox实际上被解释为input（type为text），Button实际被解析为input（type为submit）等等，有兴趣可以看一下，所有的服务器端控件都被解析为html控件了。并且Button实现的还是Form提交。
有些嵌套控件会在前面加上父控件名称。
仔细观察可以看到代码中有两个隐藏域，其中一个（__VIEWSTATE）为ViewState所用，值都被Base64转化了，Framwork中包含对Base64的转换操作，用来保存ViewState数据，多个ViewState就会有多个隐藏域。另一个（__EVENTVALIDATION）用来传递事件信息。
另外如果使用了Ajax，UpdatePanel，实际上是有MS封装了JS，源代码会有以下变化：
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >< title >
</ title ></ head >
< body >
< form name = " form1 " method = " post " action = " WebForm.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 = " /wEPDwULLTE5MjU4OTI2NzgPFgIeCkhlbGxvV29ybGQFDEhlbGxvIHdvcmxkIWRkbahG6EdzoxFFBohAjK8hsd+LlD0= " />
</ div >
< script type = " text/javascript " >
// <![CDATA[
var theForm = document.forms[ ' form1 ' ];
if ( ! theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if ( ! theForm.onsubmit || (theForm.onsubmit() != false )) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// ]]>
</ script >
< script src = " /WebResource.axd?d=Ggi7thDTvGAUoIy7vPBG0g2&t=633732594260000000 " type = " text/javascript " ></ script >
< script src = " /ScriptResource.axd?d=F78mckxAPxpkwaBgYPRRhhW2AmtwW3_j5_sZKxEFgrUElYDtHd2YPOY2Ridl4PV878J1rClhSOwRmDJjagjzaMgaUdkaI-BMih4jhW7P_h81&t=633630350040000000 " type = " text/javascript " ></ script >
< script src = " /ScriptResource.axd?d=F78mckxAPxpkwaBgYPRRhhW2AmtwW3_j5_sZKxEFgrUElYDtHd2YPOY2Ridl4PV878J1rClhSOwRmDJjagjzaEvF985SWyDsw_2CT76F9BE1&t=633630350040000000 " type = " text/javascript " ></ script >
< div >
< input type = " hidden " name = " __EVENTVALIDATION " id = " __EVENTVALIDATION " value = " /wEWAwKhrcP5AQKrmr31CQLCi9reAxiWDb1bJVRawNph/w/cH2L24aRz " />
</ div >
< script type = " text/javascript " >
// <![CDATA[
Sys.WebForms.PageRequestManager._initialize( ' ScriptManager1 ' , document.getElementById( ' form1 ' ));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([ ' tUpdatePanel1 ' ], [], [], 90 );
// ]]>
</ script >
< div id = " UpdatePanel1 " >
< div id = " pnlMain " >
< input name = " txtContent " type = " text " value = " 123 " id = " txtContent " />
< input type = " submit " name = " btnSubmit " value = " 提交 " id = " btnSubmit " />
</ div >
</ div >
< script type = " text/javascript " >
// <![CDATA[
Sys.Application.initialize();
// ]]>
</ script >
</ form >
</ body >
</ html >
其中的js用来实现Form表单Ajax方式提交：
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
注：
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.__EVENTTARGET.value实际就是aspx.cs按钮事件的object sender；theForm.__EVENTARGUMENT.value实际就是aspx.cs按钮事件中的EventArgs e；
分别用隐藏域<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />来保存数据。
总之，万变皆html，MS不过就是封装了而已，只要多看看多对比你就会发现好多有趣的东东。