使用ajax局部刷新gridview进行数据绑定示例

  具体代码如下:

  

复制代码 代码如下:

  <% @ 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 >