AJAX.NET的UpdatePanel全面应用(1)(转)

UpdatePanel也是微软之所以说是不用写代码即可实现AJAX的资本,今天就根据WebCast的AJAX视频和网上一些文章学习

l          基本属性

1. RenderMode属性

       -Block(默认)

       -Inline

如下代码所示

<form id="form1" runat="server">               <asp:ScriptManager ID="ScriptManager1" runat="server">               </asp:ScriptManager>                   <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block">                      <ContentTemplate>                             Block                      </ContentTemplate>               </asp:UpdatePanel>               Hello World                             <hr />                             <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline">                      <ContentTemplate>                             Inline                      </ContentTemplate>               </asp:UpdatePanel>               Hello World     </form>

 

运行结果

Block Hello World Inline Hello World

 

2. UpdateMode属性  更新类型

       -Always(属性)  总是

       -Conditional  满足一定条件才会更新

如下所示

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">                      <ContentTemplate>                             <%= DateTime.Now %>                             <asp:Button ID="Button1" runat="server" Text="Button" />                      </ContentTemplate>               </asp:UpdatePanel>                 <hr />                             <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">                      <ContentTemplate>                             <%= DateTime.Now %>                             <asp:Button ID="Button2" runat="server" Text="Button" />                      </ContentTemplate>               </asp:UpdatePanel>

结果，点击第一个Button的时候只有当前第一个更新了时间

点击下面的Button时候就两个一起更新了因为ChildrenAsTriggers默认为True,

尽量少使用Always，因为这样的话每次异步回送都会传送数据

 

3. ChildrenAsTriggers属性(默认为True)  更新的触发器

<asp:UpdatePanel ID="UpdatePanel1" runat="server">                      <ContentTemplate>                             <%= DateTime.Now %>                      </ContentTemplate>               </asp:UpdatePanel>                             <hr />                             <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">                      <ContentTemplate>                             <%= DateTime.Now %>                             <asp:Button ID="Button1" runat="server" Text="Button" />                      </ContentTemplate>               </asp:UpdatePanel>

结果 当UpdateMode 为Conditional时点击只有上方的时间更新,

当UpdateMode="Always"直接抛出异常，因为本身已经矛盾了

 

4. Triggers集合属性 

       -AsyncPostBackTrigger异步回送, 如指定某个控件单独刷新

       -PostBackTrigger   同步回送, 引发一个传统的刷新

如

<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">                      <ContentTemplate>                             <%= DateTime.Now %>                             <asp:Button ID="Button1" runat="server" Text="Button" />                             <asp:Button ID="Button2" runat="server" Text="Button" />                      </ContentTemplate>                      <Triggers>                             <asp:AsyncPostBackTrigger ControlID="Button1" />                      </Triggers>               </asp:UpdatePanel>

结果：这样的话点击Button1才会引发UpdatePanel1的更新, 另外有个属性是EventName就是对应的引发更新的事件

 虽然这样是只有Button1进行更新，但实际上Button2 也发送数据到了服务器，只是没进行处理

如

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">                      <ContentTemplate>                             <%= DateTime.Now %>                             <asp:Button ID="Button1" runat="server" Text="Button" />                      </ContentTemplate>                      <Triggers>                             <asp:PostBackTrigger ControlID="Button2" />                      </Triggers>               </asp:UpdatePanel>                             <asp:UpdatePanel ID="UpdatePanel2" runat="server">                      <ContentTemplate>                             <%= DateTime.Now %>                             <asp:Button ID="Button2" runat="server" Text="Button" />                      </ContentTemplate>              </asp:UpdatePanel>

结果,点击Button1的时候 是异步刷新。Button2就刷新了整个页面

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">               <ContentTemplate>                      <%= DateTime.Now %>                      <asp:UpdatePanel ID="UpdatePanel2" runat="server">                             <ContentTemplate>                                    <%= DateTime.Now %>                                    <asp:Button ID="Button1" runat="server" Text="Button" />                             </ContentTemplate>                      </asp:UpdatePanel>               </ContentTemplate>        </asp:UpdatePanel>

结果，点击Button1的时候只有刷新当前UpdatePanel

l          相关API

UpdatePanle

       -Update方法：强制某个UpdatePanel更新

       -IsInPartialRendering: 检查是否在输出过程中

ScriptManager

       -GetCurrent静态方法： 获得当前页面上的ScriptManager对象

       -IsInAsyncPostBack: 是否在部分回发过程。

       -RegisterAsyncPostBackControl方法：指定某控件为异步PostBack控件

       -RegisterPostBackControl：指定某控件为传统方式PostBack控件

页面        <asp:ScriptManager ID="ScriptManager1" runat="server">         </asp:ScriptManager>                 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional>             <ContentTemplate>                 <%=DateTime.Now %>                 <asp:Button ID="Button2" runat="server" Text="Button2" />             </ContentTemplate>         </asp:UpdatePanel>                 <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />

CS文件     protected void Page_Load(object sender, EventArgs e)     {         ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.Button1);         ScriptManager.GetCurrent(this).RegisterPostBackControl(this.Button2);     }     protected void Button1_Click(object sender, EventArgs e)     {         this.UpdatePanel1.Update();     }

结果，当你点击Button2的时候，会引发传统的更新。Button1的时候，会引发一个异步刷新。

这里只是个演示，所以代码都很简单。

 

l          相关控件

1 .UpdateProgress

       -DynamicLayout属性：隐藏时是否占位，默认为true

       -DisplayAfter属性：延迟多少时间后显示，单位毫秒，默认值500

       -AssociatedUpdatePanelID属性：关联的UpdatePanel的ID，默认为null

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false" AssociatedUpdatePanelID="UpdatePanel1">                      <ProgressTemplate>                             DynamicLayout = false                      </ProgressTemplate>               </asp:UpdateProgress>                   <asp:UpdatePanel ID="UpdatePanel1" runat="server">                      <ContentTemplate>                             <%= DateTime.Now %>                             <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />                      </ContentTemplate>               </asp:UpdatePanel>                             <asp:UpdatePanel ID="UpdatePanel2" runat="server">                      <ContentTemplate>                             <%= DateTime.Now %>                             <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button1_Click" />                      </ContentTemplate>               </asp:UpdatePanel>                             <asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="true" DisplayAfter="3000">                      <ProgressTemplate>                             DynamicLayout = true                      </ProgressTemplate>               </asp:UpdateProgress>               <hr />       protected void Button1_Click(object sender, EventArgs e)     {         Thread.Sleep(2000);     }

结果，DynamicLayout为true时会占据一个位置,当指定了AssociatedUpdatePanelID的时候，只有对应的UpdatePanel刷新才会触发,另外，UpdateProgress必须是一个异步回送，否则触发不了.

在上面的基础上添加一个属性

 <asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout=true DisplayAfter="3000">

那么结果就变成上面那个显示完后等待3秒才显示下一个

 UpdateProgress可以实现很多功能,这个改天再找个时间研究。

比如视频里自带的

 

轻量级解决方案：http://www.cnblogs.com/JeffreyZhao/archive/2007/03/22/LightWeight_ModalUpdateProgress_Solution.html

演示：http://www.jeffzon.net/samples/LightWeightModalUpdateProgress/Default.aspx

控件：http://www.cnblogs.com/JeffreyZhao/archive/2007/03/26/ModalUpdatePanel_Control.html

演示：http://www.jeffzon.net/Samples/ModalUpdateProgressControl/Default.aspx

 

2. Timer

       -Interval属性：更新时间间隔，单位毫秒，默认值为60000

       Tick事件。

 

Timer控件的使用和WinForm的差不多，也很简单。

比如<asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer>就是说每格1秒触发一次

 

3. Validators

       -并非所有的控件都能在UpdatePanel中工作,如treeView FileUpload7B49

 

Validators 就是ASP.NET中本身的验证控件了,使用就不多说了，但有个BUG，比如RequiredFieldValidator。

当第一次验证的TextBox控件为空的时候，提交会提示错误，但满足后提交了，清空掉再提交，就不会报错了，这是在UpdatePanel里的BUG.

解决的方案是引用编译过的Validators.dll

在Web.Config Page节点里

添加,替换掉之前的

<tagMapping>                             <add tagType="System.Web.UI.WebControls.CompareValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CompareValidator, Validators"/>                             <add tagType="System.Web.UI.WebControls.CustomValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CustomValidator, Validators"/>                             <add tagType="System.Web.UI.WebControls.RangeValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RangeValidator, Validators"/>                             <add tagType="System.Web.UI.WebControls.RegularExpressionValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RegularExpressionValidator, Validators"/>                             <add tagType="System.Web.UI.WebControls.RequiredFieldValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RequiredFieldValidator, Validators"/>                             <add tagType="System.Web.UI.WebControls.ValidationSummary" mappedTagType="Microsoft.Web.UI.Compatibility.ValidationSummary, Validators"/>                      </tagMapping>

 Validators.dll不知道为什么在这里上传不了,就上传到资源区了

下载地址:http://download.csdn.net/source/237157