UpdatePanel控件使用详解（一）

最新推荐文章于 2018-02-26 15:28:48 发布

weixin_34247155

最新推荐文章于 2018-02-26 15:28:48 发布

阅读量336

点赞数

CC 4.0 BY-SA版权

文章标签： c# xhtml ui

原文链接：http://www.cnblogs.com/chjw8016/archive/2007/08/11/851797.html

本文详细介绍ASP.NET AJAX Extensions中的UpdatePanel控件，包括其基本属性、使用方法及工作原理。UpdatePanel能实现Web应用程序的局部更新，无需编写客户端脚本，只需添加控件即可实现。文中还提供了多个示例，帮助理解如何配置不同属性以实现特定功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UpdatePanel 可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自实现一．

UpdatePanel控件概述

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

ContentTemplate属性

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

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

<ContentTemplate>
4

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

<div>
8

Background:
10

<br />
12

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

runat="server">
16

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

White </asp:ListItem>
20

<asp:ListItem Value="Silver">
22

Silver </asp:ListItem>
24

<asp:ListItem Value="DarkGray">
26

Dark Gray </asp:ListItem>
28

<asp:ListItem Value="Khaki">
30

Khaki </asp:ListItem>
32

<asp:ListItem Value="DarkKhaki"> D
34

ark Khaki </asp:ListItem>
36

</asp:DropDownList>
38

</div>
40

</ContentTemplate>
42

</asp:UpdatePanel>

事件代码：

void DropDownSelection_Change(Object sender, EventArgs e)
4

{
6

Calendar1.DayStyle.BackColor =
8

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

}
12

</script>

ContentTemplateContainer属性

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

@ Page Language="C#" %>
2

protected void Page_Load(object sender, EventArgs e)
6

{
8

UpdatePanel up1 = new UpdatePanel();
10

up1.ID = "UpdatePanel1";
12

up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
14

Button button1 = new Button();
16

button1.ID = "Button1";
18

button1.Text = "Submit";
20

button1.Click += new EventHandler(Button_Click);
22

Label label1 = new Label();
24

label1.ID = "Label1";
26

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

up1.ContentTemplateContainer.Controls.Add(button1);
30

up1.ContentTemplateContainer.Controls.Add(label1);
32

Page.Form.Controls.Add(up1);
34

}
36

protected void Button_Click(object sender, EventArgs e)
38

{
40

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

DateTime.Now.ToString();
44

}
46

</script>
48

<html xmlns="http://www.w3.org/1999/xhtml">
50

<head id="Head1" runat="server">
52

<title>UpdatePanel Added Programmatically Example</title>
54

</head>
56

<body>
58

<form id="form1" runat="server">
60

<div>
62

<asp:ScriptManager ID="TheScriptManager"
64

runat="server" />
66

</div>
68

</form>
70

</body>
72

</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" %>
2

< script runat ="server" >

void Button1_Click(object sender, EventArgs e)
6

{
8

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

}
10

void Button2_Click(object sender, EventArgs e)
12

{
14

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

}
16

</ script >
18

< html xmlns ="http://www.w3.org/1999/xhtml" >
20

< head runat ="server" >
22

< title > UpdatePanel Trigger Sample </ title >
24

</ head >
26

< body >
28

< form id ="form1" runat ="server" >
30

< div >
32

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

</ asp:ScriptManager >
36

</ div >
38

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

< ContentTemplate >
42

< div >
44

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

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

< br />
50

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

</ ContentTemplate >
54

< Triggers >
56

< asp:AsyncPostBackTrigger ControlID ="Button1" />
58

< asp:PostBackTrigger ControlID ="Button2" />
60

</ Triggers >
62

</ asp:UpdatePanel >
64

</ form >
66

</ body >
68

</ html >

（未完待续）
转自:http://www.cnblogs.com/Terrylee/archive/2006/10/29/ASPNET_AJAX_UpdatePanel_Part1.html
示例代码下载：http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo1

转载于:https://www.cnblogs.com/chjw8016/archive/2007/08/11/851797.html