Hello World
Spiga

从Atlas到Microsoft ASP.NET AJAX(8) - UpdatePanel Control

2006-10-22 21:17 by 老赵, 5332 visits
UpdatePanel

对于UpdatePanel控件的使用是ASP.NET AJAX Extentions的重要部分。我们收到了关于它和UpdateProgress控件的大量用户反馈。为了增强局部刷新的功能我们作了多处修改,并加强了UpdatePanel对于控件的兼容性。我们也为异步PoskBack实现了一个丰富的事件模型,这样您就可以在客户端响应它们并对页面更新提供额外操作了。


ScriptManager Control

在RTM版本中,ScriptManager有一个EnablePartialRendering属性,其默认值为true,这减少了使用UpdatePanel来做异步的页面局部刷新所需的步骤。

为了降低控件的复杂程度,ScriptManagerErrorTemplate属性在RTM版本中被去除了。现在错误处理的模型变得更加灵活,例如您可以为它创建一个独立的服务器控件。另外,您现在也可以使用ScriptManagerAsyncPostBackErrorMessage属性,不过它只是设置了默认的错误信息,如果您需要动态地自定义的错误信息的话,您可以使用AsyncPostBackError事件。

现在ScriptManager暴露出了一个新的属性AsyncPostBackTimeout,以此控制异步PostBack的超时时间。

值得一提的是,服务器控件目前可能会使用到ScriptManager中新增的注册方法。这个方法增加了对于UpdatePanel使用的支持,并减少了CTP版本中UpdatePanel的复杂性。现在的资源已经包括了脚本,样式表,Hidden Field等。ClientScriptManager中的方法与上述方法相对应。它们能够接受一个控件实例作为参数,这样如果在UpdatePanel中使用这些控件,他们所需的脚本就能被正确跟踪了。


Dynamic UpdatePanel Controls

现在有两种在页面中动态添加UpdatePanel的方法,这是RTM版本中最大的改进。使用动态UpdatePanel的方法是:
  • 编写自定义控件的开发人员现在能够将UpdatePanel控件添加到组合控件中。这样,只要页面中存在ScriptManager并且其EnablePartialRendering设为true,这样就能使用该自定义控件并得到局部刷新的体验了。并且,如果页面中没有ScriptManager,也能在传统PostBack模型中正常使用该控件。
  • 页面开发人员能够在其他控件的模版中添加UpdatePanel
  下面的示例展示了如何在自定义控件中使用UpdatePanel控件。
protected override void CreateChildControls() {
    
base.CreateChildControls();

    ScriptManager sm 
= ScriptManager.GetCurrent(Page);
    Control parent;
    Control container;
    
if (sm == null || !sm.EnablePartialRendering) {
        
// If not doing partial rendering, use a
        
// dummy control as the container.
        parent = container = new Control();
    }
    
else {
        
// Create an UpdatePanel control.
        UpdatePanel up = new UpdatePanel();

        
// Instead of adding child controls directly to 
        
// the UpdatePanel control, add them to its 
        
// ContentTemplateContainer.
        container = up.ContentTemplateContainer;
        parent 
= up;
    }

    AddDataControls(container);
    Controls.Add(parent);
}


Client Events During Asynchronous Postbacks

在CTP版本中,客户端PageRequestManager对象依靠XMLHttpRequest对象来实现异步的PoskBack并处理Response。在RTM版本中,PageRequestManager对象提供了一个异步PoskBack的生命周期事件,您能够使用它们自定义处理Request和Response的方式。以下为可用的客户端事件,并且提供了事件所需的参数信息:
  • initializeRequest:您能够使用这个事件来取消即将发送的异步PostBack请求,它也能够让您根据PostBack信息来做一些额外的工作。这个事件的参数为InitializeRequestEventArgs类型。
  • beginRequest:您能够使用该事件来启动某些工作,例如您可以在这个事件中显示Progress并且在endRequest事件中再将其隐藏。这个事件的参数为BeginRequestEventArgs
  • pageLoding:您能够使用这个事件中为UpdatePanel的即将更新或删除进行一些额外的工作,例如释放资源。您也可以在响应这个事件时检查服务器端发送过来的自定义信息,以此进行一些自定义工作。这个事件的参数为PageLoadingEventArgs类型。
  • pageLoaded:这个事件和pageLoading事件相似,它提供了异步PostBack结果所创建的UpdatePanel的信息。这个事件的参数为PageLoadedEventArgs类型。
  • engRequest:您能够使用这个事件来自定义错误处理方式,处理服务器端发送的额外信息等工作。您可以使用它来隐藏UpdateProgress控件。这个事件的参数为EndRequestEventArgs类型。

Developing Controls Compatible with the UpdatePanel Control

在CTP版本中,UpdatePanel控件会处理许多被输出的对象,甚至包括不在UpdatePanel中的控件,然后在页面上进行完整的更新。这使一些控件无法和UpdatePanel兼容了。例如,在CTP版本中,如果在UpdatePanel动态添加ASP.NET验证控件的话,它们便无法正确工作了,这种情形在使用Wizard控件的每一步中验证用户输入时尤为常见。

在RTM版本中改变了UpdatePanel的模型。您可以使用注册脚本类库相同的办法,向ScriptManager注册将要发送到客户端的脚本或数据。在RTM版本中包括了一组新的ASP.NET验证控件,它们会将自己的脚本使用ScriptManager注册。这些新控件的Tag名与ASP.NET原有的验证控件相对应,因此您不需要改变在页面中声明创建的验证控件。不过,如果在UpdatePanel内部使用了验证控件的话,您需要改变代码以使用新的控件。

下面的示例展示了RTM版本中的一个兼容UpdatePanel的自定义控件。如下:
protected override void OnPreRender(EventArgs e) {
    
base.OnPreRender(e);

    Control control 
= FindControl(_controlID);

    
// Register scripts with new ScriptManager APIs.
    
// The scripts hook up new PageRequestManager events.
    string script = String.Format(
        CultureInfo.InvariantCulture,
@"var {0}_hover = 
new Microsoft.Samples.HoverExtender(document.getElementById('{1}'), '{2}');
{0}_hover.attach();
",
        ClientID,
        control.ClientID,
        ColorTranslator.ToHtml(BackgroundColor));

    ScriptManager.RegisterClientScriptInclude(
        
thistypeof(HoverExtender), "HoverExtenderScript",
        ResolveClientUrl(
"~/ScriptLibrary/HoverExtender.js"));
    ScriptManager.RegisterStartupScript(
        
thistypeof(HoverExtender), ClientID, script, true);
}


Sending Additional Data to the Client

在CTP版本中,有个功能比较难以实现,那就是在异步PoskBack页面后,根据从服务器端收到的数据更新UpdatePanel外的控件。在RTM版本中可以通过调用ScriptManager的一个方法将数据注册并输出到页面,以此解决这个问题。

试想,如果需要使用服务器的代码来改变客户端的Timer控件的interval和enabled属性的值,但是这个Timer却不在UpdatePanel中。在CTP版本中是无法做到这一点的。

在RTM版本中,ScriptManager在服务器段保存了一个字典对象,您可以使用RegisterDataItem方法来更新和注册对象。这个字典会被发送到客户端,您可以在客户端的pageLoadingpageLoadedendRequest事件中通过eventArgs.get_dataItems()方法获得该字典对象。

下面的示例展示了注册数据的方法:
// Server control code.
...
public int interval {
    
get {...}
    
set {
        _data 
= value;
        ...
    }
}

void PreRender() {
    ScriptManager sm1 
= ScriptManager.GetCurrent(Page);
    
if (sm1 != null && sm1.IsInAsyncPostBack) {
        ScriptManager.RegisterDataItem(
this, _data.ToString());
    }

    
// The control also needs to register script to handle the
    
// endRequest event on the client and retrieve this value. 
    
// The script below adds a handler for the current instance 
    
// of the PageRequestManager object and calls the 
    
// get_dataItem() method from eventArgs.
    ScriptManager.RegisterClientScriptBlock(thisthis.GetType(), key, script)
}

Comment  上面的代码最有意思的可能是最后一行,它的作用是在客户端的PageRequestManager对象中注册一个endRequest的handler,以此来做一些修改或者别的工作。其实有了这个方法之后,即使没有向客户端输出DataItem的支持,也已经能够在操作客户端对象了。有了DataItem这一功能之后,可能更重要的作用就是能够使服务器端代码和客户端代码分开,分别进行集中地维护。


Custom Error Handling and Redirection

在CTP版本中并没有提供控制错误的办法,甚至没有自定义错误的设置。在RTM版本中则解决了这个问题。

ScriptManager对象里提供了一个属性:AllowCustomError。当该属性被设为false时,ScriptManager对象会覆盖自定义的错误跳转,并将错误信息发送到客户端,这样您就可以将错误信息显示出来,而避免了页面被转向到其他地方。

在RTM版本中是通过一个额外的Redirct Module来控制页面转向的。因此,在RTM版本中已经能够处理跨页面的Posting的情况。


Triggers

在CTP版本中,ScriptManager控件使用了ControlValueTriggerControlEventTrigger类型,并将它们存放一个触发器集合中,以此将这些触发器绑定到页面的控件上去。在RTM版本中,两者被集中到了一个类型:AsyncPostBackTrigger,以此避免以前的两个触发器可能带来的混乱状况。

根据用户反馈,我们增加了一个PostBackTrigger对象,它提供了了从UpdatePanel内部产生页面完全(同步)PostBack的能力。这个Trigger对象现在也能够与实现了IPostbackEventHandlerIPostbackDataHandler或者INamingContainer接口的控件配合使用。

AsyncPostBackTrigger能够使UpdatePanel触发异步的PostBack更新。这个触发器也能指向UpdatePanel外部的控件,或者指向控件的层次结构中的父控件。当一个作为naming container的控件被指定为触发器,则它内部的所有控件所引发的PoskBack都和这个触发器的行为相同。

下面的例子展示了AsyncPostBackTrigger对象声明形式的使用方法:
<asp:Button runat="server" id="Button1" Text="Go" />
<asp:UpdatePanel ID="UP1" UpdateMode="Conditional" runat="server">
    
<ContentTemplate>...</ContentTemplate>
    
<Triggers>
        
<asp:AsyncPostBackTrigger ControlID="Button1" />
    
</Triggers>
</asp:UpdatePanel>

一个PostBackTrigger能够指向一个UpdatePanel内部的控件,使它能产生普通的PostBack。这些控件必须是当前UpdatePanel内部的控件。


UpdateProgress Control

在RTM版本中增强了UpdateProgress控件,使它具有了一个额外的功能:指定一个时间间隔,只有异步PostBack超出这个时间后才显示Progress控件。您也可以控制UpdateProgress的输出来控制这个控件在隐藏时是否会占用页面的空间,就像设置ASP.NET验证控件的DisplayMode属性一样。另外,您还可以通过增加几行代码,为Progress UI添加一个取消的功能。

下面的例子展示了如何设置UpdateProgress控件,使它只在PostBack超过半秒(500毫秒)之后才显示出来:
<asp:UpdateProgress runat=server ID="Progress1" DisplayAfter="500">
    <ProgressTemplate>
        <b>Working on request...</b>
        <input type="button" id="abortButton" onclick="abortPB()" value="Cancel" />
    </ProgressTemplate>
</asp:UpdateProgress>

<script type="text/javascript">
    function abortPB() {
        var obj = Sys.WebForms.PageRequestManager.getInstance();
        if (obj.get_isInAsyncPostBack()) {
            obj.abortPostBack();
        }
    }

</script>
Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

13 条回复

  1. MK2
    *.*.*.*
    链接

    MK2 2006-10-23 04:25:00

    呵呵,惊人的速度```

  2. lone[未注册用户]
    *.*.*.*
    链接

    lone[未注册用户] 2006-10-23 09:18:00

    部分刷新 >> 局部刷新 比较好 :)

  3. 老赵
    admin
    链接

    老赵 2006-10-23 09:42:00

    @lone
    有道理。:)

  4. 小蜗牛
    *.*.*.*
    链接

    小蜗牛 2006-10-23 19:42:00

    恩,翻译能力会提高的:)

  5. 刚刚
    *.*.*.*
    链接

    刚刚 2006-10-26 14:06:00

    好译文,为我们这些E文差的人提供了不少帮助!

  6. baiwei1977
    *.*.*.*
    链接

    baiwei1977 2007-02-07 03:50:00

    想请问一下.1.0出来后,UpdateProgress还在吗?
    我安装了1.0UpdateProgress怎么没有了?谢谢.

  7. 老赵
    admin
    链接

    老赵 2007-02-07 09:11:00

    @baiwei1977
    UpdateProgress和UpdatePanel都在啊。:)

  8. baiwei1977
    *.*.*.*
    链接

    baiwei1977 2007-02-07 17:13:00

    找到了,原来系统有问题了。谢谢。

  9. 老赵
    admin
    链接

    老赵 2007-02-07 21:59:00

    @baiwei1977
    :)

  10. ruN[未注册用户]
    *.*.*.*
    链接

    ruN[未注册用户] 2007-03-10 16:26:00

    谢谢。。。 :D

  11. 老赵
    admin
    链接

    老赵 2007-03-11 00:20:00

    @ruN
    小处有些改变,对照着看吧。:)

  12. cindy[未注册用户]
    *.*.*.*
    链接

    cindy[未注册用户] 2007-06-04 17:02:00

    老赵:您好!
    在使用atlas中碰到一个问题:因为是和treeview一起使用
    所以就先把treeview加到updatepanel中
    因为还有涉及到其他控件的刷新的问题
    所以使用这个函数
    TreeView1_TreeNodeCheckChanged1{
    if (ScriptManager1.IsInAsyncPostBack)
    {
    string callbackString = Map1.CallbackResults.ToString();
    ScriptManager1.RegisterDataItem(Map1, callbackString,true);
    }


    现在的问题比较让人头疼,在点击treeview时可能改变了多个节点的状态,导致进入TreeView1_TreeNodeCheckChanged1这个函数多次进入,在第二次执行ScriptManager1.RegisterDataItem就开始报错,有没有办法可以解决这个问题呢?
    谢谢!

  13. 最好的防守是进攻[未注册用户]
    *.*.*.*
    链接

    最好的防守是进攻[未注册用户] 2009-03-30 14:16:00

    你好:这几天写了个自定义的控件。碰见刷新问题。看到楼主的这篇文章。哇
    2006年的了。
    AddDataControls(container);里面这个没有? 不知道有没有新的关于这方面的知识。供我学习参考的。谢谢。。。。

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我