Example of data binding using the Ajax local refresh GridView

  Many users have this need, such as: Click the button, refresh the data in the GridView, rather than the page refresh. With simple XMLHttpRequest, you can directly implement

The code is as follows: The code is as follows:  <% @ 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 createdatasourcebyxianhuime Ng ()   {    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 ("Student Name", typeof (System.String));     DT. Columns.Add (New System.Data.DataColumn ("language", typeof (System.Decimal));     DT. Columns.Add (New System.Data.DataColumn ("Mathematics", typeof (System.Decimal));     DT. Columns.Add (New System.Data.DataColumn ("English", typeof (System.Decimal));     DT. Columns.Add (New System.Data.DataColumn ("Computer", typeof (System.Decimal));        for (int i = 1; i < i + +)     {      System.Random rd = n EW System.Random (Environment.tickcount * i);;       DR = dt. NewRow ();       dr[0] = i;       dr[1] = "Mencius E chapter" "+ 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.query string["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> project" + request.querystring["id"] + "</h2>";       HEADER.CONTROLS.ADD (Header);       Header.rendercontrol (HTW);       Gridview1.rendercontrol (HTW);       Response.Write ("Query the data here, output the result is OK." Result: "+ sb." ToString ());       Response.End ();    }  }      ///Add this override void Verifyrenderinginserverform (control) to avoid the presence of &N Bsp The control "GridView1" of the    ///type "GridView" must be placed inside a form tag with Runat=server.      ///exception     public Override void Verifyrenderinginserverform (Control control)   {} </script >    < html xmlns = "http ://www.w3.org/1999/xhtml ">  < head id =" Head1 "runat =" server ">     < title > Using AJAX , the simple implementation of data binding by local refreshing GridView </title >       < script type = "Text/javascript" >  &nbsp ;    function GetData (p) {      document.getElementById ("D"). InnerHTML = "reading data ... " ;       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) {&nbs P          if (h.status >= && H.status <) {        &NBS P   document.getElementById ("D"). InnerHTML = H.responsetext;           {           else {          &N Bsp document.getElementById ("D"). InnerHTML = "<h2> Data manipulation Error:</h2>" + H.responsetext;           {       }      }       H.send (nul L);    }     Alert ("This prompt only appears on the first open page.") " );    </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" > Project one </option >      &NBS p;< option value = "2" > Project two </option >     </SeleCT >     </form >     < div id = "D" ></div >  </Body >&nb Sp </HTML >