ASP.NET AJAX入门之使用UpdatePanel控件的方法

ASP.NET AJAX入门之使用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中:
 
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法
<scriptrunat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
voidButton1_Click(objectsender,EventArgse)
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法
{
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
this.Label2.Text=DateTime.Now.ToString();
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法}

ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</script>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<htmlxmlns="http://www.w3.org/1999/xhtml">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<headrunat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<title>RefreshinganUpdatePanelProgrammatically</title>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</head>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<body>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<formid="form1"runat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<div>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<ContentTemplate>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:LabelID="Label1"runat="server"Text="更新时间:"></asp:Label>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:LabelID="Label2"runat="server"Text="Label"ForeColor="Red"></asp:Label><br/><br/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</ContentTemplate>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</asp:UpdatePanel>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</div>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</form>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</body>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</html>
这时候不用多说,肯定是整页提交了,运行如下图所示:
ASP.NET AJAX入门之使用UpdatePanel控件的方法
再次修改上面的例子,使用ScriptManager的RegisterAsyncPostBackControl()注册Button1为一个异步提交控件,并且调用UpdatePanel的Update()方法:
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法
<scriptrunat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
voidPage_Load(objectsender,EventArgse)
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法
{
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ScriptManager1.RegisterAsyncPostBackControl(Button1);
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法}

ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
voidButton1_Click(objectsender,EventArgse)
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法
{
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
this.Label2.Text=DateTime.Now.ToString();
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
this.UpdatePanel1.Update();
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法}

ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</script>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<htmlxmlns="http://www.w3.org/1999/xhtml">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<headrunat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<title>RefreshinganUpdatePanelProgrammatically</title>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</head>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<body>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<formid="form1"runat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<div>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<ContentTemplate>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:LabelID="Label1"runat="server"Text="更新时间:"></asp:Label>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:LabelID="Label2"runat="server"Text="Label"ForeColor="Red"></asp:Label><br/><br/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</ContentTemplate>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</asp:UpdatePanel>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</div>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</form>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</body>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</html>
这时候可以看到,已经是异步提交了:
ASP.NET AJAX入门之使用UpdatePanel控件的方法
二. UpdatePanel的嵌套使用
UpdatePanel还可以嵌套使用,即在一个UpdatePanel的ContentTemplate中还可以放入另一个UpdatePanel。当最外面的UpdatePanel被触发更新时,它里面的子UpdatePanel也随着更新,里面的UpdatePanel触发更新时,只更新它自己,而不会更新外层的UpdatePanel。看下面的例子:
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2"%>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法
<scriptrunat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</script>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<htmlxmlns="http://www.w3.org/1999/xhtml">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<headid="Head1"runat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<title>UpdatePanelUpdateModeExample</title>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法
<styletype="text/css">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法div.NestedPanel
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法ASP.NET AJAX入门之使用UpdatePanel控件的方法
{
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法position
:relative;
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法margin
:2%5%2%5%;
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
}

ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</style>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
</head>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<body>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<formid="form1"runat="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<div>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:ScriptManagerID="ScriptManager"
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法runat
="server"/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:UpdatePanelID="OuterPanel"
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法UpdateMode
="Conditional"
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法runat
="server">
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<ContentTemplate>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<div>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<fieldset>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<legend>OuterPanel</legend>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<br/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:ButtonID="OPButton1"
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法Text
="OuterPanelButton"
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法runat
="server"/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<br/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法Lastupdatedon
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<%=DateTime.Now.ToString()%>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<br/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<br/>
ASP.NET AJAX入门之使用UpdatePanel控件的方法
ASP.NET AJAX入门之使用UpdatePanel控件的方法
<asp:UpdatePanelID="NestedPanel1"
ASP.NET AJAX入门之使用UpdatePanel控件的方法