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.jeffzon.net/samples/LightWeightModalUpdateProgress/Default.aspx
演示：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不知道为什么在这里上传不了,就上传到资源区了
