asp.net UpdatePanel的简单用法

 更新时间:2008年11月13日 20:25:20   转载 作者:  
局部更新是ajax技术的最基本,也是最重要的用法,今天大概把asp.net ajax中的局部更新控件 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);
}
先记录这些~还望多多大虾们多多指教

相关文章

  • Coolite优化导出Excel文件实现代码

    Coolite优化导出Excel文件实现代码

    Coolite 优化 导出 Excel 文件。可以设定列宽和导出列选择。
    2010-03-03
  • 使用重绘项美化WinForm的控件

    使用重绘项美化WinForm的控件

    这篇文章主要为大家详细介绍了如何使用重绘项美化WinForm中控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • asp.net 模拟提交有文件上传的表单(通过http模拟上传文件)

    asp.net 模拟提交有文件上传的表单(通过http模拟上传文件)

    通过HTTP模拟GET或POST请求,提交数据到服务端获取响应,比较常见些;但如上传文件到服务端,使用html form当然简单了,而因环境所限有时需要使用模拟方法去提交有附件(文件上传)的表单。
    2010-02-02
  • 设置默认Ajax操作cache and error

    设置默认Ajax操作cache and error

    设置默认Ajax操作cache and error,需要的朋友可以参考一下
    2013-02-02
  • asp.net webform自定义分页控件

    asp.net webform自定义分页控件

    这篇文章主要为大家详细介绍了asp.net webform自定义分页控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • ASP.NET搭配Ajax实现搜索提示功能

    ASP.NET搭配Ajax实现搜索提示功能

    为了更好的用户体验,不论是桌面软件还是网站,在搜索查询的输入中都会加入提示功能,就像百度搜索一样!今天笔者就ASP.NET编程介绍一下如何利用Ajax来实现搜索信息提示功能。
    2015-09-09
  • 精彩回顾!Visual Studio 2017正式版发布全纪录

    精彩回顾!Visual Studio 2017正式版发布全纪录

    两个小时的Visual Studio 2017正式版发布纪录内容还是很丰富的,这篇文章就为大家回顾了Visual Studio 2017正式版发布全过程,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • EntityFramework 6.x学习之多个上下文迁移实现分布式事务详解

    EntityFramework 6.x学习之多个上下文迁移实现分布式事务详解

    这篇文章主要给大家介绍了关于EntityFramework 6.x学习之多个上下文迁移实现分布式事务的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们随着小编来一起学习学习吧。
    2017-10-10
  • CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)

    CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)

    在管理商品后台是,由于CheckBoxList的选择太多,用户需要一个全选或全取消的功能,这样操作起来会提高效率同时可以减少误点等,本文将教大家如何实现,有需要的朋友可以参考下,望本文对你有所帮助
    2013-01-01
  • DataTable多列合并问题轻松搞定

    DataTable多列合并问题轻松搞定

    由于题库的表结构不相同,导致同样的Gridview在显示时不能同时两种不同结构的数据,这时如何在这个固定的GridView中显示不同的数据呢,感兴趣的朋友可以看下本文的解决方法
    2013-04-04

最新评论