无刷新“页面跳转” Page，你是怎样处理回发事件的？ 深入理解 __doPostBack

  无刷新转页面? 这是我前些天提出一个想法。为什么会有这样的想法呢？主要是考虑到目前如果使用Atlas作开发的话，那就不可以避免的要下载它的脚步库。一般情况下，我们都会下载的是Atlas.js(少数情况才会下载AtlasRuntime.js)，这个文件就要238KB，如果是Debug版本的程序的话，那么将会下载Debug版本的Atlas.js，而这个文件就要360KB。（所以要发布asp.net程序时,设置web.config的debug="false"很重要的．）再得寸进尺点，原来每次转页面时，都需要重新下载所以有CSS，JS，Image，更新ViewState等等，这些都需要花费非常多的资源和时间(可以通过Fiddler查看一下访问一次页面的过程)。那么，是不是有一种办法，做到既可以改变页面的功能，又可以不重新刷新页面呢？这样效率那该提高多少啊？

         不用框架页面，那就尝试使用动态加载用户控件的方式吧。主要思路是这样的，把原来做在页面上功能封装到一个用户控件去，利用导航菜单来动态加载不同的用户控件。由于大部分情况下，页面的框架基本都是一样的，不同的功能页面也就是部份内容的不同，和执行不同的功能而已。这就是给这样的思路提供了一个前提环境条件，做一个页面（功能类似一个MasterPage），在这个页面上做好页面总体布局，在需要动态改变的位置上放一个PlaceHolder，用Atlas UpdatePannel包起来，设置合适的更新条件刷新这块区域的内容。

         简单来看一下实现步骤。新建一个Web Site工程，创建三个不同功能的WebUserControl，在Default.aspx页面上放一个Menu控件做导航，利用它的MenuItemClick事件作导航，而不要直接设置NavigateUrl属性。 

1  <asp:Menu ID="Menu1" runat="server" OnMenuItemClick="Menu1_MenuItemClick">
2                 <Items>
3                     <asp:MenuItem Text="WebUserControl1" Value="WebUserControl1.ascx"></asp:MenuItem>
4                     <asp:MenuItem Text="WebUserControl2" Value="WebUserControl2.ascx"></asp:MenuItem>
5                     <asp:MenuItem Text="WebUserControl3" Value="WebUserControl3.ascx"></asp:MenuItem>
6                 </Items>
7             </asp:Menu>

       在页面的合适位置上放一个asp:PlaceHolder控件，将它包含在atlas:UpdatePanel里面，设置好EventTrigger，作为这部份的刷新条件：

 

<atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
            <Triggers>
                <atlas:ControlEventTrigger ControlID="Menu1" EventName="MenuItemClick" />
            </Triggers>
            <ContentTemplate>
                <div style="float: left; margin-left: 10px; width: 300px; height: 300px;">
                    <asp:PlaceHolder ID="PlaceHolder1" runat="server" EnableViewState="false"></asp:PlaceHolder>
                </div>
            </ContentTemplate>
        </atlas:UpdatePanel>

    接下来就如何动态加载UserControl的问题了，动态加载UserControl需要注意的一些细节在这篇文章里(Asp.Net中页面运行时动态载入的UserControl内元素的事件处理的注意事项已经一个很好的讨论了。我的做法重写CreateChildControls方法，然后在这个方法里动态加载用户控件。但是还需要解决一个问题，如何才能知道要加载哪个用户控件呢？因为根据页面的事件模型，控件的处理事件是在页面加载，处理完后才被处理的，也就Menu1_MenuItemClick事件是晚于CreateChildControls方法被执行的。那在CreateChildControls方法怎么才知道要加载的控件的呢？那么如果能在这个方法中得到引发页面回发的事件源和参数就可以解决了。经过调试和查看Page类的源代码，发现有在Page类中有这两个常量定义，postEventArgumentID  (值为："__EVENTARGUMENT")和postEventSourceID(值为： "__EVENTTARGET")。既然有这两个常量定义，肯定也可以得到它们的请求值，最终找到了可以在Request.Form取到他们的值，而且也是我希望的值。来看看页面代码：)

 

         不是很复杂的代码，应该能一看就明白了。这里就不再浪费篇幅了。

         总结：通过这种方法来改变页面功能的好处是，可以大大减少加载页面的时间，减小服务器的压力。但是可能还有很多我没有考虑到的问题会出现。希望能有一个讨论的结果。另外，在加载用户控件的部分前面，由于前面没有看到那两个常量，使用了另一种方法，但是当从一个UserControl转到另一个UserControl时，新的UserControl的第一次回发事件将不会被执行，这个问题一直没能解决。在附下载的例子中的default.aspx就还存在这样的问题，找到问题的起因，但是一直没能明白过来。

    CODE

在我的前一篇POST（ 无刷新"页面跳转"）中有提到Page类中的两个常量（postEventArgumentID="__EVENTARGUMENT"）和postEventSourceID="__EVENTTARGET"），通过Request.Form（或Request.Params）可以取到它们的值，它们的值的作用是可以知道是哪个控件引发了当前页面的回发。对于Menu控件，这两个值非常好。对于LinkButton，可以取到 postEventSourceID有内容，是LinkButton的ID。但是对于Button和ImageButton，就都取不到这两个值了。附件中的页面就是这样一个例子。

   我分析了一下，它们还是有一定的共同和不同点的。Menu，LinkButton都实现了IPostBackEventHandler ，而Button,ImageButton除了实现这个接口外，还实现了IPostBackDataHandler。由于平常对控件这方面了解比较少，到目前为止还没有真正理解控件机制，即使用Reflector仔细查看了一下Page的反编译代码，关键在ProcessPostData方法，但还是无法找出问题所在。为什么多实现了一个接口，差别咋就这么大呢？IPostBackDataHandler多做了什么事了呢？

另外，想在CreateChildControls方法中得到引发页面回发的Button或ImageButton该怎样做比较合适呢？

Page.rar

在我的随笔《Page，你是怎样处理回发事件的？》中曾提出一个疑问，如何得到引起页面PostBack的控件？通过阅读Page类的源码，误打误撞，无意中看到了__EVENTTARGET和__EVENTARGUMENT这两个常量的定义，并通过调试分析页面，知道了通过Request.Form[“__EVENTTARGET”]可以获取到触发页面PostBack的事件源（控件的ID）。对于一般的控件，这样就可以了，唯有Button和ImageButton触发的PostBack无法通过这种方式获取到它们的ID，起初还以为是它们实现的接口的不同而产生PostBack方式的不同。刚刚在AspAlliance.看到一篇关于__doPostBack的文章（原文：《Understanding the JavaScript __doPostBack Function》），才真正明白了页面PostBack的内在机制，疑团也终于解开了。下面来简单看一下页面PostBack的原理，和Button，ImageButton PostBack的特殊性。

   __doPostBack是一个纯粹并且是非常简单的javascript函数，大部分的页面PostBack都是由它触发的。注意，这里是“大部分”，因为只有两个Web Server Control    会自己触发页面的PostBack,其它的所以控件都是通过__doPostBack函数触发页面的PostBack，那先来看一下这个函数的定义吧：

CODE1:

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

}

   通过上面的代码可以看到，__doPostBack带有两个参数，eventTarget是标识将要引发页面PostBack的控件ID，eventArgument参数提供了在引发页面PostBack事件时所带的额外参数。当然这个函数被函数时，这两个参数的值将赋值给页面的两个隐含变量__EVENTTARGET和__EVENTARGUMENT，然后调用页面的submit方法提交页面表单。这就是为什么我们可以通过Request.Form[“__EVENTTARGET”]获取得到引发页面PostBack的控件ID的原因。

   了解了__doPostBack函数后，我们可以很容易的利用它非常方便地自己触发自定义的PostBack事件。那上面也说了，大部分的控件都是调用这个方法来引了页面的PostBack，只有两个控件是例外，Button 和 ImageButton，正是因为它们不是通过调用__doPostBack来回发事件，所以通过表单隐含变量__EVENTTARGET和__EVENTARGUMENT是无法获取得到引发PostBack的Button或ImageButton的ID和参数值的，只有通过下面的方式才能得它们的实例，进而判断是哪个控件引发的PostBack的:

CODE2:

foreach (string str in Request.Form)

    {

    Control c = Page.FindControl(str);

if (c is Button)

{

control = c;

break;

}

}

   为什么能通过枚举Request.Form集合的Key值，查找到的回发事件源呢？在这里Button和ImageButton又有一些不同。Button控件引发的PostBack，会将Button本身的ID作为Request.Form的一个Key，它的Value是Button的Text属性值，回传给服务器，这样服务器就可以通过枚举Request.Form的Key值，去查找出控件实例，判断是否为Button控件，进而得到是哪个控件引发的PostBack事件。而ImageButton的不同就在于，它不仅仅是用ImageButton的ID作为Request.Form的Key，它是用ImageButton的ID加上.x和.y，作为Key，在Request.Form添加两上键值对，这两个键值对的值应该是标识ImageButton的图片大小。同样的，了解了这个规律后，我们仍然可以通过一定的方式得到是否是由ImageButton引发的PostBack。

总结：理解并掌握__doPostBack原理对我们更加了解Page的事件模型有非常大的帮助，并且也是我们进一步利用好页面的PostBack事件的一个重要基础。在整个asp.net页面PostBack模型中，只有Button和ImageButton是个例外，其它的控件都是一样的,也就是使用__doPostBack函数。在当我们需要通过__EVENTTARGET取得到事件源控件的话，这点是特别要注意的。

 

 

protected string ControlType
    {
        get
        {
            if (ViewState["ControlType"] != null)
            {
                return ViewState["ControlType"].ToString();
            }
            return "";
        }
        set
        {
            ViewState["ControlType"] = value;
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
       
    }
    protected override void CreateChildControls()
    {
        base.CreateChildControls();
        if (Request.Form["__EVENTTARGET"] != null && Request.Form["__EVENTTARGET"].Equals("Menu1"))
        {
            ControlType = Request.Form["__EVENTARGUMENT"];
        }
        if (!string.IsNullOrEmpty(ControlType))
        {
            ITemplate m_template = Page.LoadTemplate(ControlType);
            m_template.InstantiateIn(PlaceHolder1);
            //PlaceHolder1.Controls.Add(Page.LoadControl(ControlType)); 这种加载方法也可以
        }
    }