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。

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

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