转自：http://blog.csdn.net/jianxin1009/article/details/8565828‘

做Winform习惯了，大家都习惯设置datasource这样的写法。

如果想实现页面定时刷新的话，用.net给封装好的updatepanel和timer两个控件实现起来其实挺容易的。这样做加入了很多你不能控制的元素，举个例子说就是：用updatepanel后，你设置的样式很有可能就变了，然后你还需要去调这些。所以还是用一些自己控制性高的代码比较合适。

今天就先从这个updatepanel加timer实现页面自动刷新这个例子来下手吧。

首先来看一下我的一般处理程序，在这个里面，我自己实现的是从数据库中查出datatable，然后转换成json传输给客户端

  1. /// <summary>
  2. /// getData 的摘要说明
  3. /// </summary>
  4. public class getData : IHttpHandler
  5. {
  6. public void ProcessRequest(HttpContext context)
  7. {
  8. context.Response.ContentType = "text/plain";
  9. //context.Response.Write("Hello World");
  10. //设置查询字符串
  11. string strSql = "select ckrID,chrCarNumber,cncName,bcrName from T_CarNumberCategory,T_CheckResult,t_BusinessCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID";
  12. //设置连接字符串
  13. string strConn = "Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.24.173)(PORT=1521))(CONNECT_DATA=(SERVICE_NAME=ORCL)));User Id=admin;Password=123123";
  14. //定义并打开数据库连接
  15. OracleConnection conn = new OracleConnection(strConn);
  16. conn.Open();
  17. //定义命令行对象，
  18. OracleCommand cmd = new OracleCommand(strSql, conn);
  19. //定义一个适配器，用来填充Datatable            ;
  20. OracleDataAdapter adp = new OracleDataAdapter(cmd);
  21. //定义一个DataTable并用适配器对其进行填充
  22. DataTable dt = new DataTable();
  23. adp.Fill(dt);
  24. context.Response.Write(JsonConvert.SerializeObject(dt));
  25. //上面的是我从数据库中查询到的datatable，然后用一个Json操作类库将其转换为Json
  26. ////由于大家没有数据库环境，我把上面的字符串复制出来，供大家测试实验用
  27. ////由于复制出来是双引号，放这里会报个错误，所以我改成单引号了
  28. ////但是客户端在获取json的时候，是认双引号的，所以不得不再替换回来。。。心碎
  29. //var json = "[{'CKRID':'1359374764563','CHRCARNUMBER':'123123','CNCNAME':'大型汽车','BCRNAME':'核发检验合格标志'},{'CKRID':'1359371470153','CHRCARNUMBER':'asdfsadf','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359343210678','CHRCARNUMBER':'111222','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359354395618','CHRCARNUMBER':'123asd','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355217314','CHRCARNUMBER':'123asdqwe','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355356271','CHRCARNUMBER':'1111111','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355490374','CHRCARNUMBER':'123123123','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1358074597852','CHRCARNUMBER':'323232','CNCNAME':'使馆汽车','BCRNAME':'核发检验合格标志'}]";
  30. //context.Response.Write(json.Replace('\'','\"'));
  31. }
  32. public bool IsReusable
  33. {
  34. get
  35. {
  36. return false;
  37. }
  38. }
  39. }

上面的服务器端程序中的注释很详细，有不懂的可以留言说明。类库的用的是Newtonsoft.Json.dll。大家点击即可从我的网盘里下载——不要任何费用哦~亲

下面是客户端代码：

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3. <title>测试</title>
  4. <script src="jquery-1.7.1.js" type="text/javascript"></script>
  5. </head>
  6. <body>
  7. <form id="form1" runat="server">
  8. <table id="data">
  9. <tr id="tem">
  10. <td id="ID">
  11. 流水号
  12. </td>
  13. <td id="CarNumber">
  14. 车牌号
  15. </td>
  16. <td id="BusinessName">
  17. 业务类型
  18. </td>
  19. <td id="btn">
  20. <input id="Button2" type="button" value="button" />
  21. </td>
  22. </tr>
  23. </table>
  24. <div id="loading">
  25. 正在加载数据...
  26. </div>
  27. <script type="text/jscript">
  28. //模拟一个数据正在加载的样子
  29. setTimeout(function () { $("#loading").hide(); }, 1000);
  30. //设置定时器定时调用方法，单位是毫秒
  31. setInterval(SetData(), 1000);
  32. //从服务器端获取数据，并显示到界面上,用getJSON方法实现
  33. function SetData() {
  34. $.getJSON("getData.ashx", null, function (obj) {
  35. $("tr").eq(0).nextAll().remove();   //将除模板行的tr删除
  36. //将获取到的数据动态的加载到table中
  37. for (var i = 0; i < obj.length; i++) {
  38. //将第四条的ID设置为红色（此处可以用来根据内容修改样式
  39. if (i == 3) {
  40. row.find("#ID").css("color", "red");
  41. }
  42. //获取模板行，复制一行
  43. var row = $("#tem").clone();
  44. //将新一行的按钮添加click事件
  45. row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
  46. //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的
  47. //如果上面代码不行，你可以试一下
  48. //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
  49. //亲测上面的代码在1.4.2.min...中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架
  50. row.find("#ID").text(obj[i].CKRID); //流水号
  51. row.find("#CarNumber").text(obj[i].CHRCARNUMBER);   //汽车车牌号
  52. row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称
  53. //将新行添加到表格中
  54. row.appendTo("#data");
  55. }
  56. });
  57. }
  58. //获取传过来的参数并显示
  59. function operation(event) {
  60. alert(event.data.name);
  61. alert(event.data.back);
  62. }
  63. //从服务器端获取数据，并显示到界面上,用ajax方法实现
  64. function SetDataByAjax() {
  65. $.ajax({
  66. type: "get",    //设置调用类型
  67. dataType: "json",   //设置数据类型
  68. url: "getData.ashx",    //url
  69. complete: function () { $("#loading").hide() },
  70. success: function (obj) {
  71. $("tr").eq(0).nextAll().remove();   //将除模板行的tr删除
  72. //将获取到的数据动态的加载到table中
  73. for (var i = 0; i < obj.length; i++) {
  74. //将第四条的ID设置为红色（此处可以用来根据内容修改样式
  75. if (i == 3) {
  76. row.find("#ID").css("color", "red");
  77. }
  78. //获取模板行，复制一行
  79. var row = $("#tem").clone();
  80. //将新一行的按钮添加click事件
  81. row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
  82. //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的
  83. //如果上面代码不行，你可以试一下
  84. //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
  85. //亲测上面的代码在1.4.2中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架
  86. row.find("#ID").text(obj[i].CKRID); //流水号
  87. row.find("#CarNumber").text(obj[i].CHRCARNUMBER);   //汽车车牌号
  88. row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称
  89. //将新行添加到表格中
  90. row.appendTo("#data");
  91. }
  92. }
  93. });
  94. }
  95. </script>
  96. </form>
  97. </body>
  98. </html>

上面的就是自己动手写了一个自动刷新页面的例子，上面例子中，除了用了JQuery这个里面的东西你不能控制，如果足够牛，你都不想用他这个框架，想自己写一个，那么也是可以的。只是对于我这个初学者来说，用这个还是能省好多事的。

一个getJson方法，只需要给3个参数，他就把创建对象、回调函数、设置参数等全部操作就都给你做了。这个还是值得学习的，在平时的学习中，对于常用到的东西，应该考虑将其提炼成一个方法，放到自己的小小代码库中。

虽然上面的代码不是很难，可是个人感觉这是我对于ajax理解的一个里程碑例子，一个例子，解开了我好多曾经的疑雾。

Json数据异步绑定到界面的Table并且自动刷新的更多相关文章

  1. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  2. .NET读取json数据并绑定到对象

    需要引用的命名空间: 读取的具体应用: this代表本实体(对象),通过PopulateObject,直接将读取到的json数据与对象进行绑定 Json保存的具体应用: 将对象保存为Json JObj ...

  3. pqgrid对json数据的绑定

    $(function () { var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'], [2, 'Wal-Mart Stores', '315 ...

  4. 服务器端接受Json数据的绑定实现

    1.在方法参数前加上JsonRead<T>的泛型特性 public ActionResult GetData([JsonRead(typeof(PostData))]PostData po ...

  5. C# Winform DataGrid 绑定List<> Or ObservableCollection<> 类型无法自动刷新问题

    当DataGrid通过绑定List<> Or ObservableCollection<> 类型数据,通过INofityPropertyChanged接口通知数据改变进行刷新无 ...

  6. 【项目积累】对JSON数据的处理

    [项目简述]         接触.NET项目非常长一段时间了,前台用的都是MVC框架.不知道大家是否想过一个问题.我们是怎样将数据显示到前台的,换句话说,MVC能够识别怎么样的数据形式?答案非常ea ...

  7. 实现客户端与服务端之间传输json数据

    步骤:创建数据库,并创建表.利用myeclipse创建新工程,利用JDBC实现java操纵数据库.实现客户端类,服务端类.具体实现:创建数据表create table usertable( usern ...

  8. JSON数据解析（转）

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种理想的数据交换格式. 本文将主要介绍在Android ...

  9. Android学习笔记之JSON数据解析

    转载:Android学习笔记44:JSON数据解析 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种 ...

随机推荐

  1. Cogs 1298.通讯问题

    1298.通讯问题 ★ 输入文件:jdltt.in 输出文件:jdltt.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] 一个篮球队有n个篮球队员,每个队员都有联系方式(如电 ...

  2. devenv 命令用法

    devenv是VisualStudio的可执行程序,一般安装在“C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE”下. 这 ...

  3. What are TCHAR, WCHAR, LPSTR, LPWSTR, LPCTSTR (etc.)?

    转自: http://www.codeproject.com/Articles/76252/What-are-TCHAR-WCHAR-LPSTR-LPWSTR-LPCTSTR-etc 解释的超详细!! ...

  4. STUN/TURN/ICE协议在P2P SIP中的应用（一）

    1           说明 本文详细描述了基于STUN系列协议实现的P2P SIP电话过程,其中涉及到了SIP信令的交互,P2P的原理,以及STUN.TURN.ICE的协议交互 本文所提到的各个服务 ...

  5. 理解Http协议（一）

    本文对Http协议进行了简要的描述,说明了其用途的广泛性:通过代码对Http连接和Http请求消息的发送进行实现,希望能将这些抽象的过程直观的显示出来:最后对HttpURL和Http协议中“资源”这些 ...

  6. centOS tengine 安装后 不能访问的问题

    1 安装方式跟在ubuntu下 安装一样.因为都是用源码 2  但安装好以后发现,局域网电脑访问不了!.原以为是安装错了.又装了一遍,还是不行,最终是iptables 没开放80端口... http: ...

  7. Linux 下如何使用看门狗

      Linux内核有集成WD的选项.将其使能后,系统里就会有watchdog的设备驱动:/dev/watchdog.这样,在应用程序里只需打开这个设备使用即可:#include <fcntl.h ...

  8. Hibernate持久化对象

    持久化类应遵循的规则: 有无参构造器,构造器的修饰符>=默认访问控制符 有标识属性,映射数据库表的主键,建议使用基本类型的包装类 每个成员有setter和getter 非final修饰的类 重写 ...

  9. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  10. php练习5——简单的学生管理系统（隐藏控件的使用）

    要求:    程序:gradeManage.html和gradeManage.php          结果       注意:   1.使用隐藏控件时,得在不同表单下,不能在同一个表单下:   2. ...