使用Ajax局部刷新GridView进行数据绑定的简单实现
很多用户都有这样需求，比如：点击按钮，刷新 GridView 中的数据，而不是这个页面刷新。其实,使用javascript实现简单的Ajax就可以直接实现。具体代码如下：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="_efault2.aspx.cs" Inherits="_efault2" %><! 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>
页:
[1]