ASP.Net Ajax学习笔记（1）：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按钮时将引发一个异步回传。

 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。

 在上一章我们主要讨论了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控件内使用这些控件，以完成页面的局部更新。