Asp.net UpdatePanel 允许用户构建一个丰富的,以客户端为中心的应用程序,引用UpdatePanel控件,能够实现页面的部分刷新,一个包含scriptManage和 UpdatePanel控件的页面自动具有页面部分刷新的功能,不需要写任何的客户端JavaScript代码。一个web页面只能包含一个 ScriptManage控件,但可以包含一个或多个UpdatePanel控件。

使用UpdatePanel控件实现页面的局部更新,需要包含一个ScriptManage控件,并且必须将ScriptManage控件的 EnablePartialRendering属性设置为true,不过你不用担心,该属性的默认值就是True,所以,在默认情况下,只要添加了 ScriptManage控件,该页面就自动具有了局部更新的能力。

下面,我们来看看页面中UpdatePanel的几种用法:

一、一般用法:下面的代码展示了一个包含了一个Button控件的UpdatePanel控件的一般用法,因为UpdatePanel控件的ChildAsTriggers属性默认值为ture,所以,当我们点击这个Button按钮时将引发一个异步回传。

 1 <div>
 2             <asp:ScriptManager ID="ScriptManager" 
 3                                runat="server" />
 4             <asp:UpdatePanel ID="UpdatePanel1" 
 5                              UpdateMode="Conditional"
 6                              runat="server">
 7                 <ContentTemplate>
 8                    <fieldset>
 9                    <legend>UpdatePanel content</legend>
10                     <!-- Other content in the panel. -->
11                     <%=DateTime.Now.ToString() %>
12                     <br />
13                     <asp:Button ID="Button1" 
14                                 Text="Refresh Panel" 
15                                 runat="server" />
16                     </fieldset>
17                 </ContentTemplate>
18             </asp:UpdatePanel>
19         </div>
20 

二、为UpdatePanel控件指定一个Trigger:默认情况下,UpdatePanel控件内部的任何控件引发的PostBack都是异步 PostBack,同时实现页面的局部更新,当然,你也可以去配置一个其他的控件去刷新一个UpdatePanel,这时,你需要设置 UpdatePanel的Trigger属性,一个Trigger将被绑定到指定的控件,当这个控件引发postback时,将异步刷新这个 UpdatePanel,当然,这个被Trigger指定的控件不必在该UpdatePanel内。请看如下代码:

 1 <div>
 2     <asp:Button ID="Button1" 
 3                 Text="Refresh Panel"
 4                 runat="server" />
 5     <asp:ScriptManager ID="ScriptManager1" 
 6                        runat="server" />
 7     <asp:UpdatePanel ID="UpdatePanel1" 
 8                      UpdateMode="Conditional"
 9                      runat="server">
10                      <Triggers>
11                        <asp:AsyncPostBackTrigger ControlID="Button1" />
12                      </Triggers>
13                      <ContentTemplate>
14                      <fieldset>
15                      <legend>UpdatePanel content</legend>
16                      <%=DateTime.Now.ToString() %>
17                      </fieldset>
18                      </ContentTemplate>
19     </asp:UpdatePanel>
20 
21     </div>
22 

在UpdatePanel的Trigger元素里,我们定义了一个<asp:AsyncPostBackTrigger> 元素,该元素的ControlID 属性指定了引发Trigger的控件ID,EventName属性指定了引发PostBack的事件名称,若未指定该属性,将使用该控件的默认事件(例如:在Button控件中,默认事件为Click事件)。另,以上设置都可以在VS2005属性设计器中可视化的设置。

三、Master Page中的UpdatePanel:在Master Page中使用UpdatePanel,你必须决定如何包含ScriptManage控件,有以下两种策略在页面上来包含ScriptManger控件,1.将ScriptManage控件放置在Masert Page中,这样,它将作用于所有内容页。如果你想在内容页去注册脚本货服务,你可以在内容页添加一个ScriptManagerProxy 控件。2.将ScriptManage控件放置在每个包含UpdatePanel的内容页上。使用何种策略,取决于你将在你的应用程序中以何种方式管理你的脚本。

如果以策略一的方式包含了ScriptManage控件,但你在某个内容页面上又不想实现局部更新,那么,你就必须在该页面以编程的方式设置ScriptManage控件的 EnablePartialRendering 属性为false。下面代码展示了以策略一的方式使用UpdatePanel的情况:
Master Page:

 1 <%@ Master Language="C#" %>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <script runat="server">
 6 
 7     public DateTime LastUpdate
 8     {
 9         get
10         {
11             return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
12         }
13         set
14         {
15             ViewState["LastUpdate"] = value;
16         }
17     }
18 
19 
20     protected void MasterButton2_Click(object sender, EventArgs e)
21     {
22         LastUpdate = DateTime.Now;
23         ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
24 
25     }
26 
27     protected void Page_Load(object sender, EventArgs e)
28     {
29         ScriptManager1.RegisterAsyncPostBackControl(Button2);
30     }
31 </script>
32 
33 <html xmlns="http://www.w3.org/1999/xhtml">
34 <head id="Head1" runat="server">
35     <title>ScriptManager in Master Page Example</title>
36 </head>
37 <body>
38     <form id="form1" runat="server">
39         <div>
40             <asp:ScriptManager ID="ScriptManager1" runat="server" />
41             <asp:Panel ID="MasterPanel1" runat="server" GroupingText="Master Page">
42                <asp:Button ID="Button1" runat="server" Text="Full Page Refresh" />
43                <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="MasterButton2_Click" />
44             </asp:Panel>
45             <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
46             </asp:ContentPlaceHolder>
47         </div>
48     </form>
49 </body>
50 </html>
51 

Content Page:

 1 <%@ Page Language="C#" MasterPageFile="MasterCS.master"
 2     Title="ScriptManager in Content Page" %>
 3 
 4 <%@ MasterType VirtualPath="MasterCS.master" %>
 5 
 6 <script runat="server">
 7 
 8     protected void Button3_Click(object sender, EventArgs e)
 9     {
10         Master.LastUpdate = DateTime.Now;
11     }
12 
13 </script>
14 
15 <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
16     runat="Server">
17     <asp:Panel ID="Panel2"
18                GroupingText="ContentPage"
19                runat="server" >
20         <asp:UpdatePanel ID="UpdatePanel1" 
21                          UpdateMode="Conditional" 
22                          runat="server">
23             <ContentTemplate>
24                 <p>
25                     Last updated: <strong>
26                         <%= Master.LastUpdate.ToString() %>
27                     </strong>
28                 </p>
29                 <asp:Button ID="Button3"
30                             Text="Refresh Panel"
31                             OnClick="Button3_Click"
32                             runat="server"  />
33             </ContentTemplate>
34         </asp:UpdatePanel>
35     </asp:Panel>
36 </asp:Content>

四、UpdatePanel的嵌套:UpdatePanel能够嵌套使用,在这种情况下,若父Panel被刷新,那么,所有的子Panel也将被刷新。请看如下代码:

 1  <div>
 2             <asp:ScriptManager ID="ScriptManager" 
 3                                runat="server" />
 4             <asp:UpdatePanel ID="OuterPanel" 
 5                              UpdateMode="Conditional" 
 6                              runat="server">
 7                 <ContentTemplate>
 8                     <div>
 9                         <fieldset>
10                             <legend>Outer Panel </legend>
11                             <br />
12                             <asp:Button ID="OPButton1" 
13                                         Text="Outer Panel Button" 
14                                         runat="server" />
15                             <br />
16                             Last updated on
17                             <%= DateTime.Now.ToString() %>
18                             <br />
19                             <br />
20                             <asp:UpdatePanel ID="NestedPanel1" 
21                                                UpdateMode="Conditional"
22                                                runat="server">
23                                 <ContentTemplate>
24                                     <div class="NestedPanel">
25                                         <fieldset>
26                                             <legend>Nested Panel 1</legend>
27                                             <br />
28                                             Last updated on
29                                             <%= DateTime.Now.ToString() %>
30                                             <br />
31                                             <asp:Button ID="NPButton1"
32                                                         Text="Nested Panel 1 Button" 
33                                                         runat="server" />
34                                         </fieldset>
35                                     </div>
36                                 </ContentTemplate>
37                             </asp:UpdatePanel>
38                         </fieldset>
39                     </div>
40                 </ContentTemplate>
41             </asp:UpdatePanel>
42  </div>
43 

五:以编程方式刷新UpdatePanel:

  1 <%@ Page Language="C#" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5 
  6 <script runat="server">
  7 
  8     protected SortedList AnsweredQuestions
  9     {
 10         get { return (SortedList)(ViewState["AnsweredQuestions"] ?? new SortedList()); }
 11         set { ViewState["AnsweredQuestions"] = value; }
 12     }
 13 
 14     protected void Page_Load()
 15     {
 16         ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
 17     }
 18 
 19     protected void ChoicesRadioButtonList_SelectedIndexChanged(object sender, EventArgs e)
 20     {
 21         SortedList answers = this.AnsweredQuestions;
 22         RadioButtonList r = (RadioButtonList)sender;
 23         answers[r.ToolTip] = r.SelectedValue;
 24         this.AnsweredQuestions = answers;
 25 
 26         ResultsList.DataSource = this.AnsweredQuestions;
 27         ResultsList.DataBind();
 28 
 29         if (this.AnsweredQuestions.Count == SurveyDataList.Items.Count)
 30             SubmitButton.Visible = true;
 31 
 32         UpdatePanel1.Update();
 33     }
 34 
 35     protected void SubmitButton_Click(object sender, EventArgs e)
 36     {
 37         // Submit responses.
 38     }
 39 </script>
 40 
 41 <html xmlns="http://www.w3.org/1999/xhtml">
 42 <head id="Head1" runat="server">
 43     <title>Registering Controls as Async Postback Controls</title>
 44     <style type="text/css">
 45     .AnswerFloatPanelStyle {
 46     background-color: bisque;
 47     position: absolute;
 48     right: 10px;
 49     height: 130px;
 50     width: 150px;
 51     border-right: silver thin solid; border-top: silver thin solid; 
 52     border-left: silver thin solid; border-bottom: silver thin solid;    
 53     }
 54     </style>
 55 </head>
 56 <body>
 57     <form id="form1" runat="server">
 58         <div>
 59             <asp:ScriptManager ID="ScriptManager1" runat="server" />
 60             <div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" runat="server">
 61                 <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
 62                     <ContentTemplate>
 63                         Completed Questions:
 64                         <asp:DataList ID="ResultsList" runat="server">
 65                             <ItemTemplate>
 66                                 <asp:Label ID="ResultQuestion" runat="server" Text='<%# Eval("Key") %>' />
 67                                 ::
 68                                 <asp:Label ID="ResultAnswer" runat="server" Text='<%# Eval("Value") %>' />
 69                             </ItemTemplate>
 70                         </asp:DataList>
 71                         <p style="text-align: right">
 72                             <asp:Button ID="SubmitButton" Text="Submit" runat="server" Visible="false"
 73                                 OnClick="SubmitButton_Click" />
 74                         </p>
 75                         <asp:Label ID="Message" runat="Server" />
 76                     </ContentTemplate>
 77                 </asp:UpdatePanel>
 78             </div>
 79             
 80             <asp:XmlDataSource ID="SurveyDataSource" 
 81                                runat="server" 
 82                                XPath="/Questions/Question"
 83                                DataFile="~/App_Data/SurveyQuestions.xml"/>
 84             <asp:DataList
 85                 ID="SurveyDataList"
 86                 DataSourceID="SurveyDataSource"
 87                 runat="server">
 88 
 89                 <ItemTemplate>
 90                   <table cellpadding="2" cellspacing="2">
 91                     <tr>
 92                       <td valign="top">
 93                         <asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' runat="server" />
 94                       </td>
 95                     </tr>
 96                     <tr><td>
 97                       <asp:RadioButtonList ID="ChoicesRadioButtonList" runat="server" 
 98                         DataSource='<%#XPathSelect("Choices/Choice") %>'
 99                         DataTextField="InnerText" DataValueField="InnerText" 
100                         AutoPostBack="True"
101                         ToolTip='<%# "Question" + XPath("@ID") %>'
102                         OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
103                     </td></tr>
104                   </table>
105                   <hr />
106                 </ItemTemplate>
107             </asp:DataList>
108         </div>
109     </form>
110 </body>
111 </html>
112 

在以上代码中,页面调用ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList); 方法注册了一个能够引发Trigger的控件,调用Update()方法实现了Updatepanel的刷新。

六:以编程方式创建UpdatePanel:你能够以编程的方式创建一个UpdatePanel的实例,并且可以使用它的ContentTemplateContainer 属性和Add(control)方法为该Panel添加内容,请看如下代码。

 1 <%@ Page Language="C#" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 4  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 5 
 6 <script runat="server">
 7 
 8     protected void Page_Load(object sender, EventArgs e)
 9     {
10         UpdatePanel up1 = new UpdatePanel();
11         up1.ID = "UpdatePanel1";
12         up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
13         Button button1 = new Button();
14         button1.ID = "Button1";
15         button1.Text = "Submit";
16         button1.Click += new EventHandler(Button_Click);
17         Label label1 = new Label();
18         label1.ID = "Label1";
19         label1.Text = "A full page postback occurred.";
20         up1.ContentTemplateContainer.Controls.Add(button1);
21         up1.ContentTemplateContainer.Controls.Add(label1);
22         Page.Form.Controls.Add(up1);
23 
24     }
25     protected void Button_Click(object sender, EventArgs e)
26     {
27         ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
28             DateTime.Now.ToString();
29     }
30 
31 </script>
32 
33 <html xmlns="http://www.w3.org/1999/xhtml">
34 <head id="Head1" runat="server">
35     <title>UpdatePanel Added Programmatically Example</title>
36 </head>
37 <body>
38     <form id="form1" runat="server">
39         <div>
40             <asp:ScriptManager ID="TheScriptManager"
41                                runat="server" />
42         </div>
43     </form>
44 </body>
45 </html>
46 

由于UpdatePanel的ChildrenAsTriggers的默认属性为True,所以,在该示例中,Button控件将引发Panel的Trigger。

参考文档:http://ajax.asp.net/docs/overview/UpdatePanelOverview.aspx

以上文档是我对asp.net ajax一个官方文档的....,不能说翻译吧,毕竟,我的E文水平是要借助金山词霸才能看懂的,算是自我的一个理解吧,也正因为我E文水平有限,很多疏漏,错误,和理解不正确的地方,还请大家不吝指出哈,我也是一个Ajax新手,非常希望得到你的指点。

在上一章我们主要讨论了UpdatePanel控件的几种使用方法,在这一章里,我们将看看使用UpdatePanel控件有那些限制,对于使用UpdatePanel的限制,官方文档是这样给我们描述的:

1.TreeView和Menu控件与UpdatePanel控件不兼容。

2.Web Parts控件。

3.在以异步回传方式上传文件时,FileUpload控件与UpdatePanel控件不兼容。

4.当GridView和DetailsView控件的EnableSortingAndPagingCallbacks属性被设置成True时(默认值为False)与UpdatePanel控件不兼容。

5.Substitution控件。

6.Validation控件,包括(BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator,  ValidationSummary)。

7.当Login, PasswordRecovery, ChangePassword, and CreateUserWizard 控件没有转换到编辑模板时,他们与UpdatePanel不兼容。

以上这些控件仍然能够在页面中被使用,只是他们不应该被包含在UpdatePanel之内,当然,以上某些控件在某些条件下又与UpdatePanel兼容,所以,在某些情况下,你可以以一种特殊的方式在UpdatePanel控件内使用这些控件,以完成页面的局部更新。

学习笔记:UpdatePanel控件的更多相关文章

  1. iOS学习笔记——基础控件(上)

    本篇简单罗列一下一些常用的UI控件以及它们特有的属性,事件等等.由于是笔记,相比起来不会太详细 UIView 所有UI控件都继承于这个UIView,它所拥有的属性必是所有控件都拥有,这些属性都是控件最 ...

  2. Python:GUI之tkinter学习笔记1控件的介绍及使用

    相关内容: tkinter的使用 1.模块的导入 2.使用 3.控件介绍 Tk Button Label Frame Toplevel Menu Menubutton Canvas Entry Mes ...

  3. ios 学习笔记之控件属性

    1.文本框 设置密码属性:Secure Text Entry 勾选; 设置文本框带清除属性: Clear Button =Is always visible;  默认是不带清除属性:Never app ...

  4. jQuery学习笔记(控件位置定位、尺寸大小的获取等)

    想做一个幽灵按钮出来,效果大概如下图: 当点击按钮的时候,会有四根线条从四个方向飞入,经历从“无-有-无”的闪入过程. 那么我的设计想法是,先在HTML中定义一个按钮,然后在jQuery中设计按钮点击 ...

  5. 学习笔记-menusript控件中条目权限设置使用

    在做一个小程序的时候,偶然发现了使用menusript控件做权限设置的方法,仅此标记,以供参考. 首先创建一个实例:testuseright.sln, 在项目文件里创建两个窗体:Form1.cs和us ...

  6. IOS 学习笔记(7) 控件 分隔栏控件(UISegmentControl)的使用方法

    分隔栏控件的系统默认式样一共有3种,分别是“普通式样”,"边框式样","条状式样" 分隔栏控件中有一个momentary属性,默认时NO.当开发者配置成YES时 ...

  7. IOS 学习笔记(6) 控件 文本域(UITextField)的使用方法

    UITextField控件的诸多特性都和UITextView相似,比如成为输入文本焦点时键盘自动显示,支持长按弹出动作选项,能够接收输入事件(开始输入,修改内容,结束输入和点击回车等). 1.特有的特 ...

  8. IOS 学习笔记(5) 控件 文本视图(UITextView)的使用方法

    相对于UILabell所支持的较短文本内容,UITextView对于长文本的支持更好.UITextView能够以滚动的方式全部浏览到长文本,并且就像UILabel那样,从ISO6,他也提供了对NSAt ...

  9. IOS 学习笔记(4) 控件 标签(UILabel)的使用方法

    虽说Label的中文翻译是标签标记,但它其实是一个静态文本内容的展现控件. 一般来说,UILabel只是一个只读的文本视图,开发者可以利用UiLabel来展示内容长度有固定上限的文字内容.并且,UIL ...

  10. [Android学习笔记]组合控件的使用

    组合控件的使用 开发过程中,多个UI控件需要协同工作,相互交互之后,才可完成一个完整的业务需求,此时可把这些控件封装成为一个整体,相互之间的交互逻辑封装其中,外部调用可无需关心内部逻辑,只需获取处理后 ...

随机推荐

  1. C# 中的多线程(转载)

    关于多线程的系列,翻译自国外大牛的文章,值得推荐 原文地址:https://blog.gkarch.com/topic/threading.html

  2. 12个css高级技巧.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 关于ebox

         看了介绍,觉得挺不错的东西,希望能够一路走下去       老话题STM32编程,新思路,一样是编程,味道却大有不同.这就是STM32之eBox编程.让你提议不一样的编程,让开发快到你意想不 ...

  4. 安装第三方库出现 Python version 2.7 required, which was not found in the registry

    安装第三方库出现 Python version 2.7 required, which was not found in the registry 建立一个文件 register.py 内容如下. 然 ...

  5. HttpClient请求返回JSON、图片

    /** * Created by RongGuang on 2015/9/19. */ public class RongHttp { /** * Http Post请求 * @param url * ...

  6. mybatis动态SQL标签的用法

    动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦.拼接的时候要确保不能忘了必要的空格 ...

  7. noi 2989 糖果

    题目链接:http://noi.openjudge.cn/ch0206/2989/ 首先,数据很大,直接用背包会re. 这里增加的是对%k 的余数维度.f[i][j] 表示前 i 种糖果取到总颗数模 ...

  8. CSS简写指南(转)

    高效的css写法中的一条就是使用简写.通过简写可以让你的CSS文件更小,更易读.而了解CSS属性简写也是前端开发工程师的基本功之一.今天我们系统地总结一下CSS属性的缩写. 1.色彩缩写 色彩的缩写最 ...

  9. jQuery 效果 —— 滑动

    jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...

  10. 我的android学习经历32

    android系统架构 1.Linux内核层(LINUX KERNEL) 这是系统架构的最低层,这层为android设备的硬件提供了驱动 2.系统运行库层(LIBRARIES) 这一层为倒数第二层,利 ...