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中:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<scriptrunat="server">
voidButton1_Click(objectsender,EventArgse)
{
this.Label2.Text=DateTime.Now.ToString();
}
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>RefreshinganUpdatePanelProgrammatically</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="更新时间:"></asp:Label>
<asp:LabelID="Label2"runat="server"Text="Label"ForeColor="Red"></asp:Label><br/><br/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>
</div>
</form>
</body>
</html>
<scriptrunat="server">
voidButton1_Click(objectsender,EventArgse)
{
this.Label2.Text=DateTime.Now.ToString();
}
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>RefreshinganUpdatePanelProgrammatically</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="更新时间:"></asp:Label>
<asp:LabelID="Label2"runat="server"Text="Label"ForeColor="Red"></asp:Label><br/><br/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>
</div>
</form>
</body>
</html>
这时候不用多说,肯定是整页提交了,运行如下图所示:
再次修改上面的例子,使用ScriptManager的RegisterAsyncPostBackControl()注册Button1为一个异步提交控件,并且调用UpdatePanel的Update()方法:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<scriptrunat="server">
voidPage_Load(objectsender,EventArgse)
{
ScriptManager1.RegisterAsyncPostBackControl(Button1);
}
voidButton1_Click(objectsender,EventArgse)
{
this.Label2.Text=DateTime.Now.ToString();
this.UpdatePanel1.Update();
}
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>RefreshinganUpdatePanelProgrammatically</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="更新时间:"></asp:Label>
<asp:LabelID="Label2"runat="server"Text="Label"ForeColor="Red"></asp:Label><br/><br/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>
</div>
</form>
</body>
</html>
<scriptrunat="server">
voidPage_Load(objectsender,EventArgse)
{
ScriptManager1.RegisterAsyncPostBackControl(Button1);
}
voidButton1_Click(objectsender,EventArgse)
{
this.Label2.Text=DateTime.Now.ToString();
this.UpdatePanel1.Update();
}
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>RefreshinganUpdatePanelProgrammatically</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="更新时间:"></asp:Label>
<asp:LabelID="Label2"runat="server"Text="Label"ForeColor="Red"></asp:Label><br/><br/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>
</div>
</form>
</body>
</html>
这时候可以看到,已经是异步提交了:
二. UpdatePanel的嵌套使用
UpdatePanel还可以嵌套使用,即在一个UpdatePanel的ContentTemplate中还可以放入另一个UpdatePanel。当最外面的UpdatePanel被触发更新时,它里面的子UpdatePanel也随着更新,里面的UpdatePanel触发更新时,只更新它自己,而不会更新外层的UpdatePanel。看下面的例子:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2"%>
<scriptrunat="server">
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>UpdatePanelUpdateModeExample</title>
<styletype="text/css">
div.NestedPanel
{
position:relative;
margin:2%5%2%5%;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager"
runat="server"/>
<asp:UpdatePanelID="OuterPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div>
<fieldset>
<legend>OuterPanel</legend>
<br/>
<asp:ButtonID="OPButton1"
Text="OuterPanelButton"
runat="server"/>
<br/>
Lastupdatedon
<%=DateTime.Now.ToString()%>
<br/>
<br/>
<asp:UpdatePanelID="NestedPanel1"
<scriptrunat="server">
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>UpdatePanelUpdateModeExample</title>
<styletype="text/css">
div.NestedPanel
{
position:relative;
margin:2%5%2%5%;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager"
runat="server"/>
<asp:UpdatePanelID="OuterPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div>
<fieldset>
<legend>OuterPanel</legend>
<br/>
<asp:ButtonID="OPButton1"
Text="OuterPanelButton"
runat="server"/>
<br/>
Lastupdatedon
<%=DateTime.Now.ToString()%>
<br/>
<br/>
<asp:UpdatePanelID="NestedPanel1"