文档章节

UpdatePanel的用法详解

深圳大道
 深圳大道
发布于 2016/12/29 15:32
字数 1144
阅读 5
收藏 0

一、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的时候页面显示回发而已 ! 

2、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); 
}

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/7941346

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
AJAX控件UpdatePanel使用详解

AJAX控件UpdatePanel使用详解(一) UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要...

长平狐
2013/01/06
220
0
TextBoxWatermarkExtender用法

-------http://blog.chinaunix.net/u1/44087/showart.php?id=368504 TextBoxWatermarkExtender用于对TextBox添加水印效果。 下面请看一个示例: 1)在VS2005中新建一个ASP.NET AJAX-Enabeld ......

李继领
2011/01/02
979
0
用户js和ASP.NET UpdatePanel 控件之间的互动

用户js和ASP.NET UpdatePanel 控件之间的互动: UpdatePanel更新完成之后调用js 使用js激活UpdatePanel更新 首先是今天代码使用到的内容:UpdatePanel更新完成之后调用js。 关键代码: Sys....

开源中国首席老王
2012/07/18
365
0
Asp.Net Ajax的两种基本开发模式

Asp.Net Ajax的两种基本开发模式 引言 最近花了一些时间,将微软Asp.Net官方的Ajax视频全部看了一遍,地址是http://www.asp.net/learn/ajax-videos/,视频大多都很短,8至15分钟的居多,有讲...

张子阳
2008/11/05
0
0
[转]jquery与updatepanel二次失效问题解决方案

现在越来越多的朋友喜欢将jQuery和ASP.NET AJAX 一起来用,最近,许多印度人在forum里抱怨说UpdatePanel和jQuery不兼容,许多jQuery效果在UpdatePanel更新之后就 不work。本篇通过分析两者的...

冰点沐雪
2012/04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
6
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
7
0
从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
7
0
程序性能checklist

程序性能checklist

Moks角木
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部