转自：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. use mkisofs 重新打包beini,tinycore linux

    mkisofs -r -J -V Beini-Custom -v --boot-info-table --boot-load-size 4 -b boot/isolinux/isolinux.bin ...

  2. Net中exe之间的消息传递

    1.创建一个消息通讯类 using System;using System.Collections.Generic;using System.Linq;using System.Text;using ...

  3. java图片高质量缩放类

    import java.awt.Color;import java.awt.Graphics;import java.awt.Image;import java.awt.image.BufferedI ...

  4. ZOJ 2702 Unrhymable Rhymes（DP）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1702 题目大意:给定有很多数字组成的诗,譬如 “AABB”, “AB ...

  5. OI路上-NOIP100天冲刺计划

    学OI已经9个月了,可是自己水平还是那样的弱QWQ. 现在离NOIP还有差不多100天的时间. 晚上辗转反侧发现了自己的一些问题: (1)DP还经常没思路. (2)搜索恶心题还不想写. (3)有时候也 ...

  6. ubuntu ssh安装

    参考 http://www.linuxidc.com/Linux/2010-02/24349.htm  文章很不错!! ssh   登录名@ip地址 , 如果提示验证key can't be esta ...

  7. 网站开发常用jQuery插件总结(14)图片修剪插件Jcrop

    一.插件功能 用于对图片进行修剪.但是在使用Jcrop时,还需要配合服务器端开发语言(如asp.net,php等)使用. 二.官方地址 http://deepliquid.com/content/Jc ...

  8. javascript下动态this与动态绑定实例代码

    this 的值取决于 function 被调用的方式,一共有四种, 如果一个 function 是一个对象的属性,该 funtion 被调用的时候,this 的值是这个对象. 如果 function ...

  9. Java源代码分析与生成

    源代码分析:可使用ANTLRANTLR是开源的语法分析器,可以用来构造自己的语言,或者对现有的语言进行语法分析. JavaParser 对Java代码进行分析 CodeModel 用于生成Java代码 ...

  10. mysqli和mysql和pdo查询

      mysql mysql_connect($db_host, $db_user, $db_password); mysql_select_db($dn_name); $result = mysql_ ...