您的位置：首页 > 其它

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

2007-08-29 12:32 471 查看

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
[align=center][/align]
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可以实现很多功能,这个改天再找个时间研究。
比如视频里自带的

轻量级解决方案：/article/4582928.html
演示：http://www.jeffzon.net/samples/LightWeightModalUpdateProgress/Default.aspx
控件：/article/4582931.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节点里
添加,替换掉之前的

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航