引子

在剛剛發(fā)布的ExtAspNet v2.1.1版本中，應網(wǎng)友要求添加了ext:Timer控件，實現(xiàn)的效果就是定時回發(fā)（AJAX）到服務器執(zhí)行一段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秒回發(fā)服務器一次（Interval="3"），默認不啟用（Enabled="false"），同時定義后臺事件處理函數(shù)（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秒的事件處理函數(shù)Timer1_Tick中，只是簡單的將頁面中Label控件的文本改變?yōu)楫斍胺掌鲿r間。


ExtAspNet中Timer的實現(xiàn)

    [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中，控件的那些屬性發(fā)生了變化，ExtAspNet提供一套機制來完成這一任務，那就是你所看到的SaveAjaxProperty和AjaxPropertyChanged，我們有一篇文章專門說明這一問題。

我們來看下在上例中，點擊“Start Timer”和“Stop Timer”分別發(fā)生了什么：
Start Timer：




Stop Timer：



對比Timer的源代碼，是不是很清晰，其實ExtAspNet的控件編寫并不是很復雜，如果你有好的想法不妨自己先嘗試一下。



下載全部源代碼

• asp