Atlas 学习之005:在按钮上实现无刷新适时动态显示当前时间

  前段时间访问过台湾微软的网站,它的首页做了个大大的按钮,绿油油的(偶发现台湾的开发人员喜欢把网站的许多重要的控件的颜色做成绿色,哈哈,其中原因大家可能都知道!不相信现在就访问“ MSDN 台湾 ”,一进去就遇见一大片“绿色”,哈哈,开个玩笑),上面动态显示当前的时间,觉得很酷,当时也想做一个类似的东东,没有做成,今天我也来做一个,并且做一个红色的,哈哈!

 效果图如下:

下面是新项步骤:

1、往“设计”页面拖拽一个“ UpdatePanel ”,再往这个“ UpdatePanel ”里拖拽一个“ Button ”最后在拖拽一个“ TimerControl ”。

 

2、选定“ TimerControl ”,按F4 调出“属性”窗口,把它的“ Interval ”属性改为“1000”。

 

3、选定“ UpdatePanel ”,按F4 调出“属性”窗口,修改其“ Triggers ”属性,点击“New Trigger ”按钮,选择“当一个控件属性变化时触发”,接着点击“控件”选择“ TimerControl1 ”,点击“属性”选择 “ Interval ”,确定再确定。

 

4、双击“设计”页面,在“ Page_Load() ”方法下加入下面的代码:

 Button1.Text = "北京时间:"+DateTime.Now.ToString();

 

5、在“ ScriptManager ”控件的“ Enable Partial Rendering ”前面打上勾。

 

6、保存所有文件,按 F5 运行一把,效果应该出来了,黄色的数字每秒钟就变化一次,显示当前时间,这是在没有刷新的情况下实现的,你就是点击了那个按钮,页面也不会有刷新的感觉。

 

最后附上完整代码:

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
    
< title > Untitled Page </ title >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
        
< atlas:ScriptManager  ID ="ScriptManager1"  EnablePartialRendering ="true"  runat ="server"   />
        
< div >
            
< atlas:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
                
< ContentTemplate >
                    
< asp:Button  ID ="Button1"  runat ="server"  BackColor ="Red"  Font-Bold ="True"   ForeColor ="Yellow"  Height ="46px"  Text ="Button"  Width ="244px"  Font-Size ="Medium"   />
                
</ ContentTemplate >
                
< Triggers >
                    
< atlas:ControlValueTrigger  ControlID ="TimerControl1"  PropertyName ="Interval"   />
                
</ Triggers >
            
</ atlas:UpdatePanel >
            
< atlas:TimerControl  ID ="TimerControl1"  runat ="server"  Interval ="1000" >
            
</ atlas:TimerControl >
            
</ div >
    
</ form >
</ body >
</ html >
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值