UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法（第一篇）。
主要内容
1．UpdatePanel控件概述
2．UpdatePanel工作原理
3．ContentTemplate属性
4．ContentTemplateContainer属性
5．Triggers属性
一．UpdatePanel控件概述
UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel工作原理和使用方法。简单的UpdatePanel定义如下：
<asp:updatepanel id="UpdatePanel1" runat="server">
<contenttemplate>
</contenttemplate>
<triggers>
<asp:asyncpostbacktrigger>
<asp:postbacktrigger>
</triggers>
</asp:updatepanel>
UpdatePanel重要的属性如下：
属性
说明
ChildrenAsTriggers
当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。
RenderMode
表示UpdatePanel最终呈现的HTML元素。Block（默认）表示
，Inline表示
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">
<contenttemplate>
<asp:calendar id="Calendar1" showtitle="True" runat="server">
Background:
<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>
<asp:scriptmanager id="TheScriptManager" runat="server">
</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" %>
<script runat="server">
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
UpdatePanel Trigger Sample
</head>
<body>
<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
<asp:updatepanel id="UpdatePanel1" runat="server">
<contenttemplate>
<asp:button id="Button1" runat="server" text="异步回送" onclick="Button1_Click">
<asp:button id="Button2" runat="server" text="整页回送" onclick="Button2_Click">
<asp:label id="Label1" runat="server" text="当前时间" font-bold="True" font-size="Large"></asp:label>
分享到：
相关推荐
UpdatePanel的简单用法: 局部更新是ajax技术的最基本，也是最重要的用法，今天大概把asp.net ajax中的局部更新控件 updatepanel的用法记录下，大家可以共同探讨
ASP.NET AJAX入门系列UpdatePanel控件教程
ASP.NET_AJAX入门系列：使用UpdatePanel控件.docASP.NET_AJAX入门系列：使用UpdatePanel控件.doc
该控件能够定是引发整个页面回送，当它与Updatepanel空间搭配使用时，就可以定时引发异步回送并进行局部刷新
由于本人资源分很少,所以设置1分,没分的同学可以访问我的博客...不过目前还没找到 .net直接调用的dll所以自己写了一个控件和大家分享下.集成ckfinder,本次解决了UpdatePanel 下不能使用ckeditor的问题,特来和大家分享。
这个控件多半会和 ASP.Net AJAX 控件 UpdatePanel 一起使用，因为它内部一般将执行复杂的服务器端事件。 在这个“弹出”的页面部分中，可以包括任何的 ASP.Net 控件和 Html 元素。当这个页面部分被“弹出”的时候...
基于 ExtJS 的开源 ASP.NET 控件库。 FineUI的使命 创建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的网站应用程序。 支持的浏览器 IE 8.0 、Chrome、Firefox、Opera、Safari bulid...
ExtAspNet - 基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果 ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果。 ExtAspNet 是为了...
ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。
FineUI（开源版）基于 ExtJS 的开源 ASP.NET 控件库。FineUI的使命创建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的网站应用程序。支持的浏览器IE 8.0+、Chrome、Firefox、Opera、...
导读：UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个...
FineUI（ASP.NET控件） v6.1.0 更新日志 修正无法在后台切换工具栏显示状态的问题。 修正下拉列表后台绑定后，可能会出现F_STATE验证出错的问题。 修正AjaxTimeout无效的问题。 全局配置参数...
详细介绍了updatepanel控件的各种使用方法。
专业的ASP.NET控件，原生的AJAX支持，丰富的UI效果。 产品特点： No JavaScript，No CSS, No UpdatePanel，No Web Services 备注： 本产品基于 ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor 开源程序。 ...
第一篇 ASP.NET AJAX概述 第1章 初识ASP.NET AJAX 1.1 ASP.NET AJAX概述 1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP...
第一篇 ASP.NET AJAX概述 第1章 初识ASP.NET AJAX 1.1 ASP.NET AJAX概述 1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP...
4.4.1 引入UpdatePanel控件 95 4.4.2 更多UpdatePanel 98 4.4.3 在此插入反馈 99 4.4.4 使用计时器 101 4.4.5 错误处理 103 4.5 小结 104 第5章 建立异步网络调用 105 5.1 使用ASP.NET Web服务 105 5.1.1 ...
ASP.NET_AJAX入门系列：使用UpdatePanel控件.doc ASP.NET_AJAX入门系列：使用客户端脚本对UpdateProgress编程.doc ASP.NET_AJAX入门系列：在多个UpdatePanle中使用Timer控件.doc ASP.NET_AJAX入门系列：在母版页中...
第一篇 ASP.NET AJAX概述 第1章 初识ASP.NET AJAX 1.1 ASP.NET AJAX概述 1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP...