AJAX笔记之二:UpdatePanel

UpdatePanel是最重要的AJAX控件, 它是一个容器, 是局部刷新的单位.

  首先来看它的刷新模式.
  在上一篇笔记中, 我使用了UpdatePanel "主动"指定trigger 的方法, 另外, 也可以在UpdatePanel端不做任何设定, 而"被动" 地接受刷新.

  所以大体来说, 有三种方式使其更新:
  <一>.由UpdatePanel的子控件引起回传, 自动更新.  这种模式是默认的行为, 举个简单的例子, 在UpdatePanel里放一个button, 给button的点击事件写代码, 这样当点击这个按钮时, UpdatePanel进行回传并更新自己的内容. 但是这时, 如果button的点击事件更改了UpdatePanel以外部分的内容, 则更新不会马上显示出来, 因为整页并没有更新, 这个实验上一篇笔记已经描述了.

<二>UpdatePanel指定一个非子控件的控件, 而这个trigger 自己并不知道它会引起整页回传还是UpdatePanel的局部回传. 这种做法就是上一篇所使用的方法. 设置UpdatePanel的Triggers 属性, 而外部的button 本来应该是引起整页回传的, 但是经过UpdatePanel的声明, 这个button 就变成了UpdatePanel的独占的了, 无需经过这个button的同意.

<三>UpdatePanel自己不知道自己何时将被更新, 完全取决于其它控件. 这种情况下, 必须把它的UpdateMode设为Conditional, 这样, 任何一个函数都可以调用它的Update 方法使其重绘, 无论是否子控件都无关紧要.

有了以上的讨论, 再看UpdatePanel 的几个关键属性就很容易理解了, 如果要使用第二, 第三种方式使其更新 ,必须将UpdateMode属性设置了Conditional, 而第一种方式则必须设置为Always,  如果希望子控件能够触发事件, 则把ChilderAsTriggers 设置为true, 否则设为false.

UpdatePanel可以互相嵌套, 但是这种嵌套只是外观上的嵌套, -----内层的UpdatePanel 更新时, 并不会引起外层的UpdatePanel 重绘.

然后再看UpdatePanel 的排版.

UpdatePanel没有height, width 等属性, 所以也就无法设定其尺寸, 然而从工具箱里拖过来以后, 它会有一个默认的大小, 如果往里面往两个控件, 这两个控件就会一上一下地叠起来, 而不会排成一排 . 如果希望子控件排 成一排, 则需要在UpdatePanel 的代码页里, 写一个div, 把所有内容都放进这个div 里面, 然后设定div的宽度 大于等于所有控件横排的宽度, 则这些控件就会自动排 成一排了.