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

<! 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 >