您现在的位置: 365建站网 > 365文章 > ExtAspNet应用技巧(二十) - 如何创建ext:Timer控件

ExtAspNet应用技巧(二十) - 如何创建ext:Timer控件

文章来源:365jz.com     点击数:586    更新时间:2009-09-19 10:32   参与评论

引子

在刚刚发布的ExtAspNet v2.1.1版本中,应网友要求添加了ext:Timer控件,实现的效果就是定时回发(AJAX)到服务器执行一段C#代码。
因为这个控件非常简单,没有页面可视元素,所以我就单独拿出来讲解一下,或许对大家阅读ExtAspNet源代码有一定的帮助。


使用Timer控件

先来看下使用Timer的例子(在线版本):



ASPX标签声明:

</>code

  1. <ext:PageManager ID="PageManager1" runat="server" />
  2. <ext:Timer ID="Timer1" Interval="3" Enabled="false" OnTick="Timer1_Tick" runat="server">
  3. </ext:Timer>
  4. <ext:Button ID="btnStartTimer" runat="server" Text="Start Timer" OnClick="btnStartTimer_Click">
  5. </ext:Button>
  6. <ext:Button ID="btnStopTimer" runat="server" Text="Stop Timer" OnClick="btnStopTimer_Click">
  7. </ext:Button>
  8. <br />
  9. <ext:Label ID="labServerTime" runat="server" Text="This is current datetime.">
  10. </ext:Label>


这里定义Timer1每隔3秒回发服务器一次(Interval="3"),默认不启用(Enabled="false"),同时定义后台事件处理函数(OnTick="Timer1_Tick")。


C#代码:

</>code

  1. protected void Timer1_Tick(object sender, EventArgs e)
  2. {
  3. labServerTime.Text = DateTime.Now.ToString();
  4. }
  5. protected void btnStartTimer_Click(object sender, EventArgs e)
  6. {
  7. Timer1.Enabled = true;
  8. }
  9. protected void btnStopTimer_Click(object sender, EventArgs e)
  10. {
  11. Timer1.Enabled = false;
  12. }


在每隔3秒的事件处理函数Timer1_Tick中,只是简单的将页面中Label控件的文本改变为当前服务器时间。


ExtAspNet中Timer的实现

</>code

  1. [ToolboxData("<{0}:Timer Interval=\"30\" runat=\"server\"></{0}:Timer>")]
  2. [ToolboxBitmap(typeof(Timer), "res.toolbox_icons.Timer.bmp")]
  3. [Description("定时器")]
  4. [DefaultEvent("Tick")]
  5. public class Timer : ControlBase, IPostBackEventHandler
  6. {
  7. #region properties
  8. /// <summary>
  9. /// 是否可用
  10. /// </summary>
  11. [Category(CategoryName.OPTIONS)]
  12. [DefaultValue(true)]
  13. [Description("是否可用")]
  14. public virtual bool Enabled
  15. {
  16. get
  17. {
  18. object obj = ViewState["Enabled"];
  19. return obj == null ? true : (bool)obj;
  20. }
  21. set
  22. {
  23. ViewState["Enabled"] = value;
  24. }
  25. }
  26. /// <summary>
  27. /// 定时间隔(单位:秒)
  28. /// </summary>
  29. [Category(CategoryName.OPTIONS)]
  30. [DefaultValue(30)]
  31. [Description("定时间隔(单位:秒)")]
  32. public int Interval
  33. {
  34. get
  35. {
  36. object obj = ViewState["Interval"];
  37. return obj == null ? 30 : (int)obj;
  38. }
  39. set
  40. {
  41. ViewState["Interval"] = value;
  42. }
  43. }
  44. #endregion
  45. #region OnPreLoad
  46. protected override void OnPreLoad(object sender, EventArgs e)
  47. {
  48. base.OnPreLoad(sender, e);
  49. SaveAjaxProperty("Enabled", Enabled);
  50. }
  51. #endregion
  52. #region OnPreRender
  53. protected override void OnPreRender(EventArgs e)
  54. {
  55. base.OnPreRender(e);
  56. // 不渲染
  57. RenderWrapperDiv = false;
  58. string setupScript = String.Format("box.{0}=window.setInterval(function(){{{1}}}, {2});", ClientJavascriptID, GetPostBackEventReference(), Interval * 1000);
  59. if (Enabled)
  60. {
  61. AddPageFirstLoadAbsoluteScript(setupScript);
  62. }
  63. if (AjaxPropertyChanged("Enabled", Enabled))
  64. {
  65. string ajaxScript = String.Format("window.clearInterval(box.{0});", ClientJavascriptID);
  66. if (Enabled)
  67. {
  68. ajaxScript += setupScript;
  69. }
  70. AddAjaxPropertyChangedScript(ajaxScript);
  71. }
  72. }
  73. #endregion
  74. #region IPostBackEventHandler
  75. public void RaisePostBackEvent(string eventArgument)
  76. {
  77. OnTick(EventArgs.Empty);
  78. }
  79. #endregion
  80. #region OnTick
  81. private static readonly object _handlerKey = new object();
  82. /// <summary>
  83. /// 定时事件
  84. /// </summary>
  85. [Category(CategoryName.ACTION)]
  86. [Description("定时事件")]
  87. public event EventHandler Tick
  88. {
  89. add
  90. {
  91. Events.AddHandler(_handlerKey, value);
  92. }
  93. remove
  94. {
  95. Events.RemoveHandler(_handlerKey, value);
  96. }
  97. }
  98. protected virtual void OnTick(EventArgs e)
  99. {
  100. EventHandler handler = Events[_handlerKey] as EventHandler;
  101. if (handler != null)
  102. {
  103. handler(this, e);
  104. }
  105. }
  106. #endregion
  107. }


从上往下看,首先是声明两个属性Enabled和Interval,中间OnPreRender是用来向页面中输出JavaScript代码,后面是OnTick事件的定义。

下面主要讲解OnPreRender中的代码:

1. 不考虑AJAX的支持的支持

如果不考虑ExtAspNet中所谓的原声的AJAX支持,我们可以简单的把OnPreRender重写为:

</>code

  1. protected override void OnPreRender(EventArgs e)
  2. {
  3. base.OnPreRender(e);
  4. // 不渲染
  5. RenderWrapperDiv = false;
  6. string setupScript = String.Format("box.{0}=window.setInterval(function(){{{1}}}, {2});", ClientJavascriptID, GetPostBackEventReference(), Interval * 1000);
  7. if (Enabled)
  8. {
  9. AddPageFirstLoadAbsoluteScript(setupScript);
  10. }
  11. }

其中RenderWrapperDiv = false,用来说明此控件不需要向页面中输出任何HTML代码。
如果将上例中Enabled属性改为true,则会在页面中生成如下代码:

</>code

  1. 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的控件编写并不是很复杂,如果你有好的想法不妨自己先尝试一下。



下载全部源代码





如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (586人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号