学习笔记: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控件内使用这些控件,以完成页面的局部更新。