ExtAspNet应用技巧（二十） - 如何创建ext:Timer控件
引子
在刚刚发布的 ExtAspNet v2.1.1版本中，应网友 要求添加了ext:Timer控件，实现的效果就是定时回发（AJAX）到服务器执行一段C#代码。
因为这个控件非常简单，没有页面可视元素，所以我就单独拿出来讲解一下，或许对大家阅读ExtAspNet源代码有一定的帮助。
使用Timer控件
先来看下使用Timer的例子（ 在线版本）:
ASPX标签声明:
<ext:PageManager ID="PageManager1" runat="server" />
<ext:Timer ID="Timer1" Interval="3" Enabled="false" OnTick="Timer1_Tick" runat="server">
</ext:Timer>
<ext:Button ID="btnStartTimer" runat="server" Text="Start Timer" OnClick="btnStartTimer_Click">
</ext:Button>
<ext:Button ID="btnStopTimer" runat="server" Text="Stop Timer" OnClick="btnStopTimer_Click">
</ext:Button>
<br />
<ext:Label ID="labServerTime" runat="server" Text="This is current datetime.">
</ext:Label>
这里定义Timer1每隔3秒回发服务器一次（Interval="3"），默认不启用（Enabled="false"），同时定义后台事件处理函数（OnTick="Timer1_Tick"）。
C#代码：
protected void Timer1_Tick(object sender, EventArgs e)
{
labServerTime.Text = DateTime.Now.ToString();
}
protected void btnStartTimer_Click(object sender, EventArgs e)
{
Timer1.Enabled = true;
}
protected void btnStopTimer_Click(object sender, EventArgs e)
{
Timer1.Enabled = false;
}
在每隔3秒的事件处理函数Timer1_Tick中，只是简单的将页面中Label控件的文本改变为当前服务器时间。
ExtAspNet中Timer的实现
[ToolboxData("<{0}:Timer Interval=\"30\" runat=\"server\"></{0}:Timer>")]
[ToolboxBitmap(typeof(Timer), "res.toolbox_icons.Timer.bmp")]
[Description("定时器")]
[DefaultEvent("Tick")]
public class Timer : ControlBase, IPostBackEventHandler
{
#region properties
/// <summary>
/// 是否可用
/// </summary>
[Category(CategoryName.OPTIONS)]
[DefaultValue(true)]
[Description("是否可用")]
public virtual bool Enabled
{
get
{
object obj = ViewState["Enabled"];
return obj == null ? true : (bool)obj;
}
set
{
ViewState["Enabled"] = value;
}
}
/// <summary>
/// 定时间隔（单位：秒）
/// </summary>
[Category(CategoryName.OPTIONS)]
[DefaultValue(30)]
[Description("定时间隔（单位：秒）")]
public int Interval
{
get
{
object obj = ViewState["Interval"];
return obj == null ? 30 : (int)obj;
}
set
{
ViewState["Interval"] = value;
}
}
#endregion
#region OnPreLoad
protected override void OnPreLoad(object sender, EventArgs e)
{
base.OnPreLoad(sender, e);
SaveAjaxProperty("Enabled", Enabled);
}
#endregion
#region OnPreRender
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
// 不渲染
RenderWrapperDiv = false;
string setupScript = String.Format("box.{0}=window.setInterval(function(){{{1}}}, {2});", ClientJavascriptID, GetPostBackEventReference(), Interval * 1000);
if (Enabled)
{
AddPageFirstLoadAbsoluteScript(setupScript);
}
if (AjaxPropertyChanged("Enabled", Enabled))
{
string ajaxScript = String.Format("window.clearInterval(box.{0});", ClientJavascriptID);
if (Enabled)
{
ajaxScript += setupScript;
}
AddAjaxPropertyChangedScript(ajaxScript);
}
}
#endregion
#region IPostBackEventHandler
public void RaisePostBackEvent(string eventArgument)
{
OnTick(EventArgs.Empty);
}
#endregion
#region OnTick
private static readonly object _handlerKey = new object();
/// <summary>
/// 定时事件
/// </summary>
[Category(CategoryName.ACTION)]
[Description("定时事件")]
public event EventHandler Tick
{
add
{
Events.AddHandler(_handlerKey, value);
}
remove
{
Events.RemoveHandler(_handlerKey, value);
}
}
protected virtual void OnTick(EventArgs e)
{
EventHandler handler = Events[_handlerKey] as EventHandler;
if (handler != null)
{
handler(this, e);
}
}
#endregion
}
从上往下看，首先是声明两个属性Enabled和Interval，中间OnPreRender是用来向页面中输出JavaScript代码，后面是OnTick事件的定义。
下面主要讲解OnPreRender中的代码：
1. 不考虑AJAX的支持的支持
如果不考虑ExtAspNet中所谓的原声的AJAX支持，我们可以简单的把OnPreRender重写为：
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
// 不渲染
RenderWrapperDiv = false;
string setupScript = String.Format("box.{0}=window.setInterval(function(){{{1}}}, {2});", ClientJavascriptID, GetPostBackEventReference(), Interval * 1000);
if (Enabled)
{
AddPageFirstLoadAbsoluteScript(setupScript);
}
}
其中RenderWrapperDiv = false，用来说明此控件不需要向页面中输出任何HTML代码。
如果将上例中Enabled属性改为true，则会在页面中生成如下代码：
box.__0=window.setInterval(function(){__doPostBack('Timer1','');}, 3000);
如图：
2. 添加AJAX的支持
如果需要AJAX支持，那么我就需知道在此次的PostBack中，控件的那些属性发生了变化，ExtAspNet提供一套机制来完成这一任务，那就是你所看到的SaveAjaxProperty和AjaxPropertyChanged，我们有 一篇文章专门说明这一问题。
我们来看下在上例中，点击“Start Timer”和“Stop Timer”分别发生了什么：
Start Timer：
Stop Timer：
对比Timer的源代码，是不是很清晰，其实ExtAspNet的控件编写并不是很复杂，如果你有好的想法不妨自己先尝试一下。
下载全部源代码