`

UpdatePanel的用法详解

 
阅读更多

UpdatePanel的用法详解


今天用UpdatePanel做了一个实例,发现提示：requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.
后 来在UpdatePanel控件前面加上 <asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager>，问题马上就解决了，看来还是对这个控件不了解啊，呵呵...

网上了解了一下，贴出来与大家分享：

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

分享到：
| bitstream vera sans mono 字体
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    updatepanel控件使用方法

    ASP.NET UpdatePanel 控件使用方法详解 UpdatePanel 控件是 ASP.NET 中的一个重要控件，用于实现页面的异步局部更新。它与 ScriptManager 控件联合使用，可以实现页面的局部更新，而不需要刷新整个页面。下面将详细...

    asp.net UpdatePanel的简单用法

    ### ASP.NET UpdatePanel 的简单用法详解 ...通过以上介绍，我们了解了ASP.NET AJAX中UpdatePanel的使用方法及其核心属性的功能。希望这些信息能帮助你在开发过程中更好地利用局部更新技术来提高Web应用程序的性能。

    Ajax控件：UPdatepanel使用

    下面我们将深入探讨UpdatePanel的工作原理、使用方法及其优势。 ### UpdatePanel概述 UpdatePanel是一种服务器端控件，它在客户端表现为一个IFrame，用于封装需要进行异步更新的HTML元素。当在UpdatePanel内的控件...

    UpdatePanel ModalPopup经典实例

    1. **基本用法：** ModalPopup可以与任何服务器控件配合使用，通常包括一个显示详细信息的Panel。通过设置`TargetControlID`属性，指定哪个控件的点击事件触发弹出框，`OkControlID`和`CancelControlID`可以关联确认...

    ajax UpdatePanel控件示例（源代码）

    通过下载并运行提供的"UpdateDataPanel"文件，我们可以深入理解UpdatePanel的工作原理和使用方法。 **1. UpdatePanel概述** UpdatePanel是ASP.NET AJAX Toolkit中的一个服务器控件，用于实现异步更新页面的一部分...

    gridview常见使用技巧详解

    这篇“gridview常见使用技巧详解”涵盖了C#、ASP.NET和SQLDBA等相关技术，旨在帮助开发者提升GridView的使用效率，优化用户体验。以下是一些关键的知识点： 1. 数据绑定： GridView的数据绑定分为两种：声明式和...

    完全手册ASP.NETAjax实用开发详解(14-15)

    　1.6.3　UpdatePanel控件的方法 　1.6.4 局部更新 　1.6.5 整页回送 　1.6.6 多个UpdatePanel控件的更新方式 　1.7 ASP.NETAJAX其他服务器控件 　1.7.1 计时器控件Timer 　1.7.2 更新进度控件UpdatePanel 　1.7.3 ...

    ASP.NET AJAX系列4

    **ASP.NET AJAX 入门系列4 - 使用UpdatePanel控件详解** 在ASP.NET AJAX系列教程中，第四部分主要聚焦于如何有效地使用UpdatePanel控件，这是ASP.NET AJAX库中的一个核心组件，它允许开发者实现页面的部分刷新，...

    ASP.NET AJAX 入门与案例详解

    4. **UpdatePanel的使用**：讲解如何使用UpdatePanel实现页面部分更新，以及Triggers的设置。 5. **AJAX控件的应用**：介绍ASP.NET AJAX Control Toolkit中的各种控件，如Accordion、Calendar、AjaxFileUpload等，...

    《圣殿祭司的ASP.NET 2.0开发详解》光盘内容

    用户控件是另一种复用代码的方式，光盘中可能包含自定义控件和用户控件的实现和使用方法。 6. **AJAX支持**：ASP.NET 2.0通过ASP.NET AJAX库提供了部分页面更新和异步交互的能力。光盘中的PPT和代码可能涵盖了如何...

    ajax 服务器端控件详解

    ### AJAX 服务器端控件详解 #### 一、引言 随着互联网技术的不断发展，用户对Web应用体验的要求越来越高。传统的Web应用模式由于每次请求都需要重新加载整个页面，导致用户体验较差。为了解决这一问题，AJAX技术...

    技术专题：详解GridView七十二般绝技(共9讲)

    - 集成Ajax：使用UpdatePanel和AjaxControlToolkit，可以使GridView操作异步化，提升用户体验。 8. 自定义样式和模板： GridView可通过CSS类和.RowStyle、HeaderStyle等属性来定制外观。同时，TemplateField允许...

    完全手册ASPNETAjax 实用开发详解(9-11)

    　1.6.3　UpdatePanel控件的方法 　1.6.4 局部更新 　1.6.5 整页回送 　1.6.6 多个UpdatePanel控件的更新方式 　1.7 ASP.NETAJAX其他服务器控件 　1.7.1 计时器控件Timer 　1.7.2 更新进度控件UpdatePanel 　1.7.3 ...

    完全手册ASP.NETAjax实用开发详解(1-6)

    　1.6.3　UpdatePanel控件的方法 　1.6.4 局部更新 　1.6.5 整页回送 　1.6.6 多个UpdatePanel控件的更新方式 　1.7 ASP.NETAJAX其他服务器控件 　1.7.1 计时器控件Timer 　1.7.2 更新进度控件UpdatePanel 　1.7.3 ...

    完全手册ASP.NETAjax实用开发详解(12-13)

    　1.6.3　UpdatePanel控件的方法 　1.6.4 局部更新 　1.6.5 整页回送 　1.6.6 多个UpdatePanel控件的更新方式 　1.7 ASP.NETAJAX其他服务器控件 　1.7.1 计时器控件Timer 　1.7.2 更新进度控件UpdatePanel 　1.7.3 ...

    完全手册ASP.NETAjax实用开发详解(7-8)

    　1.6.3　UpdatePanel控件的方法 　1.6.4 局部更新 　1.6.5 整页回送 　1.6.6 多个UpdatePanel控件的更新方式 　1.7 ASP.NETAJAX其他服务器控件 　1.7.1 计时器控件Timer 　1.7.2 更新进度控件UpdatePanel 　1.7.3 ...

    征服ASP.NET 2.0 Ajax——Web开发技术详解(光盘使用说明)

    - **AJAXUpdatePanelCalendar**：使用两个控件的更新对比演示UpdatePanel的优点。 - **AJAXUpdatePanelUserControl**：在用户控件中使用UpdatePanel。 以上章节覆盖了从基础知识到高级应用的各个方面，通过这些示例...

    Web2.0——Asp.NET_Ajax技术详解与典型应用.rar

    本资源包含的"Web2.0——Asp.NET_Ajax技术详解与典型应用"源代码，是针对这一主题的实践性学习资料，适合已经掌握基础ASP.NET知识并希望深入理解和应用Ajax技术的开发者。 1. **Ajax基础**：Ajax的核心理念是在不...

    VS中AJAX组件案例及源码

    下面我们将详细介绍UpdatePanel的工作原理、使用方法以及如何结合Visual Studio进行实践操作。 首先，UpdatePanel的工作机制基于ASP.NET AJAX的PageRequestManager（PRM）。当在UpdatePanel内的控件触发回发时，PRM...

Magicbox
Global site tag (gtag.js) - Google Analytics