UpdatePanel的简单用法(1)

最新推荐文章于 2018-02-26 15:28:48 发布
最新推荐文章于 2018-02-26 15:28:48 发布
阅读量3.8k 收藏 1
点赞数
文章标签： server button postback triggers ajax c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y63964632/article/details/3260898
版权
         局部更新是ajax技术的最基本，也是最重要的用法，今天大概把asp.net ajax中的局部更新控件 updatepanel的用法记录下，大家可以共同探讨
 
UpdatePanel控制页面的局部更新，这个更新功能依赖于scriptManger控件的EnablePartialRendering属性，如果这个属性设置为false局部更新会失去作用(scriptManger控件的EnablePartialRendering属性的默认值为true不必刻意去设置)
下面是一个完整的UpdatePanel的结构：

  1.     <asp:ScriptManager ID="ScriptManager1" runat="server" >
  2.     </asp:ScriptManager>
  3.     <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Block">
  4.         <ContentTemplate>
  5.         </ContentTemplate>
  6.        <Triggers>
  7.        <asp:AsyncPostBackTrigger />
  8.        <asp:PostBackTrigger />
  9.        </Triggers>
  10.     </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
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>无标题页</title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <div>
  12.     
  13.     </div>
  14.     <asp:ScriptManager ID="ScriptManager1" runat="server">
  15.     </asp:ScriptManager>
  16.     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
  17.     <ContentTemplate>
  18.     <% =DateTime.Now.ToString()%>
  19.         <asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" />
  20.     </ContentTemplate>
  21.     </asp:UpdatePanel>
  22.     <asp:Button ID="Button2" runat="server" Text="Button" />
  23.     </form>
  24. </body>
  25. </html>
不管哪个按钮，都会触发更新，只不过外面的按钮postback的时候页面显示回发而已 ！

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>无标题页</title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <div>
  12.     
  13.     </div>
  14.     <asp:ScriptManager ID="ScriptManager1" runat="server">
  15.     </asp:ScriptManager>
  16.     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
  17.     <ContentTemplate>
  18.     <% =DateTime.Now.ToString()%>
  19.         <asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" />
  20.     </ContentTemplate>
  21.     </asp:UpdatePanel>
  22.     <asp:Button ID="Button2" runat="server" Text="Button" />
  23.     </form>
  24. </body>
  25. </html>

下面介绍下updatePanel的触发器Trigger

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

开始简单介绍了UpdatePanel的俩中触发器asyncPostBackTrigger和PostBackTrigger的作用
这里用例子大概在稍微深入地介绍下：

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

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

下面是简单例子：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>无标题页</title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <div>
  12.     
  13.     </div>
  14.     <asp:ScriptManager ID="ScriptManager1" runat="server">
  15.     </asp:ScriptManager>
  16.     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
  17.     <ContentTemplate>
  18.     <% =DateTime.Now.ToString()%>
  19.         <asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" />
  20.     </ContentTemplate>
  21.     <Triggers>
  22. <!--下面的注释掉，点击updatePanel内的button则只更新Panel内的时间，取消注释责全部更新-->
  23.    <!-- <asp:PostBackTrigger ControlID="Button1"/>-->
  24.     </Triggers>
  25.     </asp:UpdatePanel>
  26.     <br />
  27.      <% =DateTime.Now.ToString()%>
  28.     <asp:Button ID="Button2" runat="server" Text="Button" />
  29.     </form>
  30. </body>
  31. </html>

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

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

例：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>无标题页</title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <asp:ScriptManager ID="ScriptManager1" runat="server">
  12.     </asp:ScriptManager>
  13.     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
  14.     <ContentTemplate>
  15.     <% =DateTime.Now.ToString()%>
  16.     </ContentTemplate>
  17.     <Triggers>
  18.    <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
  19.     </Triggers>
  20.     </asp:UpdatePanel>
  21.     <br />
  22.      <% =DateTime.Now.ToString()%>
  23.     <asp:Button ID="Button2" runat="server" Text="Button" />
  24.     </form>
  25. </body>
  26. </html>
运行了发现点击button2的时候只更新了 updatepanel内部的时间
上面的例子也可以动态更新UpdatePanel的一些源代码：
具体例子就不写了下面 大概写点主要代码：

  1.     protected void Page_Load(object sender, EventArgs e)
  2.     {
  3.            //获取更新控件儿
  4.             UpdatePanel mapanel = UpdatePanel1;
  5.           //设置触发模式
  6.             mapanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
  7.            //显示时间
  8.             Label1.Text = DateTime.Now.ToString();
  9.             //添加触发
  10.             AsyncPostBackTrigger tri = new AsyncPostBackTrigger();
  11.             tri.ControlID = "Button2";
  12.             tri.EventName = "Click";
  13.             mapanel.Triggers.Add(tri);
  14.      
  15.     }



先记录这些~还望多多大虾们多多指教 


y63964632
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
updatepanel
12-02
updatepanel的使用方法及实例，其中有updatepanel的嵌套使用。
asp.net UpdatePanel的简单用法
10-30
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> ()%> <asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" /> </asp:UpdatePanel> ``` 每次点击Button1，时间戳...
ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）
weixin_34321977的博客
10-29 159
UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法（第一篇）。   主要内容 1．UpdatePan...
UpdatePanel的用法
weixin_30433075的博客
10-04 147
UpdatePanel控件也是Ajax里用得最多的控件之中的一个，UpdatePanel控件是用来局部更新网页上的内容，网页上要局部更新的内容必须放在UpdatePanel控件里，他必须和上一次说的ScriptManager控件一起使用。如今来看UpdatePanel的属性 UpdatePanel重要的属性例如以下： ...
Updatepanel的基础用法（1）
做得最大的项目，就是人生
11-24 1652
1.     Conditional:该UpdatePanel内的内容只会在该UpdatePanel内部有回发时更新         always:会在本页面有回发时更新，而不管这个回发是不是在其UpdatePanel内部发生         尽量避免使用always，因为它会在每次页面有回发时都会进行更新
UpdatePanel触发javascript脚本的方法附代码
10-30
这种方法适合简单的JavaScript交互，但对复杂的交互场景不够灵活。 2. **在呈现过程中初始化脚本**：另一种方法是在`RenderContents`方法中动态生成JavaScript代码，确保脚本资源在前，初始化脚本在后，控件在中间...
UpdatePanel刷新后要调用JavaScript函数
04-07
这个方法不仅适用于简单的操作，还可以扩展到更复杂的场景，比如数据绑定、DOM操作等。同时，配合jQuery库，可以进一步简化JavaScript代码，提高代码的可读性和维护性。 在阅读提供的PDF文档《Javascript-function-...
初学 ASP.NET AJAX (三）：使用 UpdatePanel
夏风鱼的专栏
11-02 865
1 概述ASP.NET UpdatePanel 控件能让你创建丰富的、以客户为中心的 Web 应用程序。使用 UpdatePanel 控件，可以刷新选择的页面部分而不是使用回发来刷新整个页面，这就像是执行了一个局部页面更新一样。包含一个 ScriptManager 和一个或多个 UpdatePanel 的 Web 页面会自动加入局部页面更新，而不需要定制客户端代码。1.1 场景Upda
UpdatePanel
krakan的专栏
12-04 580
UpdatePanel 控件ASP.NET UpdatePanel 控件可用于生成功能丰富、以客户端为中心的 Web 应用程序。通过使用 UpdatePanel 控件，可以在回发期间刷新网页的选定部分而不是刷新整个网页。这称为执行部分页更新。包含一个 ScriptManager 控件和一个或多个 UpdatePanel 控件的 ASP.NET 网页，不需要使用自定义客户端脚本即可自
UpdatePanel控件应用
06-06
关于UpdatePanel控件的使用和详解,没接触过这个控件的人可以拿做参考.该文件为Word格式,是一片文章的word版,属于转载.
UpdatePanel控件使用详解（一）
weixin_34247155的博客
08-11 239
UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自实现一． UpdatePanel控件概述 UpdatePanel可以用来创建丰富的局部更新Web应用程序，它...
ASP.Net Ajax学习笔记（1）：UpdatePanel控件
Stephen_ZhaoZD的博客
11-30 582
Asp.net UpdatePanel 允许用户构建一个丰富的，以客户端为中心的应用程序，引用UpdatePanel控件，能够实现页面的部分刷新，一个包含scriptManage和 UpdatePanel控件的页面自动具有页面部分刷新的功能，不需要写任何的客户端JavaScript代码。一个web页面只能包含一个 ScriptManage控件，但可以包含一个或多个UpdatePanel控件。
updatePanel控件
不是我的博客
08-18 440
updatePanel控件更新原则： updatePanel内部的回发的控件，会触发updatePanel的更新 默认updateMode=always,凡是触发updatePanels更新的都会一起更新 updateMode=Conditional ,自updatePanel回发控件，Triggers列表下
UpdatePanel控件
天涯~的博客
02-26 737
ASP.NET UpdatePanel控件可用于生成功能丰富、以客户端为中心的Web应用程序。通过使用UpdatePanel控件，可以在回发期间刷新网页的选定部分而不是刷新整个网页。这称为执行部分页更新。包含一个ScriptManager控件和一个或多个UpdatePanel控件的ASP.NET网页，不需要使用自定义客户端脚本即可自动参与部分页更新。 启用部分页更新： UpdatePanel控
UpdatePanel 控件
尼奥
03-05 659
ASP.NET UpdatePanel 控件可用于生成功能丰富、以客户端为中心的 Web 应用程序。通过使用 UpdatePanel 控件，可以在回发期间刷新网页的选定部分而不是刷新整个网页。这称为执行部分页更新。包含一个 ScriptManager 控件和一个或多个 UpdatePanel 控件的 ASP.NET 网页，不需要使用自定义客户端脚本即可自动参与部分页更新。 UpdatePa
UpdatePanel简单用法
何静媛
01-01 9450
ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异步局部更新区域，它必须依赖于ScriptManager存在，因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功能。 几个重要的属性：    ScriptManager控件的EnablePartialRendering属性：t
转载Ajax.Net--ScriptManager和UpdatePanel控件
weixin_30606461的博客
12-12 138
ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异步局部更新区域，它必须依赖于ScriptManager存在，因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功能。 几个重要的属性： ScriptManager控件的EnablePartialRendering属性：tr...
UpdatePanel的使用方法
weixin_30745553的博客
06-30 45
UpdatePanel控件也是Ajax里用得最多的控件之一，UpdatePanel控件是用来局部更新网页上的内容，网页上要局部更新的内容必须放在UpdatePanel控件里，他必须和上一次说的ScriptManager控件一起使用。现在来看UpdatePanel的属性 UpdatePanel重要的属性如下：属性 说明 ChildrenAsTriggers 当UpdateMode属性为Condit...
ASP.NET UpdatePanel 举例说明使用方法
最新发布
06-06
以下是一个使用 ASP.NET UpdatePanel 的简单示例： ``` <asp:ScriptManager ID="ScriptManager1" runat="server"> ...这只是一个简单的示例，实际使用中可能会更加复杂，但基本的使用方法和原理是相同的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值