zoukankan      html  css  js  c++  java
  • 用 AJAX,局部刷新 GridView 进行数据绑定的简单实现

    很多用户都有这样需求,比如:点击按钮,刷新 GridView 中的数据,而不是这个页面刷新。使用简单的 XMLHttpRequest 就可以直接实现。具体代码如下:

    ASPX 代码
    <%@ 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>

    以上代码直接拷贝执行即可看到结果。

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/mane_yao/archive/2010/04/26/5528611.aspx

  • 相关阅读:
    异常单据锁定涉及的数据库表
    用友通只启用核算模块
    一个迟到MM如何让老师疯掉的
    偷偷看,别笑出声啊
    安装时又提示删除程序
    自动折行的设置
    酒后百态新编 恶搞
    系统管理中“站点”“运行状态”的含义
    神经病女士银行取钱
    HDOJ 1017
  • 原文地址:https://www.cnblogs.com/mane/p/1829928.html
Copyright © 2011-2022 走看看