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



下载全部源代码





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值