ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）

UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法（第一篇）。

主要内容

1．UpdatePanel控件概述

2．UpdatePanel工作原理

3．ContentTemplate属性

4．ContentTemplateContainer属性

5．Triggers属性

一．UpdatePanel控件概述

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<!--

-->

</ContentTemplate>

<asp:AsyncPostBackTrigger />

<asp:PostBackTrigger />

</Triggers>

</asp:UpdatePanel>

UpdatePanel重要的属性如下：

属性	说明
ChildrenAsTriggers	当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。
RenderMode	表示UpdatePanel最终呈现的HTML元素。Block（默认）表示<div>，Inline表示<span>
UpdateMode	表示UpdatePanel的更新模式，有两个选项：Always和Conditional。Always是不管有没有Trigger，其他控件都将更新该UpdatePanel，Conditional表示只有当前UpdatePanel的Trigger，或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送，或是服务器端调用Update()方法才会引发更新该UpdatePanel。

二．UpdatePanel工作原理

UpdatePanel的工作依赖于ScriptManager服务端控件（ASP.NET AJAX入门系列（2）：使用ScriptManager控件）和客户端PageRequestManager类（Sys.WebForms.PageRequestManager，在后面的客户端类中会专门说到），当ScriptManager中允许页面局部更新时，它会以异步的方式回传给服务器，与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新，在从服务端返回HTML之后，PageRequestManager会通过操作DOM对象来替换需要更新的代码片段。

看一下官方网站提供的UpdatePanel工作原理图：

三．ContentTemplate属性

Contente Template标签用来定义UpdatePanel的内容，在它里面可以放任何ASP.NET元素。如果你想要使用编程的手法来控制UpdatePanel中的内容，就需要使用ContenteTemplateContainer，下面会说到，先来看一个简单的ContentTemplate的例子。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Calendar ID="Calendar1" ShowTitle="True" runat="server" />

<div>

Background:

<br />

<asp:DropDownList ID="ColorList" AutoPostBack="True" OnSelectedIndexChanged="DropDownSelection_Change"

runat="server">

<asp:ListItem Selected="True" Value="White">

White </asp:ListItem>

<asp:ListItem Value="Silver">

Silver </asp:ListItem>

<asp:ListItem Value="DarkGray">

Dark Gray </asp:ListItem>

<asp:ListItem Value="Khaki">

Khaki </asp:ListItem>

<asp:ListItem Value="DarkKhaki"> D

ark Khaki </asp:ListItem>

</asp:DropDownList>

</div>

</ContentTemplate>

</asp:UpdatePanel>

事件代码：

void DropDownSelection_Change(Object sender, EventArgs e)

{

Calendar1.DayStyle.BackColor =

System.Drawing.Color.FromName(ColorList.SelectedItem.Value);

}

</script>

四．ContentTemplateContainer属性

如果要使用编程的手法去设置UpdatePanel中的内容，需要创建一个UpdatePanel，并且添加控件到ContentTemplateContainer，而不能直接添加控件到ContentTemplate，如果想直接设置ContentTemplate，则需要编写一个自定义的Template，并去实现位于System.Web.UI命名空间下的接口ITemplate。看一个简单的来自于官方网站的例子：

<%@ Page Language="C#" %>

protected void Page_Load(object sender, EventArgs e)

{

UpdatePanel up1 = new UpdatePanel();

up1.ID = "UpdatePanel1";

up1.UpdateMode = UpdatePanelUpdateMode.Conditional;

Button button1 = new Button();

button1.ID = "Button1";

button1.Text = "Submit";

button1.Click += new EventHandler(Button_Click);

Label label1 = new Label();

label1.ID = "Label1";

label1.Text = "A full page postback occurred.";

up1.ContentTemplateContainer.Controls.Add(button1);

up1.ContentTemplateContainer.Controls.Add(label1);

Page.Form.Controls.Add(up1);

}

protected void Button_Click(object sender, EventArgs e)

{

((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +

DateTime.Now.ToString();

}

</script>

<title>UpdatePanel Added Programmatically Example</title>

</head>

<body>

<div>

<asp:ScriptManager ID="TheScriptManager"

runat="server" />

</div>

</form>

</body>

</html>

五．Triggers属性

在ASP.NET AJAX中有两种Triggers：分别为AsyncPostBackTrigger和PostBackTrigger，AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器，它需要设置的属性有控件ID和服务端控件的事件；PostBackTrigger用来指定在UpdatePanel中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的整页回送。这一点跟Atlas有很大的区别，大家需要注意。看一个小例子，虽然两个Button都放在了UpdatePanel中，但是由于在PostBackTrigger中指定了Button2，所以它使用的仍然是整页回送。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

void Button1_Click(object sender, EventArgs e)

{

this.Label1.Text = "更新时间：" + System.DateTime.Now.ToString();

}

void Button2_Click(object sender, EventArgs e)

{

this.Label1.Text = "更新时间：" + System.DateTime.Now.ToString();

}

</script>

<title>UpdatePanel Trigger Sample</title>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

</div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<div>

<asp:Button ID="Button1" runat="server" Text="异步回送" OnClick="Button1_Click"/>  

<asp:Button ID="Button2" runat="server" Text="整页回送" OnClick="Button2_Click"/><br />

<br />

<asp:Label ID="Label1" runat="server" Text="当前时间" Font-Bold="True" Font-Size="Large"></asp:Label></div>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="Button1"/>

<asp:PostBackTrigger ControlID="Button2" />

</Triggers>

</asp:UpdatePanel>

</form>

</body>

</html>

（未完待续）
示例代码下载：http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo1

作者：TerryLee
出处：http://terrylee.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

posted @ 2006-10-29 22:57 TerryLee 阅读(28571) 评论(114) 编辑收藏网摘所属分类: [08] Web开发、[07] AJAX风云

发表评论

回复引用

#1楼 2006-10-29 23:28 | kiwi [未注册用户]

很棒的教材每天都上來看看有沒有新的

回复引用查看

#2楼 2006-10-29 23:30 | neuhawk

支持,偶也想做点贡献,可是现在工作太忙,天天加班.

回复引用查看

#3楼 2006-10-29 23:42 | 大力

希望能多看到这样通俗易懂的文章。。。。/

回复引用查看

#4楼 [楼主]2006-10-29 23:50 | TerryLee

@kiwi
@neuhawk
@大力
谢谢几位的支持，这个系列就是从基本的ASP.NET AJAX应用开始，更偏重于应用型的：）

回复引用查看

#5楼 2006-10-30 00:05 | jailu

来迟了

回复引用查看

#6楼 [楼主]2006-10-30 08:27 | TerryLee

@jailu
不迟，呵呵：）

回复引用

#7楼 2006-10-30 08:30 | longer [未注册用户]

何時測Autocomplete呀？期待中.....

回复引用

#8楼 2006-10-30 08:33 | longer [未注册用户]

早安~~~~~

回复引用查看

#9楼 [楼主]2006-10-30 08:35 | TerryLee

@longer
谢谢，早安：）

AutoComplete Extender很快会写到

回复引用

#10楼 2006-10-30 09:38 | Robin_pg [未注册用户]

atlas的升級,不知道樓主能不能介紹哈相對atlas改進的地方?

回复引用

#11楼 2006-10-30 10:38 | TheOLD(远古) [未注册用户]

顶一下
顺便弱弱的问一下：LZ第一个例子中DropDownList还会闪吗？

回复引用查看

#12楼 [楼主]2006-10-30 10:39 | TerryLee

@Robin_pg
关于变化的地方，可以看看Dflying的拥抱变化系列，这个系列我会把ASP.NET AJAX当作一个全新的东西来介绍

回复引用查看

#13楼 [楼主]2006-10-30 10:40 | TerryLee

@TheOLD(远古)
建议你下载后运行一

可以自己体会一下

回复引用查看

#14楼 2006-10-30 11:16 | Jeffrey Zhao

我在想，一些已经被移作Preview的东西是否还需要关注……

回复引用查看

#15楼 [楼主]2006-10-30 11:31 | TerryLee

@Jeffrey Zhao
还是关注一下比较好，即使将来变化了，掌握起来也快一些:)

回复引用

#16楼 2006-10-30 14:08 | 小庄[匿名] [未注册用户]

谢谢，特别是那个程序控制的，我正在做的项目是一个数据录入界面全动态生成的，而且还得每个服务器控件里的数据和服务器进行交互对比，程序控制那个triggers应该没什么问题吧？

回复引用查看

#17楼 2006-10-30 16:52 | Kevin Wu

终于出来了，呵呵。继续关注

回复引用

#18楼 2006-10-30 20:55 | 品雨凉秋 [未注册用户]

每天来看看都有收获：）　

回复引用

#19楼 2006-10-30 22:47 | TNT2[匿名] [未注册用户]

偶发了封EMAIL给你，请问收到了吗？

回复引用

#20楼 2006-10-31 09:18 | ronglj [未注册用户]

写的很好。加油！！

回复引用

#21楼 2006-10-31 14:10 | TheOLD(远古) [未注册用户]

下了
没有关于第一个例子的代码就是那个下拉框
不过我自己体验了下你的代码是闪的就跟我用时闪的一样
呵呵不知道你那边运行怎么样？

回复引用

#22楼 2006-10-31 16:07 | Raysbo [未注册用户]

期待ASP.NET AJAX入门系列（5）的出现
^_^

回复引用查看

#23楼 2006-10-31 17:53 | fly2008

好文章!!!

回复引用查看

#24楼 [楼主]2006-10-31 19:26 | TerryLee

@小庄[匿名]
我觉得应该没什么问题吧

回复引用查看

#25楼 [楼主]2006-10-31 19:26 | TerryLee

@Kevin Wu
谢谢

回复引用查看

#26楼 [楼主]2006-10-31 19:30 | TerryLee

@品雨凉秋
谢谢

回复引用查看

#27楼 [楼主]2006-10-31 19:31 | TerryLee

@TNT2[匿名]
邮件收到了，可是太忙还没有来的及看啊-_-

回复引用查看

#28楼 [楼主]2006-10-31 19:33 | TerryLee

@ronglj
谢谢

回复引用查看

#29楼 [楼主]2006-10-31 19:37 | TerryLee

@TheOLD(远古)
貌似也是闪的，不过这种闪是由于要更新日历控件的背景，所以下拉框失去了焦点所造成的，只要页面不闪就好了啊:)

回复引用查看

#30楼 [楼主]2006-10-31 19:38 | TerryLee

@Raysbo
有点忙，稍微要晚一点:)

回复引用查看

#31楼 [楼主]2006-10-31 19:43 | TerryLee

@fly2008
谢谢：）

回复引用

TerryLee's Tech Space

TerryLee技术专栏

ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）