学习笔记:UpdatePanel控件
Asp.net UpdatePanel 允许用户构建一个丰富的,以客户端为中心的应用程序,引用UpdatePanel控件,能够实现页面的部分刷新,一个包含scriptManage和 UpdatePanel控件的页面自动具有页面部分刷新的功能,不需要写任何的客户端JavaScript代码。一个web页面只能包含一个 ScriptManage控件,但可以包含一个或多个UpdatePanel控件。
使用UpdatePanel控件实现页面的局部更新,需要包含一个ScriptManage控件,并且必须将ScriptManage控件的 EnablePartialRendering属性设置为true,不过你不用担心,该属性的默认值就是True,所以,在默认情况下,只要添加了 ScriptManage控件,该页面就自动具有了局部更新的能力。
下面,我们来看看页面中UpdatePanel的几种用法:
一、一般用法:下面的代码展示了一个包含了一个Button控件的UpdatePanel控件的一般用法,因为UpdatePanel控件的ChildAsTriggers属性默认值为ture,所以,当我们点击这个Button按钮时将引发一个异步回传。
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内。请看如下代码:
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:
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:
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也将被刷新。请看如下代码:
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:
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添加内容,请看如下代码。
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控件的更多相关文章
- iOS学习笔记——基础控件(上)
本篇简单罗列一下一些常用的UI控件以及它们特有的属性,事件等等.由于是笔记,相比起来不会太详细 UIView 所有UI控件都继承于这个UIView,它所拥有的属性必是所有控件都拥有,这些属性都是控件最 ...
- Python:GUI之tkinter学习笔记1控件的介绍及使用
相关内容: tkinter的使用 1.模块的导入 2.使用 3.控件介绍 Tk Button Label Frame Toplevel Menu Menubutton Canvas Entry Mes ...
- ios 学习笔记之控件属性
1.文本框 设置密码属性:Secure Text Entry 勾选; 设置文本框带清除属性: Clear Button =Is always visible; 默认是不带清除属性:Never app ...
- jQuery学习笔记(控件位置定位、尺寸大小的获取等)
想做一个幽灵按钮出来,效果大概如下图: 当点击按钮的时候,会有四根线条从四个方向飞入,经历从“无-有-无”的闪入过程. 那么我的设计想法是,先在HTML中定义一个按钮,然后在jQuery中设计按钮点击 ...
- 学习笔记-menusript控件中条目权限设置使用
在做一个小程序的时候,偶然发现了使用menusript控件做权限设置的方法,仅此标记,以供参考. 首先创建一个实例:testuseright.sln, 在项目文件里创建两个窗体:Form1.cs和us ...
- IOS 学习笔记(7) 控件 分隔栏控件(UISegmentControl)的使用方法
分隔栏控件的系统默认式样一共有3种,分别是“普通式样”,"边框式样","条状式样" 分隔栏控件中有一个momentary属性,默认时NO.当开发者配置成YES时 ...
- IOS 学习笔记(6) 控件 文本域(UITextField)的使用方法
UITextField控件的诸多特性都和UITextView相似,比如成为输入文本焦点时键盘自动显示,支持长按弹出动作选项,能够接收输入事件(开始输入,修改内容,结束输入和点击回车等). 1.特有的特 ...
- IOS 学习笔记(5) 控件 文本视图(UITextView)的使用方法
相对于UILabell所支持的较短文本内容,UITextView对于长文本的支持更好.UITextView能够以滚动的方式全部浏览到长文本,并且就像UILabel那样,从ISO6,他也提供了对NSAt ...
- IOS 学习笔记(4) 控件 标签(UILabel)的使用方法
虽说Label的中文翻译是标签标记,但它其实是一个静态文本内容的展现控件. 一般来说,UILabel只是一个只读的文本视图,开发者可以利用UiLabel来展示内容长度有固定上限的文字内容.并且,UIL ...
- [Android学习笔记]组合控件的使用
组合控件的使用 开发过程中,多个UI控件需要协同工作,相互交互之后,才可完成一个完整的业务需求,此时可把这些控件封装成为一个整体,相互之间的交互逻辑封装其中,外部调用可无需关心内部逻辑,只需获取处理后 ...
随机推荐
- C# 中的多线程(转载)
关于多线程的系列,翻译自国外大牛的文章,值得推荐 原文地址:https://blog.gkarch.com/topic/threading.html
- 12个css高级技巧.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于ebox
看了介绍,觉得挺不错的东西,希望能够一路走下去 老话题STM32编程,新思路,一样是编程,味道却大有不同.这就是STM32之eBox编程.让你提议不一样的编程,让开发快到你意想不 ...
- 安装第三方库出现 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 内容如下. 然 ...
- HttpClient请求返回JSON、图片
/** * Created by RongGuang on 2015/9/19. */ public class RongHttp { /** * Http Post请求 * @param url * ...
- mybatis动态SQL标签的用法
动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦.拼接的时候要确保不能忘了必要的空格 ...
- noi 2989 糖果
题目链接:http://noi.openjudge.cn/ch0206/2989/ 首先,数据很大,直接用背包会re. 这里增加的是对%k 的余数维度.f[i][j] 表示前 i 种糖果取到总颗数模 ...
- CSS简写指南(转)
高效的css写法中的一条就是使用简写.通过简写可以让你的CSS文件更小,更易读.而了解CSS属性简写也是前端开发工程师的基本功之一.今天我们系统地总结一下CSS属性的缩写. 1.色彩缩写 色彩的缩写最 ...
- jQuery 效果 —— 滑动
jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...
- 我的android学习经历32
android系统架构 1.Linux内核层(LINUX KERNEL) 这是系统架构的最低层,这层为android设备的硬件提供了驱动 2.系统运行库层(LIBRARIES) 这一层为倒数第二层,利 ...