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


<script runat="server">

void Button1_Click(object sender, EventArgs e)


{

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

}

</script>

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

<head runat="server">

<title>Refreshing an UpdatePanel Programmatically</title>

</head>

<body>

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

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

<div>

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

<ContentTemplate>

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


<script runat="server">

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>

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

<head runat="server">

<title>Refreshing an UpdatePanel Programmatically</title>

</head>

<body>

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

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

<div>

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

<ContentTemplate>

<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 runat="server">

</script>


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

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

<title>UpdatePanelUpdateMode Example</title>


<style type="text/css">

div.NestedPanel


{
}{

position: relative;

margin: 2% 5% 2% 5%;

}

</style>

</head>

<body>

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

<div>

<asp:ScriptManager ID="ScriptManager"

runat="server" />

<asp:UpdatePanel ID="OuterPanel"

UpdateMode="Conditional"

runat="server">

<ContentTemplate>

<div>

<fieldset>

<legend>Outer Panel </legend>

<br />

<asp:Button ID="OPButton1"

Text="Outer Panel Button"

runat="server" />

<br />

Last updated on

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

<br />

<br />

<asp:UpdatePanel ID="NestedPanel1"

UpdateMode="Conditional"

runat="server">

<ContentTemplate>

<div class="NestedPanel">

<fieldset>

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


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

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

<title>Enter New Employees</title>


<script runat="server">

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>

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

<div>

</div>

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

<table>

<tr>

<td style="height: 206px" valign="top">

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

<ContentTemplate>

<table cellpadding="2" border="0" style="background-color:#7C6F57">

<tr>

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

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

<td><asp:TextBox runat="server" ID="FirstNameTextBox" /></td>

</tr>

<tr>

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

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

<td><asp:TextBox runat="server" ID="LastNameTextBox" /></td>

</tr>

<tr>

<td></td>

<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>

<td style="height: 206px" valign="top">

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

<ContentTemplate>

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

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

<FooterStyle BackColor="Tan" />

<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />

<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />

<HeaderStyle BackColor="Tan" Font-Bold="True" />

<AlternatingRowStyle BackColor="PaleGoldenrod" />

<Columns>

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

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

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

</Columns>

<PagerSettings PageButtonCount="5" />

</asp:GridView>

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

</ContentTemplate>

<Triggers>

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

</Triggers>

</asp:UpdatePanel>

</td>

</tr>

</table>

</form>

</body>

</html>
运行后效果如下:
示例代码下载:http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo2.rar
posted @ 2006-11-01 22:00
TerryLee 阅读(24092)
评论(79) 编辑 收藏 网摘 所属分类:
[08] Web开发[07] AJAX风云
发表评论
不错,呵呵
确实觉得updatepanel有点"作弊"哦
#2楼[
楼主]2006-11-01 22:42 |
@anikin
“作弊”?从何说起呢,呵呵
@TerryLee
"作弊" 是指不要写其他代码就可以把现成的控件实现ajax
#4楼[
楼主]2006-11-01 22:46 |
@anikin
MS的一贯作风,总是让程序员少动手,呵呵
@anikin
@TerryLee
作弊,也是一种境界
达不到那种境界的话,不是每个人都作的了的
#6楼[
楼主]2006-11-01 23:09 |
@aspnetx
:)
不管怎么说,UpdatePanel现在用起来还不错,就是不知道正式版会不会再变化,变化有多大
在UpdatePanel中添加asp.net的标准控件,基本上没有什么问题的。如果加上第三方控件,这个控件里面也有比较多的js代码,用了几个,updatepanel就出现异常了。
不错,呵呵呵……
Dflying Chen
你给的支持就是睡觉呀,呵呵呵……
最近正打算开始学AJAX,正好赶上大变革啊,好在有Terry引路,不至于一下子不知所措(笑),很不错的文章,一下子看了5期,期待6期,谢谢!
#19楼[
楼主]2006-11-02 19:41 |
@cnodin
在UpdatePanel中写JavaScript要慎重
#20楼[
楼主]2006-11-02 19:42 |
@Dflying Chen
谢谢:)
#21楼[
楼主]2006-11-02 19:44 |
@刚刚
@杨利
@sheva.wen[匿名]
@天轰穿
@星宿.NET
@疏水阀
@Xim[匿名]
谢谢几位的支持:)
#22楼[
楼主]2006-11-02 19:44 |
@lovebanyi
?
能不能仔细说说啊,不太了解
有一个问题请教一下:
针对上面第一个例子,我把Button1换作用RadioButtoList,并用OnSelectedIndexChanged事件代替OnClick,但好像无法做到异步提交,时间无法显示出来。
我在把AJAXCONTROLTOOLKIT.DLL加到TOOLBOX中时出错,找不到Microsoft.Web.Extensions.dll这个程序集,请问怎么解决?
不是说这个是在GAC中,不需要引用的么?
我刚看完你写的第一个事例,在机器上试验了一下,在编译的时候总是报“Sys未定义”错误信息。
我不是按你说的使用ASP.NET AJAX-Enabled Web Site而是使用的ASP.NETWeb Site,安装的时ASP.NET AJAX beta2.0。
刚开始学习,还望详细解答。
谢谢!
我也遇到过,是Web.Config内容不一样,缺少了一些,你可以先用ASP.NET AJAX-Enabled Web Site生成一个Web.Config然后拷贝过去修改@游客
#29楼[
楼主]2006-11-08 19:31 |
@DotNETer
用OnSelectedIndexChanged也可以啊
#30楼[
楼主]2006-11-08 19:32 |
@游客
使用ASP.NET Web Site,你的Web.config中有没有做配置?
#32楼[
楼主]2006-11-13 16:51 |
@charming[匿名]
:)
你好
我现在碰到了这样的问题
我使用的是ASP.NET AJAX 1.0 Beta 2
一个TreeView和一个Label控件使用UpdatePanel实现在TreeView的NodeSelectionChanged事件中无刷新来更改Label控件的值
现在问题是这样的:
protected void UltraWebTree1_NodeSelectionChanged(object sender, Infragistics.WebUI.UltraWebNavigator.WebTreeNodeEventArgs e)
{
Label1.Text = "bbbbbbbbb";
}
和
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="TreeNodeExpanded" />
</Triggers>
</asp:UpdatePanel>
这样的设置完全正确
但是我的TreeView的node的Expended=false再加个事件,
protected void UltraWebTree1_NodeSelectionChanged(object sender, Infragistics.WebUI.UltraWebNavigator.WebTreeNodeEventArgs e)
{
Label1.Text = "bbbbbbbbb";
}
这个时候的问题就出来了,reeView就不能展开,并出现javascript错误,说undefinde未定义
谢谢
这样的文章总能给一些人带路。
比如像我,很感激,很期待。
这样的文章总能给一些人带路。
比如像我,很感激,很期待。
#36楼[
楼主]2006-11-19 21:45 |
@dingqc
:)
在这里真的学到了好多东西,TERRYLEE辛苦了
看过课程后,有个问题想请教一下(可能是个无聊的问题)
通过在UpdatePanel里定义Button和在ScriptManager里使用RegisterAsyncPostBackControl()方法注册一个Button都可以实现异步调用,那在开发过程中有区别吗?
#38楼[
楼主]2006-11-20 22:26 |
@Batista
在具体开发中,如果你的你需要使用编程的手法注册控件为异步提交,就只能使用第二种方法了
有个问题..
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
<TABLE><TBODY><TR><TD style="WIDTH: 100px"></TD></TR></TBODY></TABLE>
</contenttemplate>
</asp:UpdatePanel>
我用VS2005插入table到<contenttemplate>里,但里面的代码会是大写,而且没有分行显示,看起来很吃力..
FileUpload明明又选择了上传文件,
但同是在UpdatePanel中的Button的Click事件里,
FileUpload.hasfile属性却为false!
如何解决呢?
为什么我按照第三例子 在本机能调试成功,而上传到服务器就不行了呢,是不是在服务器上也要装个ajax1.0呢
#43楼[
楼主]2007-02-07 17:02 |
@aohaiyixiao
把相关的DLL拷贝到应用程序目录下面就可以了
学习的一个问题。
用编程的方法控制UpdatePanel的更新 这个里面,我区别不出局部更新和全部更新的区别
我在page_load里面写了一个 msg.txt += "a"
不管用异步还是同步,msg这个label里面的值都是累加起来的。按照异步局部刷新的要求,msg这个label里面的值应该是维持不变的。
PS:msg.txt += "a" 这个动作我没有用ispostback来判断。
最好能够和我联系,我的qq 523761
[Serializable]
public class Employee
{
请问楼主,这个类声名为 可序列化的有什么特别的意义吗?必须的吗?
@蓝狐
我感觉这里的序列化是多余的,因为博客应用了泛型
请问如果我的网站不是用ASP.NET AJAX-Enabled Web Site向导建立的还能用updatepanel吗?该怎么设置呢?
谢谢楼主的无私奉献!
不过最后那个: 同一页面上使用多个UpdatePanel 的下面这句代码, 害我找了老半天,才发现问题:
原代码: protected void Page_Load()
正确的应该改为: protected void Page_Load(object sender, EventArgs e)
小弟是个新手, 刚学 asp.net, 就看到楼主这么精彩的学习文章, 真的是感谢!
刚学,UpdatePanel这个我觉得还是看多两次的好,自己熟练点,谢谢TerryLee了。
还很好强大,谢谢,谢谢,可不可以和主人多交流呀...
正在使用博客园这个留言也是用的asp.net ajax
为什么我按BUTTON之后还是整页提交呢???
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<div>
</div>
</form>
</body>
</html>
想问下UpdateKPanel1内不是Table而是DetialsView,DetialsView中有行是模板列,里面放了两个LinkButton,请问Triggers中使用什么控件名。。代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<div>
<table style="height: 216px; width: 467px">
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" AutoGenerateRows="False"
OnPageIndexChanging="DetailsView1_PageIndexChanging" Caption="信息"
DefaultMode="Insert">
<Fields>
<asp:TemplateField HeaderText="姓:">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="名:">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<InsertItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Insert</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cancel</asp:LinkButton>
</InsertItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
..................................................................................................................
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="id" HeaderText="编号:" />
<asp:BoundField DataField="firstName" HeaderText="性" />
<asp:BoundField DataField="lastName" HeaderText="名" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="控件名是什么,采用LinkButton1报错" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
@蓝狐
ViewSate就是序列化和反序列化啊。没的话,我们在Postback中就没办法保存Employee的信息了。
ScriptManager1.RegisterAsyncPostBackControl
在使用的时候,如果遇到多个updatepanel怎么处理
原代码: protected void Page_Load()
正确的应该改为: protected void Page_Load(object sender, EventArgs e)
这个人回的是正解!
如何想在后台动态添加triggers应该怎么写呢?
感觉 “天轰穿” 好烂!
他的教程视频,都是拖出来的,好傻哦!
不带点技术含量!
请教楼主一个题外话啊:
我有两个对象都序列化到同一个流里:
binaryFormatter.Serialize(stream, obj1);
binaryFormatter.Serialize(stream, obj2);
我在反序列化的时候就可以反序列两次得到obj1和obj2:
Object obj1 = binaryFormatter.Deserialize(stream);
Object obj2 = binaryFormatter.Deserialize(stream);
我想问的就是,这个binaryFormatter(或者说CLR)怎么就知道我的stream流里有两个对象,它怎么就知道obj1在哪里结束?这两个对象在stream流里是不是有一个“分界线”,类似与字符串里的“\0”结尾符?