首页 > 代码库 > AJAX中UPDATEPANEL配合TIMER控件实现局部无刷新
AJAX中UPDATEPANEL配合TIMER控件实现局部无刷新
首先加入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: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: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事件,用来显示最近刷新的时间
protected void Timer1_Tick(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); }
注:Timer控件与UpdatePanel一样均需要ScriptManager控件的支持。
AJAX中UPDATEPANEL配合TIMER控件实现局部无刷新