守候彩虹

我是风中的落叶，看我如何飞翔！
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

ASP.Net Ajax学习笔记（1）：UpdatePanel控件（上）

Posted on 2007-03-07 11:56  守候彩虹  阅读(6817)  评论(2)  编辑  收藏  举报
  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新手，非常希望得到你的指点。