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

来源：互联网发布：java 开源爬虫框架编辑：程序博客网时间：2024/04/29 01:45

<%@ 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 overridevoid 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:GridViewID="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>