管理资源吧首页>>>教程>>>编程>>>ASP.NET教程>>>

asp.net UpdatePanel的简单用法

　　UpdatePanel控制页面的局部更新，这个更新功能依赖于scriptManger控件的EnablePartialRendering属性，如果这个属性设置为false局部更新会失去作用(scriptManger控件的EnablePartialRendering属性的默认值为true不必刻意去设置)

　　下面是一个完整的UpdatePanel的结构：

　　

复制代码 代码如下:

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

　　</asp:ScriptManager>

　　<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Block">

　　<ContentTemplate>

　　</ContentTemplate>

　　<Triggers>

　　<asp:AsyncPostBackTrigger />

　　<asp:PostBackTrigger />

　　</Triggers>

　　</asp:UpdatePanel>

　　主要属性：

　　1，ChildrenAsTriggers : 内容模板内的子控件的回发是否更新本模板(和UpdateMode的conditional有关)

　　2，UpdateMode : 内容模板的更新模式，有always和conditional俩种

　　always：每次ajax PostBack或者普通的PostBack都能引起panel的更新 如果UpdatePanel设置为Always时，不能使用上面的ChildrenAsTriggers属性，强行使用会报错，是updatepanel默认的更新模式,和设置trigger触发器没有直接的关系。

　　conditional：只有满足如下某一条件时才更新panel的内容

　　如果设置UpdateMode="conditional" ChildrenAsTriggers="false"时候，子控件不允许触发更新

　　1)，当panel中的某个控件引发PostBack时

　　2), 当Panel指定的某个Trigger被引发时

　　3，RenderMode： 局部更新控件的呈现形式，俩中，Block(局部更新在客户端以div形式展现)和Inline(局部更新以span的形式展现在客户端)

　　子元素：

　　1,contentTemplate: 局部更新控件的内容模板，可以在其中添加任何控件

　　2，Triggers: 局部更新的触发器，包括俩中：异步回发(AsyncPostBackTrigger) 用来实现局部更新。普通回发(PostBackTrigger)和普通的一养，不管是否使用了局部更新控件，都会引起页面的全部更新。

　　下面是几个简单的例子：

　　1,updatepanel的updatemode设置为always

　　

复制代码 代码如下:

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

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

　　</div>

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

　　</asp:ScriptManager>

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

　　<ContentTemplate>

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

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

　　</ContentTemplate>

　　</asp:UpdatePanel>

　　<asp:Button ID="Button2" runat="server" Text="Button" />

　　</form>

　　</body>

　　</html>

　　不管哪个按钮，都会触发更新，只不过外面的按钮postback的时候页面显示回发而已 ！

　　1,updatepanel的updatemode设置为conditional( ChildrenTriggers="false" 就是updatepanel中事件不触发更新)

　　

复制代码 代码如下:

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

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

　　</div>

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

　　</asp:ScriptManager>

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

　　<ContentTemplate>

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

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

　　</ContentTemplate>

　　</asp:UpdatePanel>

　　<asp:Button ID="Button2" runat="server" Text="Button" />

　　</form>

　　</body>

　　</html>

　　下面介绍下updatePanel的触发器Trigger

　　了解数据库的人应该对触发器这个概念比较清楚，Trigger对于UpdatePanel来说也是很关键的

　　开始简单介绍了UpdatePanel的俩中触发器asyncPostBackTrigger和PostBackTrigger的作用

　　这里用例子大概在稍微深入地介绍下：

　　1,普通回调触发器(PostBackTrigger)

　　PostBackTrigger主要针对UpdatePanel模板内的子控件，因为当子控件被触发时。它只会更新模版内的数据，模板外的控件不会发生变化.当需要更新全局 内容的时候就可以通过PostBackTrigger触发器来实现页面的全部回调。

　　下面是简单例子：

　　

复制代码 代码如下:

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

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

　　</div>

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

　　</asp:ScriptManager>

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

　　<ContentTemplate>

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

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

　　</ContentTemplate>

　　<Triggers>

　　<!--下面的注释掉，点击updatePanel内的button则只更新Panel内的时间，取消注释责全部更新-->

　　<!-- <asp:PostBackTrigger ControlID="Button1"/>-->

　　</Triggers>

　　</asp:UpdatePanel>

　　<br />

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

　　<asp:Button ID="Button2" runat="server" Text="Button" />

　　</form>

　　</body>

　　</html>

　　2，异步回调触发器(AsyncPostBackTrigger)

　　是实现局部更新的关键，在触发器内定义引起回发的控件和事件

　　例：

　　

复制代码 代码如下:

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

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

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

　　</asp:ScriptManager>

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

　　<ContentTemplate>

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

　　</ContentTemplate>

　　<Triggers>

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

　　</Triggers>

　　</asp:UpdatePanel>

　　<br />

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

　　<asp:Button ID="Button2" runat="server" Text="Button" />

　　</form>

　　</body>

　　</html>

　　运行了发现点击button2的时候只更新了 updatepanel内部的时间

　　上面的例子也可以动态更新UpdatePanel的一些源代码：

　　具体例子就不写了下面 大概写点主要代码：

　　

复制代码 代码如下:

　　protected void Page_Load(object sender, EventArgs e)

　　{

　　//获取更新控件儿

　　UpdatePanel mapanel = UpdatePanel1;

　　//设置触发模式

　　mapanel.UpdateMode = UpdatePanelUpdateMode.Conditional;

　　//显示时间

　　Label1.Text = DateTime.Now.ToString();

　　//添加触发

　　AsyncPostBackTrigger tri = new AsyncPostBackTrigger();

　　tri.ControlID = "Button2";

　　tri.EventName = "Click";

　　mapanel.Triggers.Add(tri);

　　}

先记录这些~还望多多大虾们多多指教
教程首页 更多教程