使用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 ] = " 【孟子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 >