zoukankan      html  css  js  c++  java
  • 学习笔记: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                         <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新手,非常希望得到你的指点。

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

  • 相关阅读:
    Redux React-redux 理解
    React ---- 浅谈ReactJs
    javascript --- 鼠标事件
    javaScript --- localStorage 本地存储
    javascript -- 对象(深拷贝、浅拷贝)
    javascript --- 数组输出数组中最大值最小值差值
    Css中未知 div 宽高度,水平垂直居中方法
    Windows下使用NCL(Cygwin模拟Linux环境)
    Qt加载网页(加载浏览器插件)和制作托盘后台运行(南信大财务报账看号)
    OpenGL超级宝典第5版&&GLSL法线变换
  • 原文地址:https://www.cnblogs.com/hitler/p/3591076.html
Copyright © 2011-2022 走看看