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所用，值都被序列化了，用来保存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="" />来保存数据。