本文转自:http://www.cnblogs.com/shangxia/articles/2281782.html

今天用做日历显示本月的考勤记录,用到了UpdatePanel控件,才发现对这个控件并不太了解,所以找了点儿资料,整理了一下给大家发上来!

一、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="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>

三、下面介绍下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">
<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>

运行了发现点击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); 
}

[转]UpdatePanel的用法详解的更多相关文章

  1. UpdatePanel的用法详解

    摘自:http://www.cnblogs.com/shangxia/articles/2281782.html 一.UpdatePanel的结构 <asp:ScriptManager ID=& ...

  2. 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  3. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  4. @RequestMapping 用法详解之地址映射

    @RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...

  5. linux管道命令grep命令参数及用法详解---附使用案例|grep

    功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

  6. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

  7. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  8. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  9. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

随机推荐

  1. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  2. 盒图(boxplot)

    最近在摆弄数据离散度的时候遇到一种图形,叫做盒图(boxplot).它对于显示数据的离散的分布情况效果不错. 盒图是在1977年由美国的统计学家约翰·图基(John Tukey)发明的.它由五个数值点 ...

  3. -[UIViewController _loadViewFromNibNamed:bundle:]

    *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: '-[UIViewC ...

  4. Android Animation学习(五) ApiDemos解析:容器布局动画 LayoutTransition

    Android Animation学习(五) ApiDemos解析:容器布局动画 LayoutTransition Property animation系统还提供了对ViewGroup中的View改变 ...

  5. 微信小程序管理后台介绍

    微信小程序的管理后台,每次进入都需要扫码,还是特别不爽,现在微信小程序还没正式发布,很多人都还没看到管理后台,这里抢先发布出来 ------------------------------------ ...

  6. markdown 使用

    一:markdown编辑器下载 小书匠 http://soft.xiaoshujiang.com/ 在线编辑工具,所写即所见 作业部落 https://www.zybuluo.com/mdeditor ...

  7. 移动Web开发(一)

    1.浅谈Web标准 降低开发复杂度,覆盖的技术层面十分广泛,技术标准化. 以HTML为核心,扩展出几个大类的技术标准: a.程序访问: ECMAScript(ES) 3 . ES 5 . ES ham ...

  8. exec

    之前一直这样显示 不知道修改了什么,变成了这样. 在终端   找到这个podfile所在的目录 chmod 600 podfile   然后 就变回来了.可能是修改权限的问题.

  9. rsa && sha1 js code

    jsbn.js /* * Copyright (c) 2003-2005 Tom Wu * All Rights Reserved. * * Permission is hereby granted, ...

  10. apache 日志轮询 linux cronolog

    Linux下运行的Web服务器Apache,默认日志文件是不分割的,一个整文件既不易于管理,也不易于分析统计.安装cronolog后,可以将日志文件按时间分割,易于管理和分析. cronolog安装配 ...