使用ajax局部刷新gridview进行数据绑定示例
2014-02-07 00:00
369 查看
具体代码如下:
<% @ Page Language = " C# " %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < script runat ="server" > System.Data.DataView CreateDataSourceByXianhuiMeng() { System.Data.DataTable dt = new System.Data.DataTable(); System.Data.DataRow dr; dt.Columns.Add( new System.Data.DataColumn( " id " , typeof (System.Int32))); dt.Columns.Add( new System.Data.DataColumn( " 学生姓名 " , typeof (System.String))); dt.Columns.Add( new System.Data.DataColumn( " 语文 " , typeof (System.Decimal))); dt.Columns.Add( new System.Data.DataColumn( " 数学 " , typeof (System.Decimal))); dt.Columns.Add( new System.Data.DataColumn( " 英语 " , typeof (System.Decimal))); dt.Columns.Add( new System.Data.DataColumn( " 计算机 " , typeof (System.Decimal))); for ( int i = 1 ; i < 30 ; i ++ ) { System.Random rd = new System.Random(Environment.TickCount * i); ; dr = dt.NewRow(); dr[ 0 ] = i; dr[ 1 ] = " 【孟子E章】 " + i.ToString(); dr[ 2 ] = System.Math.Round(rd.NextDouble() * 100 , 2 ); dr[ 3 ] = System.Math.Round(rd.NextDouble() * 100 , 2 ); dr[ 4 ] = System.Math.Round(rd.NextDouble() * 100 , 2 ); dr[ 5 ] = System.Math.Round(rd.NextDouble() * 100 , 2 ); dt.Rows.Add(dr); } System.Data.DataView dv = new System.Data.DataView(dt); return dv; } protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString[ " id " ] != null ) { Response.ClearContent(); GridView1.DataSource = CreateDataSourceByXianhuiMeng(); GridView1.DataBind(); System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.IO.StringWriter sw = new System.IO.StringWriter(sb); HtmlTextWriter htw = new HtmlTextWriter(sw); Literal header = new Literal(); header.Text = " <h2>项目 " + Request.QueryString[ " id " ] + " </h2> " ; Header.Controls.Add(header); Header.RenderControl(htw); GridView1.RenderControl(htw); Response.Write( " 这里查询数据,输出结果就可以了。结果: " + sb.ToString()); Response.End(); } } // / 添加这个override void VerifyRenderingInServerForm(Control control),是为了避免出现 // / 类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内。 // / 的异常 public override void VerifyRenderingInServerForm(Control control) { } </ script > < html xmlns ="http://www.w3.org/1999/xhtml" > < head id ="Head1" runat ="server" > < title > 使用 AJAX,局部刷新 GridView 进行数据绑定的简单实现 </ title > < script type ="text/javascript" > function GetData(p) { document.getElementById( " d " ).innerHTML = " 正在读取数据…… " ; h = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject( " MSXML2.XMLHTTP " ); h.open( " GET " , ' <%=Request.FilePath %>?id= ' + p.value, true ); h.onreadystatechange = function () { if (h.readyState == 4 ) { if (h.status >= 200 && h.status < 300 ) { document.getElementById( " d " ).innerHTML = h.responseText; } else { document.getElementById( " d " ).innerHTML = " <h2>数据操作错误:</h2> " + h.responseText; } } } h.send( null ); } alert( " 这个提示,只出现在第一次打开页面。 " ); </ script > </ head > < body > < form id ="form1" runat ="server" > < asp:GridView ID ="GridView1" runat ="server" ></ asp:GridView > < asp:Panel ID ="Header" runat ="server" ></ asp:Panel > < select onchange ="GetData(this)" > < option value ="1" > 项目一 </ option > < option value ="2" > 项目二 </ option > </ select > </ form > < div id ="d" ></ div > </ body > </ html >
相关文章推荐
- asp.net操作ini文件示例
- 二进制交叉权限微型php类分享
- php全角字符转换为半角函数
- ajax提交url与ajax提交表单的详细比较
- AJAX提交与FORM提交的区别说明
- 通过遮罩层实现浮层DIV登录的js代码
- jquery 淡入淡出效果的简单实现
- jquery select 设置默认选中的示例代码
- jquery操作select详解(取值,设置选中)
- JQUERY 设置SELECT选中项代码
- Ajax提交与传统表单提交的区别说明
- jquery ajax传递中文参数乱码问题及解决方法说明
- jquery.ajax的url中传递中文乱码问题的解决方法
- jquery Ajax 实现加载数据前动画效果的示例代码
- JQuery与Ajax调用新浪API获取短网址的代码
- jQuery获取当前对象标签名称的方法
- javascript运行机制之this详细介绍
- Select标签下拉列表二级联动级联实例代码
- 二叉树的非递归后序遍历算法实例详解
- MySQL字段自增自减的SQL语句示例介绍