转自：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. Ext.Net学习笔记04：Ext.Net布局

    ExtJS中的布局功能很强大,常用的布局有border.accordion.fit.hbox.vbox等,Ext.Net除了将这些布局进行封装以外,更是对border进行了一些非常实用的改进,让我们来 ...

  2. xpath选择器

    一.xpath中节点关系 父(Parent):每个元素以及属性都有一个父 子(Children):元素节点可有零个.一个或多个子 同胞(Sibling):拥有相同的父的节点 先辈(Ancestor): ...

  3. [python] 字符串与列表、字典的转换

    1.字符串->字典:eval(str) 2.字符串->列表:list(str)

  4. Masonry约束崩溃

    报错: Trapped uncaught exception 'NSInvalidArgumentException', reason: '*** +[NSLayoutConstraint const ...

  5. asp.net:录入数据库的中文变问号

    表格是可以接受中文的: 类型也是nvarchar的: 还是出现写中文变问号?? 这时候请加入转义大写N: 如: 原查询语句:insert into table1(name)  values('蜘蛛侠' ...

  6. 如何在Angular2中使用jquery

    首先在index.html中引入jquery文件 <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"> ...

  7. Android学习5—布局简介

    Android界面的布局主要有四种,分别为RelativeLayout.LinearLayout.TableLayout.FrameLayout,接下来分别介绍这些布局如何使用(为了简单起见,接下来的 ...

  8. php内存申请和销毁

    内存申请 ZendMM使用自身heap层申请内存追踪结果: ZEND_ASSIGN_SPEC_CV_CONST_HANDLER (......) -> ALLOC_ZVAL(......) -& ...

  9. How to get Directory size in IsolatedStorage of Windows Phone 8 App

    There is no API to get the total size of a specific directory in the isolated storage. Therefore, th ...

  10. 如何利用C生成.so供Mono调用

    Mono诞生的初衷是为了吸引更多的Windows .Net程序员来加入Linux平台的开发.但在Linux世界中C语言依然是 主流.很多时候一些关键应用(比如大型 笛卡儿 乘积运算.需要调用平台硬件功 ...