转自：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. 我的微软.net演进路线图

    原文地址:我的微软.net演进路线图 我的微软.net演进路线图 我的这几年,编程方面主要是跟在微软旗下奔跑的,主要语言是C# 集成开发环境(IDE) .NET Framework版本 介入年份 Vi ...

  2. 直播类送礼动画<豪华礼物+小礼物>

    直播类送礼动画<豪华礼物+小礼物>:代码会持续更新,现直播的app里内有太多的动画,由于时间关系不能一次共享所有动画聘为,这次先共享几个比较火爆的动画. 支持真机和模拟器上运行,最低支持i ...

  3. objective-c ios webkit 本地存储local-storage

    我有一个Cocoa / Objective-C的应用程序,它嵌入了一个WebKit的web视图.我需要打开的数据库支持和本地存储.我知道这是可以做到-我有它在Safari中工作-但我无法找到如何设置这 ...

  4. 数据挖掘-关联规则分析[ZZ]

    1.什么是关联规则 "尿布与啤酒"的故事大家都有听过,这里就不罗嗦了. 按常规思维,尿布与啤酒风马牛不相及,若不是借助数据挖掘技术对大量交易数据进行挖掘分析,沃尔玛是不可能发现数据 ...

  5. UVA 10881 Piotr's Ants（等效变换 sort结构体排序）

    Piotr's AntsTime Limit: 2 seconds Piotr likes playing with ants. He has n of them on a horizontal po ...

  6. (转)Object-C 中各数据类型转换 NSData转NSString，Byte，UIImage

    ,NSData 与 NSString NSData --> NSString NSString *aString = [[NSString alloc] initWithData:adata e ...

  7. 青瓷qici - H5小游戏 抽奖机 0 创建工程

    安装运行平台需要nodejs,具体方法请参照官方说明文档. 运行后打开了一个空空的窗口. 首先我们进行工程设置,菜单>工程>设置 菜单里面设置我们游戏的名称,到时候会显示在游戏的title ...

  8. Couldn't get lock for %t/vertx.log

    今天在启动vertx框架的项目时,报“Couldn't get lock for %t/vertx.log”的错误. 解决方案: 1,找出vertx.log的目录.一般在(C:\Users\Admin ...

  9. PHP源码阅读笔记一（explode和implode函数分析）

    PHP源码阅读笔记一一.explode和implode函数array explode ( string separator, string string [, int limit] )此函数返回由字符 ...

  10. Laravel 安装记录

    系统环境:ubuntu-14.10-server-i386(32) LAMP 系统默认安装 根据:http://laravel.com/docs/5.1  官方文档,准备通过 Composer 安装 ...