ASPX代码
1 <% @ Page Language = " C# " %> 2 3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 4 5 < script runat ="server" > 6 System.Data.DataView CreateDataSourceByXianhuiMeng() 7 { 8 System.Data.DataTable dt = new System.Data.DataTable(); 9 System.Data.DataRow dr; 10 dt.Columns.Add( new System.Data.DataColumn( " id " , typeof (System.Int32))); 11 dt.Columns.Add( new System.Data.DataColumn( " 学生姓名 " , typeof (System.String))); 12 dt.Columns.Add( new System.Data.DataColumn( " 语文 " , typeof (System.Decimal))); 13 dt.Columns.Add( new System.Data.DataColumn( " 数学 " , typeof (System.Decimal))); 14 dt.Columns.Add( new System.Data.DataColumn( " 英语 " , typeof (System.Decimal))); 15 dt.Columns.Add( new System.Data.DataColumn( " 计算机 " , typeof (System.Decimal))); 16 17 for ( int i = 1 ; i < 30 ; i ++ ) 18 { 19 System.Random rd = new System.Random(Environment.TickCount * i); ; 20 dr = dt.NewRow(); 21 dr[ 0 ] = i; 22 dr[ 1 ] = " 【孟子E章】 " + i.ToString(); 23 dr[ 2 ] = System.Math.Round(rd.NextDouble() * 100 , 2 ); 24 dr[ 3 ] = System.Math.Round(rd.NextDouble() * 100 , 2 ); 25 dr[ 4 ] = System.Math.Round(rd.NextDouble() * 100 , 2 ); 26 dr[ 5 ] = System.Math.Round(rd.NextDouble() * 100 , 2 ); 27 dt.Rows.Add(dr); 28 } 29 System.Data.DataView dv = new System.Data.DataView(dt); 30 return dv; 31 } 32 33 protected void Page_Load(object sender, EventArgs e) 34 { 35 if (Request.QueryString[ " id " ] != null ) 36 { 37 Response.ClearContent(); 38 GridView1.DataSource = CreateDataSourceByXianhuiMeng(); 39 GridView1.DataBind(); 40 System.Text.StringBuilder sb = new System.Text.StringBuilder(); 41 System.IO.StringWriter sw = new System.IO.StringWriter(sb); 42 HtmlTextWriter htw = new HtmlTextWriter(sw); 43 Literal header = new Literal(); 44 header.Text = " <h2>项目 " + Request.QueryString[ " id " ] + " </h2> " ; 45 Header.Controls.Add(header); 46 Header.RenderControl(htw); 47 GridView1.RenderControl(htw); 48 Response.Write( " 这里查询数据，输出结果就可以了。结果： " + sb.ToString()); 49 Response.End(); 50 } 51 } 52 53 // / 添加这个override void VerifyRenderingInServerForm(Control control)，是为了避免出现 54 // / 类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内。 55 // / 的异常 56 public override void VerifyRenderingInServerForm(Control control) 57 { } 58 </ script > 59 60 < html xmlns ="http://www.w3.org/1999/xhtml" > 61 < head id ="Head1" runat ="server" > 62 < title > 使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现 </ title > 63 64 < script type ="text/javascript" > 65 function GetData(p) { 66 document.getElementById( " d " ).innerHTML = " 正在读取数据…… " ; 67 h = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject( " MSXML2.XMLHTTP " ); 68 h.open( " GET " , ' <%=Request.FilePath %>?id= ' + p.value, true ); 69 h.onreadystatechange = function () { 70 if (h.readyState == 4 ) { 71 if (h.status >= 200 && h.status < 300 ) { 72 document.getElementById( " d " ).innerHTML = h.responseText; 73 } 74 else { 75 document.getElementById( " d " ).innerHTML = " <h2>数据操作错误：</h2> " + h.responseText; 76 } 77 } 78 } 79 h.send( null ); 80 } 81 alert( " 这个提示，只出现在第一次打开页面。 " ); 82 </ script > 83 84 </ head > 85 < body > 86 < form id ="form1" runat ="server" > 87 < asp:GridView ID ="GridView1" runat ="server" ></ asp:GridView > 88 < asp:Panel ID ="Header" runat ="server" ></ asp:Panel > 89 < select onchange ="GetData(this)" > 90 < option value ="1" > 项目一 </ option > 91 < option value ="2" > 项目二 </ option > 92 </ select > 93 </ form > 94 < div id ="d" ></ div > 95 </ body > 96 </ html >
点击按钮，刷新 GridView 中的数据，而不是这个页面刷新。使用简单的 XMLHttpRequest 就可以直接实现。具体代码如上方所示