来源:https://wwwdev.cn/article/20101223/ajaxpro-no-refresh-update-gridview.aspx
ajaxpro无刷新更新gridview数据
ajaxpro使用的是prototype框架,所以和微软的ajax框架有一定的区别,不能在服务端直接绑定GridView控件,而是需要返回DatatTable或者DataSet对象,然后根据在客户端生成对应的DataTable或者DataSet的Json对象,重新绘制GridView在浏览器生成的table对象。
源代码如下
ajaxpro-no-refresh-update-gridview.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxpro-no-refresh-update-gridview.aspx.cs" Inherits="ajaxpro_no_refresh_update_gridview" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>ajaxpro无刷新更新gridview数据</title> </head> <body> <mce:script type="text/javascript"><!-- function reload() { ajaxpro_no_refresh_update_gridview.GridViewSource(callback); } function callback(r) { var rows = r.value.Rows, tb = document.getElementById('gv1'),tr,td; while (tb.rows.length > 1) tb.deleteRow(1); //删除除了页头的行 for (var i = 0; i < rows.length; i++) { tr = tb.insertRow(tb.rows.length); td = tr.insertCell(0); td.innerHTML = rows[i].Id; td = tr.insertCell(1); td.innerHTML = rows[i].rndNum; } } // --></mce:script> <table id="tb1"></table> <form id="form1" runat="server"><input type="button" value="马上更新" οnclick="reload()"/> <asp:GridView runat="server" ID="gv1"></asp:GridView> </form><!--一定不能缺少runat为server的表单,要不然ajaxpro不会自动生成对应的脚本和导入相关的框架代码--> </body> </html>
ajaxpro-no-refresh-update-gridview.aspx.cs