使用UpdatePanel控件

2023-01-25 20:06:42

使用UpdatePanel控件（二）

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

主要内容

1．用编程的方法控制UpdatePanel的更新

2．UpdatePanel的嵌套使用

3．同一页面上使用多个UpdatePanel

一．用编程的方法控制UpdatePanel的更新

对于UpdatePanel，我们也可以使用编程的方法来控制它的更新，可以通过ScriptManager的RegisterAsyncPostBackControl()方法注册一个异步提交的控件，并且调用UpdatePanel的Update()方法来让它更新。再次用我在前面的文章中用到的一个无聊的时间更新例子来看一下，有时候我觉得例子过于复杂更加不好说明白所要讲的内容，如下代码所示，注意Button1并不包含在UpdatePanel中：

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

void Button1_Click(object sender, EventArgs e)

{

this.Label2.Text = DateTime.Now.ToString();

}

</script>

<title>Refreshing an UpdatePanel Programmatically</title>

</head>

<body>

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

<div>

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

<asp:Label ID="Label1" runat="server" Text="更新时间："></asp:Label>

<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>

</ContentTemplate>

</asp:UpdatePanel>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick = "Button1_Click"/>

</div>

</form>

</body>

</html>

这时候不用多说，肯定是整页提交了，运行如下图所示：

再次修改上面的例子，使用ScriptManager的RegisterAsyncPostBackControl()注册Button1为一个异步提交控件，并且调用UpdatePanel的Update()方法：

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

void Page_Load(object sender, EventArgs e)

{

ScriptManager1.RegisterAsyncPostBackControl(Button1);

}

void Button1_Click(object sender, EventArgs e)

{

this.Label2.Text = DateTime.Now.ToString();

this.UpdatePanel1.Update();

}

</script>

<title>Refreshing an UpdatePanel Programmatically</title>

</head>

<body>

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

<div>

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

<asp:Label ID="Label1" runat="server" Text="更新时间："></asp:Label>

<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>

</ContentTemplate>

</asp:UpdatePanel>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick = "Button1_Click"/>

</div>

</form>

</body>

</html>

这时候可以看到，已经是异步提交了：

二． UpdatePanel的嵌套使用

UpdatePanel还可以嵌套使用，即在一个UpdatePanel的ContentTemplate中还可以放入另一个UpdatePanel。当最外面的UpdatePanel被触发更新时，它里面的子UpdatePanel也随着更新，里面的UpdatePanel触发更新时，只更新它自己，而不会更新外层的UpdatePanel。看下面的例子：

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

</script>

<title>UpdatePanelUpdateMode Example</title>

div.NestedPanel

{

position: relative;

margin: 2% 5% 2% 5%;

}

</style>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager"

runat="server" />

<asp:UpdatePanel ID="OuterPanel"

UpdateMode="Conditional"

runat="server">

<div>

<legend>Outer Panel </legend>

<br />

<asp:Button ID="OPButton1"

Text="Outer Panel Button"

runat="server" />

<br />

Last updated on

<%= DateTime.Now.ToString() %>

<br />

<asp:UpdatePanel ID="NestedPanel1"

UpdateMode="Conditional"

runat="server">

<legend>Nested Panel 1</legend>

<br />

Last updated on

<%= DateTime.Now.ToString() %>

<br />

<asp:Button ID="NPButton1"

Text="Nested Panel 1 Button"

runat="server" />

</fieldset>

</div>

</ContentTemplate>

</asp:UpdatePanel>

</fieldset>

</div>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

运行后如下：

三．同一页面上使用多个UpdatePanel

使用UpdatePanel的时候并没有限制在一个页面上用多少个UpdatePanel，所以我们可以为不同的需要局部更新的页面区域加上不同的UpdatePanel。由于UpdatePanel默认的UpdateMode是Always，如果页面上有一个局部更新被触发，则所有的UpdatePanel都将更新，这是我们不愿看到的，我们只需要UpdatePanel在它自己的触发器触发的时候更新就可以了，所以需要把UpdateMode设置为Conditional。

来看一下官方网站上提供的一个例子：包括两个UpdatePanel，其中一个用来用户输入而另一个则用来显示数据，每一个UpdatePanel的UpdateMode属性都设置为Conditional。当我们单击Cancel按钮时，只有用来用户输入的那个UpdatePanel刷新，当单击Insert按钮时，两个UpdatePanel都刷新。代码如下：

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

<%@ Import Namespace="System.Collections.Generic" %>

<title>Enter New Employees</title>

private List<Employee> EmployeeList;

protected void Page_Load()

{

if (!IsPostBack)

{

EmployeeList = new List<Employee>();

EmployeeList.Add(new Employee(1, "Jump", "Dan"));

EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));

ViewState["EmployeeList"] = EmployeeList;

}

else

EmployeeList = (List<Employee>)ViewState["EmployeeList"];

EmployeesGridView.DataSource = EmployeeList;

EmployeesGridView.DataBind();

}

protected void InsertButton_Click(object sender, EventArgs e)

{

if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||

String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }

int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;

string lastName = Server.HtmlEncode(FirstNameTextBox.Text);

string firstName = Server.HtmlEncode(LastNameTextBox.Text);

FirstNameTextBox.Text = String.Empty;

LastNameTextBox.Text = String.Empty;

EmployeeList.Add(new Employee(employeeID, lastName, firstName));

ViewState["EmployeeList"] = EmployeeList;

EmployeesGridView.DataBind();

EmployeesGridView.PageIndex = EmployeesGridView.PageCount;

}

protected void CancelButton_Click(object sender, EventArgs e)

{

FirstNameTextBox.Text = String.Empty;

LastNameTextBox.Text = String.Empty;

}

[Serializable]

public class Employee

{

private int _employeeID;

private string _lastName;

private string _firstName;

public int EmployeeID

{

get { return _employeeID; }

}

public string LastName

{

get { return _lastName; }

}

public string FirstName

{

get { return _firstName; }

}

public Employee(int employeeID, string lastName, string firstName)

{

_employeeID = employeeID;

_lastName = lastName;

_firstName = firstName;

}

</script>

</head>

<body>

<div>

 </div>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

<table>

<tr>

<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" runat="server" UpdateMode="Conditional">

<tr>

<td><asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstNameTextBox"

Text="First Name" ForeColor="White" /></td>

</tr>

<tr>

<td><asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastNameTextBox"

Text="Last Name" ForeColor="White" /></td>

</tr>

<tr>

<td>

<asp:LinkButton ID="InsertButton" runat="server" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />

<asp:LinkButton ID="Cancelbutton" runat="server" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />

</td>

</tr>

</table>

<asp:Label runat="server" ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

</td>

<asp:UpdatePanel ID="EmployeesUpdatePanel" runat="server" UpdateMode="Conditional">

<asp:GridView ID="EmployeesGridView" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"

BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">

<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />

<asp:BoundField DataField="LastName" HeaderText="Last Name" />

<asp:BoundField DataField="FirstName" HeaderText="First Name" />

</Columns>

</asp:GridView>

<asp:Label runat="server" ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

</td>

</tr>

</table>

</form>

</body>

</html>

运行后效果如下：

示例代码下载：http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo2.rar

支持TerryLee的创业产品Worktile
Worktile，新一代简单好用、体验极致的团队协同、项目管理工具，让你和你的团队随时随地一起工作。完全免费，现在就去了解一下吧。
https://worktile.com

分类: [08] Web开发, [07] AJAX风云

] AJAX风云

强烈推荐：240多个jQuery插件

摘要: jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器，jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插件列表的文章，里面包含了JQuery插件达240多个，特推荐给大家。阅读全文

posted @ 2007-12-09 21:44 TerryLee 阅读(334092) | 评论 (208) 编辑

ASP.NET AJAX 1.0 正式版发布

摘要: 1.姗姗来迟的ASP.NET AJAX 1.0正式版终于与大家见面了。这次发布的版本与RC之间的改动如下：
……
2．ASP.NET AJAX 1.0的全部源码已经发布。
3．ASP.NET AJAX Control Toolkit也随之发布了新版本，新增了如下四个控件：
AutoComplete
Calendar
MaskedEdit
Tabs
4.未来开发计划
详细大家可以访问：http://ajax.asp.net/
阅读全文

posted @ 2007-01-24 08:29 TerryLee 阅读(15907) | 评论 (107) 编辑

ASP.NET AJAX 1.0 RC终于发布了

摘要: 原计划年底Release的ASP.NET AJAX 1.0，经过了多个CTP版，2个Beta版本之后，终于发布了RC版。同时微软提供了两份升级文档：

从CTP版升级到RC 版

从Beta2升级到RC版

点击下载ASP.NET AJAX 1.0 RC，从提供的文档来看，主要的变化是命名空间，从Microsoft.Web变为了System.Web，如以前的用的Microsoft.Web.Script.Services.ScriptService，现在需要修改为System.Web.Script.Services.ScriptService。

同时ASP.NET AJAX Control Toolkit已经更新到了RC版，可以从这里下载。

点点：从最近发布的Beta2到RC版，可以看出ASP.NET AJAX v1.0已经逐步趋于稳定，不会再有CTP到Beta1的翻天覆地的变化，大家可以在项目中使用了。阅读全文

posted @ 2006-12-15 09:14 TerryLee 阅读(4685) | 评论 (25) 编辑

AJAX，只是一种过渡技术吗？

摘要: 在CSDN首页上用大标题写着“谁来革AJAX的命，Flash还是WPF”，同时在下面列举了Adobe推出Flex 2.0 力拼Ajax，以及袁红岗在6月份的文章Ajax，只是一种过渡技术，其中袁在文章中说到“Ajax其实是一种新瓶装旧酒的过渡技术，相信在未来一到两年之内将被新的技术所代替，而JSF则是一种可扩展的框架级解决方案。”

AJAX自去年火了之后到现在，不仅没有被取代，而且有越来越热之势：现在各大网站都在争相使用AJAX技术，似乎哪个网站不使用点AJAX就显的落伍了，从Google、到Yahoo，以及国内各门户网站都是如此，不使用AJAX技术，似乎就不够Web2.0；各种AJAX框架也是风起云涌，微软的ASP.NET AJAX,雅虎的Yahoo! UI，Google的Web Toolkit以及dojo，prototype等；再看看园子里朋友对AJAX的关注程度，远远超出了对其他技术的关注。

那么AJAX到底命运如何，是否只是一种过渡技术？能否被Flex或者WPF所取代呢？我们不妨来一次讨论，大家也都来说说自己的看法吧。阅读全文

posted @ 2006-11-20 14:30 TerryLee 阅读(9604) | 评论 (89) 编辑

ASP.NET AJAX入门系列（11）：在多个UpdatePanle中使用Timer控件

摘要: 本文将使用Timer控件更新两个UpdatePanel控件，Timer控件将放在UpdatePanel控件的外面，并将它配置为UpdatePanel的触发器，翻译自官方文档。

主要内容

在多个UpdatePanel中使用Timer控件
阅读全文

posted @ 2006-11-15 21:43 TerryLee 阅读(16339) | 评论 (53) 编辑

ASP.NET AJAX入门系列（9）：在母版页中使用UpdatePanel

摘要: 本文简单介绍一下在母版页中使用UpdatePanel控件，翻译自官方文档。

主要内容

1．添加UpdatePanel控件到Content Page

2．通过Master Page刷新UpdatePanel
阅读全文

posted @ 2006-11-13 18:00 TerryLee 阅读(22151) | 评论 (69) 编辑

ASP.NET AJAX入门系列（8）：自定义异常处理

摘要: 在UpdatePanel控件异步更新时，如果有错误发生，默认情况下会弹出一个Alert对话框显示出错误信息，这对用户来说是不友好的，本文看一下如何在服务端和客户端脚本中自定义异常处理，翻译自官方文档。

主要内容

1．在服务端自定义异常处理

2．在客户端脚本中自定义异常处理
阅读全文

posted @ 2006-11-13 16:58 TerryLee 阅读(17811) | 评论 (37) 编辑

ASP.NET AJAX入门系列

摘要: ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识，其中部分文章为原创，也有一些文章是直接翻译自官方文档，本部分内容会不断更新。

文章及导读阅读全文

posted @ 2006-11-12 23:22 TerryLee 阅读(219489) | 评论 (148) 编辑

ASP.NET AJAX入门系列（7）：使用客户端脚本对UpdateProgress编程

摘要: 在本篇文章中，我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件，客户端代码将使用ASP.NET AJAX Library中的PageRequestManager，在UpdateProgress控件中，将添加一个Button，来允许用户取消异步更新，并且使用客户端脚本来显示或者隐藏进度信息。

主要内容

1．通过客户端脚本取消异步更新

2．通过客户端脚本显示或者隐藏进度信息
阅读全文

posted @ 2006-11-12 22:59 TerryLee 阅读(21071) | 评论 (79) 编辑

ASP.NET AJAX入门系列（6）：UpdateProgress控件简单介绍

摘要: 在ASP.NET AJAX Beta2中，UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中。以下两篇关于UpdateProgress的文章基本翻译自ASP.NET AJAX官方网站。

主要内容

1．UpdateProgress控件简单使用

2．使用多个UpdateProgress控件

阅读全文

posted @ 2006-11-12 15:57 TerryLee 阅读(37076) | 评论 (77) 编辑

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

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

主要内容

1．用编程的方法控制UpdatePanel的更新

2．UpdatePanel的嵌套使用

3．同一页面上使用多个UpdatePanel
阅读全文

posted @ 2006-11-01 22:00 TerryLee 阅读(37180) | 评论 (69) 编辑

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

主要内容

1．UpdatePanel控件概述

2．UpdatePanel工作原理

3．ContentTemplate属性

4．ContentTemplateContainer属性

5．Triggers属性
阅读全文

posted @ 2006-10-29 22:57 TerryLee 阅读(70737) | 评论 (124) 编辑

ASP.NET AJAX入门系列（3）：使用ScriptManagerProxy控件

摘要: 在ASP.NET AJAX中，由于一个ASPX页面上只能有一个ScriptManager控件，所以在有母版页的情况下，如果需要在Master-Page和Content-Page中需要引入不同的脚本时，这就需要在Content-page中使用ScriptManagerProxy，而不是ScriptManager，ScriptManager 和 ScriptManagerProxy 是两个非常相似的控件。

主要内容

1．ScriptManagerProxy控件概述

2．简单示例
阅读全文

posted @ 2006-10-27 08:31 TerryLee 阅读(36578) | 评论 (96) 编辑

ASP.NET AJAX入门系列（2）：使用ScriptManager控件

摘要: ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中，它用来处理页面上的所有组件以及页面局部更新，生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service，所有需要支持ASP.NET AJAX的ASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库，或者指定通过JS来调用的Web Service，以及调用AuthenticationService和ProfileService，还有页面错误处理等。

主要内容

1．控件概述

2．一个简单的示例

3．客户端脚本模式

4．错误处理

5．Services属性

6．Scripts属性阅读全文

posted @ 2006-10-25 23:16 TerryLee 阅读(122017) | 评论 (162) 编辑

ASP.NET AJAX入门系列（1）：概述

摘要: 经常关注我的Blog的朋友可能注意到了，在我Blog的左边系列文章中，已经移除了对Atlas学习手记系列文章的推荐，因为随着ASP.NET AJAX 1.0 Beta版的发布，它们已经不再适用，为了不继续误导广大朋友，所以不再作为推荐系列文章，如果有需要参考的朋友，可以直接到随笔分类中查看。

ASP.NET AJAX Beta改动如此之大，鉴于又没有很好的中文参考资料，所以决定最近开始写作ASP.NET AJAX入门系列，这个系列我会把ASP.NET AJAX当作一个全新的东西去对待，不再考虑以前的Atlas，把自己对ASP.NET AJAX的研究与大家分享，便于初学的朋友少走一些弯路。对Atlas熟悉的朋友可以推荐看Dflying Chen的《拥抱变化——从Atlas到ASP.NET AJAX系列》，以及老赵的《深入Atlas系列》。由于个人的能力和掌握的程度有限，难免出现错误和遗漏的地方，还请大家多多理解和指正。

OK，让我们从这里开始！
阅读全文

posted @ 2006-10-24 23:14 TerryLee 阅读(91322) | 评论 (72) 编辑

码农公寓

使用UpdatePanel控件（二）

] AJAX风云

相关文章