AJAX中UPDATEPANEL配合TIMER控件实现局部无刷新

Posted 2020-08-19 BrokenIce

首先加入UpdatePanel

　　　　　　　　<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">

                     //注：UpdateMode为更新模式，设置此属性表示只刷新UpdatePanel中的部分，若不加此属性，默认为Always，刷新整个页面。

                            

                           //OnTick为时间促发函数（后台函数），Interval为时间5000为5秒，即每5秒后促发此函数
                            </asp:Timer>

                         <在此添加需要刷新的内容>

　　　　　　　　　
                      <Triggers>//此处相当于关联。简单解释就是通过Timer1来促发UpdatePanel的刷新
                                      <asp:AsyncPostBackTrigger ControlID="Timer1 EventName="Tick" />
                      </Triggers>

　　　　　　　　　<ContentTemplate>

　　　　　　　　　　<asp:Timer ID="Timer1 runat="server" Interval="5000" OnTick="Timer2_Tick">
                         </ContentTemplate>

　　　　　　
                    </asp:UpdatePanel>

后台代码：

即刚才的TIMER_TICK。

protected void Timer1_Tick(object sender, EventArgs e)
    {
         此处写上需要在5秒后做的事情。
   }

 ------------------------------------------------------------------------------------------------------------------------------------------

Timer，顾名思义即是一个定时器控件，通过它可以在指定时间间隔内刷新UpdatePanel或整个页面。该控件包含一个重要的属性  Interval ,用来定义刷新的时间间隔，单位为毫秒。另外包含一个Tick 事件，可以用来定义服务端行为。一个页面可以定义多个Timer控件来为不同的UpdatePanel指定刷新间隔，也可以多个UpdatePanel共用一个Timer。

Timer控件可以在UpdatePanel内声明，这时自动作为该UpdatePanel的Trigger:

ASP.NET-Code:

<asp:ScriptManager runat="server" id="ScriptManager1" /> <asp:UpdatePanelrunat="server" id="UpdatePanel1"     UpdateMode="Conditional">   <contenttemplate>    <asp:Timer id="Timer1" runat="server"       Interval="120000"      OnTick="Timer1_Tick">     </asp:Timer>   </contenttemplate> </asp:UpdatePanel>

 

也可以在UpdatePanle外声明，此时如果要刷新该UpdatePanel，则必须指定Timer为它的Trigger:

ASP.NET-Code:

<asp:ScriptManager runat="server" id="ScriptManager1" /> <asp:Timer ID="Timer1"runat="server" Interval="120000"   OnTick="Timer1_Tick"> </asp:Timer> <asp:UpdatePanelID="UpdatePanel1" runat="server">   <Triggers>     <asp:AsyncPostBackTriggerControlID="Timer1"         EventName="Tick" />     </Triggers>     <ContentTemplate>       <asp:Label ID="Label1" runat="server" ></asp:Label>   </ContentTemplate></asp:UpdatePanel>

 

在本例中我们可以定义他的Tick事件，用来显示最近刷新的时间

C#-Code:

protected void Timer1_Tick(object sender, EventArgs e) {      Label1.Text = DateTime.Now.ToString(); }

 

注：Timer控件与UpdatePanel一样均需要ScriptManager控件的支持。