• WebForm原理,aspx服务器端与客户端源码比较


    如果你从前做过asp,php,jsp就会知道,表单真的很重要。

    现在的aspx实际上基础还是html,下面就aspx代码和展现在客户端的源代码进行比较说明:

    aspx代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="TestWebSite.WebForm" %>

    <!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;
    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);
            }
        }
    }

    客户端源代码:

    <!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><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,源代码会有以下变化:

    <!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><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&amp;t=633732594260000000" type="text/javascript"></script>


    <script src="/ScriptResource.axd?d=F78mckxAPxpkwaBgYPRRhhW2AmtwW3_j5_sZKxEFgrUElYDtHd2YPOY2Ridl4PV878J1rClhSOwRmDJjagjzaMgaUdkaI-BMih4jhW7P_h81&amp;t=633630350040000000" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=F78mckxAPxpkwaBgYPRRhhW2AmtwW3_j5_sZKxEFgrUElYDtHd2YPOY2Ridl4PV878J1rClhSOwRmDJjagjzaEvF985SWyDsw_2CT76F9BE1&amp;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不过就是封装了而已,只要多看看多对比你就会发现好多有趣的东东。

    敬告

    作者:pangxiaoliang
    出处:http://www.cnblogs.com/pangxiaoliang
    本文版权归pangxiaoliang和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,谢谢合作。
  • 相关阅读:
    XML相关知识点
    MLPlatform开发日志
    1.0 es6 箭头函数
    基本数学概念
    4.4 thymeleaf使用补充
    vim操作手册
    eclise创建后台项目
    正则表达式
    数据库隔离级别
    1. gradle的使用教程
  • 原文地址:https://www.cnblogs.com/pangxiaoliang/p/1512758.html
Copyright © 2020-2023  润新知