我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了。

EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子:

  • 定时调客户端事件

实现代码:

@Html.Q().Timer().Name("mxd").Interval(1000).ClickClientEvent("before")
<script>
var i = 0;
function before() {
i++;
layer.msg("客户端方法,结果为:" + i);
}
</script>

请注意:  

Interval 是用来设置定时器的时间间隔的。
ClickClientEvent 需要传入你希望调用的客户端方法名。

效果截图如下:

  • 定时调服务端事件

实现代码:

@Html.Q().Timer().Name("mxd").Interval(1000).ClickServerEvent("/Home/GetTime", null, "back")
<script>
i = 0;
function back(data) {
i++;
layer.msg("服务器返回的第" + i + "条消息:<br>" + data);
}
</script>

请注意:

ClickServerEvent 第一个参数为服务器的Action地址,第二个参数为JSON数据,第三个参数为回调的客户端方法,回调方法会自动携带服务器返回的数据data。

效果截图如下:

技巧:如果您同时触发了客户端方法与服务端方法,需要您在客户端方法里返回true,服务端方法才会被调用,意味着可以在触发服务端方法之前做一些客户端的校验等动作。
深入:本质上,定时器封装了js的setInterval方法。:)


总结:定时器的使用就简单介绍到这里,希望继续保持简单的心情。

更多使用示例请浏览在线示例:http://core.zwc.cn

EasyMvc入门教程-基本控件说明(2)定时器的更多相关文章

  1. EasyMvc入门教程-基本控件说明(8)提醒导航

    提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...

  2. EasyMvc入门教程-基本控件说明(11)菜单导航

    基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...

  3. EasyMvc入门教程-基本控件说明(13)选项卡导航

    选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...

  4. EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图

    本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...

  5. EasyMvc入门教程-基本控件说明(1)按钮

    按钮是我们最常用的控件之一了,先看下我们提供的按钮风格: 不同颜色的: 实现代码: @Html.Q().Button().Text("Danger").ColorDanger() ...

  6. EasyMvc入门教程-基本控件说明(4)折叠面板

    折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...

  7. EasyMvc入门教程-基本控件说明(6)进度条

    进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...

  8. EasyMvc入门教程-基本控件说明(12)栏目导航

    栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...

  9. EasyMvc入门教程-基本控件说明(3)时间线

    我们有时候经常看到如下的页面: 或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子: @{ var data=new List<TimeLineItem>() { ...

随机推荐

  1. linux配置Hadoop伪分布安装模式

    1)关闭禁用防火墙: /etc/init.d/iptables status 会得到一系列信息,说明防火墙开着. /etc/rc.d/init.d/iptables stop 关闭防火墙 2)禁用SE ...

  2. LINUX系统安装MYSQL命令

    1.下载安装包 wget http://cdn.mysql.com/archives/mysql-5.6/mysql-5.6.26-linux-glibc2.5-x86_64.tar.gz    2. ...

  3. Python 字典值相加

    #字典值相加 def union_dic(*objs): _keys = set(sum([obj.keys() for obj in objs],[])) _total = {} for _key ...

  4. event对象的兼容性

    最近在调试项目的时候,发现IE和Chrome都显示正常,就是FireFox异常,F12查看控制台,发现报错:window.event is undefined.检查代码中定义的事件方法中获取事件对象直 ...

  5. ECNU 3263 丽娃河的狼人传说(差分约束)

    丽娃河的狼人传说 Time limit per test: 1.0 seconds Memory limit: 256 megabytes 丽娃河是华师大著名的风景线.但由于学校财政紧缺,丽娃河边的路 ...

  6. HDFS设计思想

    HDFS设计思想 DataNode:用来在磁盘上存储数据 HDFS  数据存储单元( block ) 1 文件被切分成固定大小的数据block块 •默认数据块大小为 64MB(hadoop1.x版本6 ...

  7. Mongodb学习(1)--- mongoose: Schema, Model, Entity

    Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由 Schema 发布生成的模型,具有抽象属性和行为的数据库操作 Entity : 由 Model 创建的 ...

  8. vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法

    vue-router有提供一个方法scrollBehavior,它可以使切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. 这个功能只在 HTML5 history 模 ...

  9. javascript提示框,随着鼠标移动

    原文发布时间为:2009-04-23 -- 来源于本人的百度文章 [由搬家工具导入] <html><script type="text/javascript"&g ...

  10. The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing an assembly reference?)

    The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing ...