使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现

点击按钮，刷新 GridView 中的数据，而不是这个页面刷新。使用简单的 XMLHttpRequest 就可以直接实现。具体代码如下：
<% @ 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 ] ="【Test】"+ 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>
使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现

猜你在找的Ajax相关文章
